Datatable Exporting with AngularJS and asp.net mvc

Continuing the previous Posts in AngularJS
In the previous posts I had shown

DataTables in MVC:

• Code First Migrations in MVC 5
• Jquery DataTable in MVC
• Jquery DataTable multisearch paging and Sorting in MVC server side
• Jquery DataTable paging, Sorting and Multi search with datepicker in MVC server side
• Cascading DropDowns in Asp.Net MVC

AngularJS:

• Two way Binding in AngularJS
• Simple Routing in AngularJS
• Datatables in AngularJS and asp.net mvc
• Datatables Column Filter with AngularJS and asp.net mvc

Out Put :

As Explained in the previous post

• Datatables Column Filter with AngularJS and asp.net mvc

Add the DataTable dependency 'datatables.buttons' to angular module and its related *.js files.

Add a new AngularController named as APPExporting.js file, with in the file add the script as shown below.

  

app.controller('exportingController', ['$scope', '$http', '$filter', 'DTOptionsBuilder', 'DTColumnBuilder',

    function ($scope, $http, $filter, DTOptionsBuilder, DTColumnBuilder) {

        $scope.dtColumns = [
        DTColumnBuilder.newColumn("ID", "ID").withOption('name', 'ID'),
        DTColumnBuilder.newColumn("FirstName", "First Name").withOption('name', 'FirstName'),
        DTColumnBuilder.newColumn("LastName", "Last Name").withOption('name', 'LasttName'),
        DTColumnBuilder.newColumn("Gender", "Gender").withOption('name', 'Gender'),
        DTColumnBuilder.newColumn("Salary", "Salary").withOption('name', 'Salary'),
        DTColumnBuilder.newColumn("DOJ", "Date of Join")
            .withOption('name', 'DOJ').renderWith(function (data, type) {
                var dt = data.replace("/Date(", "").replace(")/", "");
                return $filter('date')(dt, 'dd/MM/yyyy'); //date filter
            })
        ];

        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            dataSrc: "data",
            url: "/home/getEmployeeListAll/",
            type: "POST"
        })
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('aaSorting', [0, 'asc'])
        //.withOption('scrollX', '100%')
        .withOption('scrollY', '300px')
        .withOption('scrollCollapse', false)        
        .withDOM('lrtip')// Hides Default Search

        //#region Col Filter Light
        
        ////.withDOM('<"top">rt<"bottom"ipl><"clear">') // 2 display No of records at bottom
        .withLightColumnFilter({
            '0': { html: 'input', type: 'text' },
            '1': { html: 'input', type: 'text' },
            '2': { html: 'input', type: 'text' },
            '3': { html: 'input', type: 'text' },
            '4': { html: 'input', type: 'text' },
            //'5': { html: 'range', type: 'date' }// Not firing
            '5': { html: 'input', type: 'date' }
        })

        //#endregion Col Filter Light


        //#region Buttons 4r Export, Print....
        
        .withButtons([
            'copy',     // HTML 5
            'print',    // HTML 5          
            'csv',      // HTML 5            
            'excel',    // Flash
            'pdf',       // Flash
            {
                text: 'Custom Print',
                key: '1',
                extend: 'print',                
                title: 'Sample Title',
                message: 'This print was produced using the Print button for DataTables',
                //action: function (e, dt, node, config) {
                //    alert('Button activated');
                //}
            },
            //// Not working as Expected
            //{
            //    text: 'Custom Excel',
            //    key: '2',
            //    extend: 'excel',
            //    title: 'Sample Title',
            //    message: 'This print was produced using the Print button for DataTables',
            //    //action: function (e, dt, node, config) {
            //    //    alert('Button activated');
            //    //}
            //}
        ])
    }]);

Lets ADD a new ActionResult in HomeController.cs file

  

public ActionResult Exporting()
{
 return View();
}

For the above ActionResult add the View, with in the view add the below script.

@{
    ViewBag.Title = "Exporting Page";
}

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/buttons.dataTables.css" rel="stylesheet" />

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="~/Scripts/AngularDT/dataTables.columnFilter.js"></script>
<script src="~/Scripts/AngularDT/dataTables.lightColumnFilter.js"></script>

<script src="~/Scripts/DataTables/dataTables.buttons.js"></script>
<script src="~/Scripts/DataTables/buttons.flash.js"></script>
<script src="~/Scripts/DataTables/buttons.html5.js"></script>
<script src="~/Scripts/DataTables/buttons.print.js"></script>

<script src="~/Scripts/DataTables/dataTables.bootstrap.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/AngularDT/angular-datatables.js"></script>
<script src="~/Scripts/AngularDT/plugins/columnfilter/angular-datatables.columnfilter.js"></script>
<script src="~/Scripts/AngularDT/plugins/light-columnfilter/angular-datatables.light-columnfilter.js"></script>
<script src="~/Scripts/AngularDT/plugins/buttons/angular-datatables.buttons.js"></script>
<script src="~/Scripts/AngularDT/APP.js"></script>
<script src="~/Scripts/AngularDT/APPExporting.js"></script>

<br />
<div class="container">
    <div ng-controller="exportingController">
        <table id="entry-grid" datatable="" dt-options="dtOptions"
               dt-columns="dtColumns" class="table table-hover table-bordered"></table>
    </div>
</div>