Enable Ignite UI for JavaScript Grid Features in ASP.NET MVC Applications

Ignite UI for JavaScript controls work seamlessly with ASP.NET MVC applications. Simply by using a few lines of code, you can bring the power of a high performance Ignite UI for JavaScript Grid to an ASP.NET MVC application.

In addition to seamlessly rendering large sets of data, the Ignite UI for JavaScript Grid is loaded with many other features, such as filtering, paging, and sorting. In this blog post, you will learn how to configure various important features on the grid, including sorting, filtering, and paging. These features are available as local client-side features or remote server-side features. In this post we’ll focus on the local versions of these feature; remote versions will be covered in future posts.

To get started, follow the steps in the recent “Add Ignite UI for JavaScript Grids to ASP.NET MVC Applications” blog post. When complete, the application will display a Students Data table, rendered in the Ignite UI Grid.

From here, we’ll enable various features on this grid. Keep in mind that in this post, you will learn to enable various features using the GridModel class option.  (We will learn to enable various features using the Chaining Syntax option in later blog posts.)

Enable Paging

You can enable paging on the Ignite UI for JavaScript Grid by adding a feature configuration object for “Paging” to the grid. In the GridModel class approach, to enable paging in the Controller, add the code listed below:

            GridPaging paging = new GridPaging();
            paging.PageSize = 3;
            paging.Type = OpType.Local;
            studentGrid.Features.Add(paging);

Like in the GridModel class, the GridPaging class is part of Infragistics.Web.Mvc .In the above code snippet, you are creating an instance of the GridPaging class and setting required properties like PageSize (which sets the number of records per page) and Type (Local or Remote).  To enable the paging feature, you need to add the GridPaging object to the GridModel Features list.

Putting everything together, the Index method in your Controller should look like this:

public ActionResult Index()
{            
	StudentsEntities model = new StudentsEntities();
	IQueryable studentsData = model.Students.ToList().AsQueryable(); GridModel studentGrid = new GridModel(); studentGrid.ID = "studentgrid"; studentGrid.PrimaryKey = "Id"; studentGrid.DataSource = studentsData; studentGrid.AutoGenerateColumns = true; GridPaging paging = new GridPaging(); paging.PageSize = 3; paging.Type = OpType.Local; studentGrid.Features.Add(paging); return View(studentGrid); } 

There will be no changes in the code for the View. When you run the application, you will see a grid, configured with paging:

Enable Sorting

You can enable sorting in an Ignite UI for JavaScript Grid by adding a feature configuration object for the “Sorting” feature to the grid. In the GridModel class approach, to add Sorting to the gird, add the code listed below to the Index method of the Controller:

            GridSorting sorting = new GridSorting();
            sorting.Type = OpType.Local;
            sorting.Mode = SortingMode.Multiple;
            studentGrid.Features.Add(sorting);

The GridSorting Class is part of Infragistics.Web.Mvc. In the above code snippet, you are creating an instance of the GridSorting class and setting the value of required properties such as Type and Mode. The value of the Type property determines whether sorting will be Local or Remote, and the value of the Mode property determines whether sorting will be enabled on single column or multiple columns. If you have enabled sorting on multiple columns , you can sort the grid on more than one column. For example, you can sort the grid on the age column, then add a secondary sort on the name column. Here, the value is set to enable sorting on the multiple columns. To enable the sorting feature, you need to add the GridSorting object to the GridModel Features list.

Putting everything together, the Index method of your Controller should now look like this;

public ActionResult Index()
       {            
       	        StudentsEntities model = new StudentsEntities();
            	IQueryable studentsData = model.Students.ToList().AsQueryable(); GridModel studentGrid = new GridModel(); studentGrid.ID = "studentgrid"; studentGrid.PrimaryKey = "Id"; studentGrid.DataSource = studentsData; studentGrid.AutoGenerateColumns = true; GridPaging paging = new GridPaging(); paging.PageSize = 3; paging.Type= OpType.Local; studentGrid.Features.Add(paging); GridSorting sorting = new GridSorting(); sorting.Type = OpType.Local; sorting.Mode = SortingMode.Multiple; studentGrid.Features.Add(sorting); return View(studentGrid); } 

In the above code snippet, the sorting and paging features have both been enabled for the grid. Again, there are no changes to the View since we are using the GridModel approach. When you run the application, you will see a grid configured with paging and sorting as shown here:

Enable Filtering

You can enable filtering on Ignite UI for JavaScript Grids by adding a feature configuration object for “Filtering” to the grid. To do this in the GridModel class approach, add the code listed below to the Index method of the Controller:

           GridFiltering filering = new GridFiltering();
           filering.Mode = FilterMode.Simple;
           studentGrid.Features.Add(filering);

The GridFiltering class is part of Infragistics.Web.Mvc. In the above code snippet, you are creating an instance of the GridFiltering class and setting value of required property Mode. The Value of the Mode property determines whether filtering will be advanced or simple. Advanced filter allows you to filter the grid on equivalence, as well as comparisons such as greater than, less than, and so forth. In this case, the value is set to simple to enable simple filtering. To enable the filtering feature, you need to add the GridFiltering object to the GridModel Features list.

Putting everything together, the Index method of your Controller should look like this:

public ActionResult Index()
       {            
       	      StudentsEntities model = new StudentsEntities();
            	IQueryable studentsData = model.Students.ToList().AsQueryable(); GridModel studentGrid = new GridModel(); studentGrid.ID = "studentgrid"; studentGrid.PrimaryKey = "Id"; studentGrid.DataSource = studentsData; studentGrid.AutoGenerateColumns = true; GridPaging paging = new GridPaging(); paging.PageSize = 3; paging.Type= OpType.Local; studentGrid.Features.Add(paging); GridSorting sorting = new GridSorting(); sorting.Type = OpType.Local; sorting.Mode = SortingMode.Multiple; studentGrid.Features.Add(sorting); GridFiltering filering = new GridFiltering(); filering.Mode = FilterMode.Simple; studentGrid.Features.Add(filering); return View(studentGrid); } 

In the above code snippet the sorting, filtering and paging features have all been enabled for the grid.

Upon running the application, you will see a grid configured with paging, filtering and sorting as shown here:

In this post, you learned to add various features in Ignite UI for JavaScript Grid in an ASP.NET MVC application. By following a few steps, you can bring all power and features of Ignite UI Grid to MVC applications.

Ignite UI for JavaScript offers you more than 60 components, which can be integrated to any Web Application in a few very simple steps.  Download free trial to explore components here .

Ignite UI for JavaScript can be used to build great Angular applications. The Ignite UI for JavaScript Angular Demp App shows how easy it is to use all of the client-side Ignite UI for JavaScript Angular components, like Grids and Charts in Angular.  If you are new to Angular, or just want to learn more about it, download the free Angular Essentials eBook.

Dhananjay Kumar works as a Developer Evangelist for Infragistics. He is a seven-time Microsoft MVP. You can reach him on Twitter: @debug_mode.