In this post I am going to demonstrate how to use Angular UI Grid with server side pagination in ASP.Net MVC application.

Introduction:

Angular UI Grid is a data grid for AngularJS without JQuery that can perform with large data, which is part of the Angular UI suite.

Background:

Recently I was searching for a data table that have component like sorting, filtering, pagination, inline editor, responsive and other advance facilities. I have tried to integrate & use Jquery datatable(Angular), but the problem arise while I was trying to pass entire row passing while row click/row selected button click.

It fails to pass angular object (only can pass int, string, boolean) while render, this was a big issue to me as I was using angularJS in application frontend.

I decided to change the entire table, I found Angular UI Grid.

Let’s Get Into It:

As we know Angular UI Grid is a part of Angular UI, so we have some facilities. We need to download/install package before we are going to use in our application.

To download the package, go to URL: http://ui-grid.info

uig1

Fig: 1

SQL Database:

Let’s Create a SQL database, using the new database execute the table script to create new table in the new database.

Demo Data:

MVC Application:

Let’s create a new demo application with visual studio 2015. Select MVC and Web API below. Click OK.

uig2

Fig: 2

After loading the initial application template, we need to install the script packages. We need to install two package using NuGet Package installer.

First we will install AngularJS and after that we need to add Angular-Ui-Grid. In package manager console write Install-Package angularjs. After successfully installation write Install-Package angular-ui-grid.

uig3

Fig: 3

Or we can install packages using NuGet package manager

AngularJS

uig4

Fig: 4

AngularJS-uigrid

uig5

Fig: 5

Our packages are installed, now we need to add a new controller and generate view to the application. In our master layout we need to add reference of script library.

uig6

Fig: 6

In the head section add the ui style reference

uig7

Fig:7

 AngularJS

Let’s add folder’s to create angular script.

uig8

Fig: 8

 JS-Module

JS-Controller

JS-Service

Ui-Grid

In index.cshtml page add ui-grid directive

uig9

Fig: 9

The loader which will show a loading messaging while data is loading from server.

uig10

Fig: 10

At bottom end, add angular reference to the page

uig11

Fig: 11

 Complete Ui Code:

Model: Our Ui is ready Let’s create a new model in our demo application.

uig12

Fig: 12

I have used api controller to get data from server, which will get called while pagination operate.

Api-Controller:

Final Output:

uig13

Fig: 13

Filter Data:

uig14

Fig: 14

Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *