Export Data In Angular-UI-Grid Using WebAPI

In this article, you will learn how to export grid data in CSV file or in PDF file. In this article, we will cover the things given below.

• Export visible grid data in CSV file.
• Export all grid data in CSV file.
• Export visible grid data in PDF file.
• Export all grid data in PDF file.
• Show/ hide grid columns.

Introduction

The exporter feature allows data to be exported from the grid in CSV or PDF format. The exporter can export all the data, visible data or selected data.

If you would like how to get started with UI-Grid and how to setup a project in AngularJS and Web API, refer

• UI-Grid With AngularJS And WebAPI

Thus after adding data in Entity Model, create a Web API to get the data from Entity model.

Web API

Here, my Web API class code is given below.

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;
using System.Web.Http.Description;
using ng_ui_grid_export_sample.Models;
namespace ng_ui_grid_export_sample.Controllers {
    public class EmployeesAPIController: ApiController {
        private NORTHWNDEntities db = new NORTHWNDEntities();
        // GET: api/EmployeesAPI
        public IQueryable < Employees > GetEmployees() {
            return db.Employees;
        }
        // GET: api/EmployeesAPI/5
        [ResponseType(typeof(Employees))]
        public async Task < IHttpActionResult > GetEmployees(int id) {
            Employees employees = await db.Employees.FindAsync(id);
            if (employees == null) {
                return NotFound();
            }
            return Ok(employees);
        }
        // PUT: api/EmployeesAPI/5
        [ResponseType(typeof(void))]
        public async Task < IHttpActionResult > PutEmployees(int id, Employees employees) {
            if (!ModelState.IsValid) {
                return BadRequest(ModelState);
            }
            if (id != employees.EmployeeID) {
                return BadRequest();
            }
            db.Entry(employees).State = EntityState.Modified;
            try {
                await db.SaveChangesAsync();
            } catch (DbUpdateConcurrencyException) {
                if (!EmployeesExists(id)) {
                    return NotFound();
                } else {
                    throw;
                }
            }
            return StatusCode(HttpStatusCode.NoContent);
        }
        // POST: api/EmployeesAPI
        [ResponseType(typeof(Employees))]
        public async Task < IHttpActionResult > PostEmployees(Employees employees) {
            if (!ModelState.IsValid) {
                return BadRequest(ModelState);
            }
            db.Employees.Add(employees);
            await db.SaveChangesAsync();
            return CreatedAtRoute("DefaultApi", new {
                id = employees.EmployeeID
            }, employees);
        }
        // DELETE: api/EmployeesAPI/5
        [ResponseType(typeof(Employees))]
        public async Task < IHttpActionResult > DeleteEmployees(int id) {
            Employees employees = await db.Employees.FindAsync(id);
            if (employees == null) {
                return NotFound();
            }
            db.Employees.Remove(employees);
            await db.SaveChangesAsync();
            return Ok(employees);
        }
        protected override void Dispose(bool disposing) {
            if (disposing) {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
        private bool EmployeesExists(int id) {
            return db.Employees.Count(e => e.EmployeeID == id) > 0;
        }
    }
}

Global

Now, add few lines in Global.asax in Application_Start event. 

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);
GlobalConfiguration.Configure(WebApiConfig.Register);

Now, add the mandatory packages given below, using NuGet Package Manager.

Bundling – Bundle the required styles and scripts.

Add the bundles given below in BundleConfig.cs

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/ui-grid.css"));
bundles.Add(new ScriptBundle("~/bundles/uigrid").Include(
"~/Scripts/ui-grid.min.js"));
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.min.js",
"~/Angular/Controller/employeecontroller.js"));

Render all the scripts and styles in _Loyout.cshtml

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/uigrid")
@RenderSection("scripts", required: false)

MVC Controller

If you are using your own Controller, add a new Controller in Controller folder.

public class EmployeeController: Controller {
    // GET: Employee
    public ActionResult Index() {
        return View();
    }
}

Create a new View name Index inside controller folder.

After adding all this, if you want to navigate this, view from _loyout.cshtml then add this line in _loyout.cshtml.

Now, add a new Angular controller with scope. I am using just one script for Module, Service and Controller. You can have it separate, if working on a big project.

Module

var employeeapp = angular.module('employeeapp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.exporter']);

Service

employeeapp.service("employeeservice", function($http) {
    //Function to call get genre web api call
    this.GetEmployee = function() {
        var req = $http.get('api/EmployeesAPI');
        return req;
    }
});

Controller

//Controller
employeeapp.controller("employeecontroller", function($scope, employeeservice, $filter, $window, $interval) {
    GetEmployee();

    function GetEmployee() {
        employeeservice.GetEmployee().then(function(result) {
            $scope.Employees = result.data;
            console.log($scope.Employees);
        }, function(error) {
            $window.alert('Oops! Something went wrong while fetching employee data.');
        })
    }
    $scope.gridOptions = {
        enableRowSelection: true,
        paginationPageSizes: [5, 10, 20, 30, 40],
        paginationPageSize: 5,
        enableSorting: true,
        columnDefs: [{
            name: 'photo',
            enableSorting: false,
            field: 'PhotoPath',
            cellTemplate: "<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>"
        }, {
            name: 'First Name',
            field: 'FirstName',
            headerCellClass: 'tablesorter-header-inner'
        }, {
            name: 'Last Name',
            field: 'LastName',
            headerCellClass: 'tablesorter-header-inner'
        }, {
            name: 'Title',
            field: 'Title',
            headerCellClass: 'tablesorter-header-inner'
        }, {
            name: 'City',
            field: 'City',
            headerCellClass: 'tablesorter-header-inner'
        }, {
            name: 'Country',
            field: 'Country',
            headerCellClass: 'tablesorter-header-inner'
        }, {
            name: 'Notes',
            field: 'Notes',
            headerCellClass: 'tablesorter-header-inner'
        }],
        //This code used for export grid data in csv file
        enableGridMenu: true,
        enableSelectAll: true,
        exporterMenuPdf: true,
        exporterCsvFilename: 'EmployeeList.csv',
        //This is for PDF export
        exporterPdfDefaultStyle: {
            fontSize: 9
        },
        exporterPdfTableStyle: {
            margin: [30, 30, 30, 30]
        },
        exporterPdfTableHeaderStyle: {
            fontSize: 10,
            bold: true,
            italics: true,
            color: 'red'
        },
        exporterPdfHeader: {
            text: "My Header",
            style: 'headerStyle'
        },
        exporterPdfFooter: function(currentPage, pageCount) {
            return {
                text: currentPage.toString() + ' of ' + pageCount.toString(),
                style: 'footerStyle'
            };
        },
        exporterPdfCustomFormatter: function(docDefinition) {
            docDefinition.styles.headerStyle = {
                fontSize: 22,
                bold: true
            };
            docDefinition.styles.footerStyle = {
                fontSize: 10,
                bold: true
            };
            return docDefinition;
        },
        exporterPdfOrientation: 'portrait',
        exporterPdfPageSize: 'LETTER',
        exporterPdfMaxGridWidth: 500,
        //End here
        exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
        },
        //end here
        //data for binding grid
        data: 'Employees',
        //end here
    };
});

Index

@ {
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
} < h2 > Employee List < /h2>   < div ng - app = "employeeapp"
ng - controller = "employeecontroller" > < div ui - grid = "gridOptions"
ui - grid - auto - resize ui - grid - pagination ui - grid - selection ui - grid - exporter class = "grid"
style = "height:300px" > < /div>   < /div>

As everything is done, run the Application.

Once the Application is run, you can see there is an icon on right side of the grid header.

If you click on the icon, you can see export options and all visible columns.

If you scroll down little bit, you can see all the columns names with hide show status.

Let’s click Export all data as CSV. As you can see, there is one CSV file, which is downloaded with all columns data. If you click Export visible data as CSV, then all visible data will be exported.

See the exported CSV file.

Now, click Export PDF option.

Note – Please make sure to install PdfMake before exporting in PDF. 

bower install pdfmake

Or

You can add it, using form NuGet Package Manager.

Add the bundles given below in BundleConfig.cs. 

bundles.Add(new ScriptBundle("~/bundles/pdfmake").Include(
"~/Scripts/pdfmake/pdfmake.min.js",
"~/Scripts/pdfmake/vfs_fonts.js"));

Exported PDF file is given.

If you want to hide some columns, simply click on the column name and you can unhide also.

Conclusion

In this article, we have seen how to use export Angular UI-Grid data in CSV and PDF and show hidden grid columns with Web API with an Entity Framework in MVC. If you have any question or comments, drop me a line in the comments section.