Add Ignite UI for JavaScript Grids to ASP.NET MVC Applications

Ignite UI for JavaScript controls work seamlessly with ASP.NET MVC. With just a few lines of code, you can bring the power of an Ignite UI for JavaScript Grid to an ASP.NET MVC application. Ignite UI for JavaScript grid comes with a rich set of features such as filtering, sorting, paging and can seamlessly work with large sets of data. In this post, you will learn to add Ignite UI for JavaScript grid in ASP.NET MVC application.

Background

There are two ways you can add Ignite UI for JavaScript controls to MVC applications: the GridModel class syntax option, and the Chaining syntax option. These are really just syntax variations; use whichever you prefer. Keep in mind, though, that if you use the GridModel class syntax option, you have to configure all grid options like data source, paging, filter, sorting, etc. in the Controller class and pass object of GridModel class to the View. On the other hand, in the Chaining syntax, you need to configure all grid options on the View and pass data from the controller as IQueryable.   

In this post, you will learn to add an Ignite UI Grid using the GridModel class syntax to an ASP.NET MVC Application. In future posts, you’ll learn to use the chaining syntax option.

Adding References

Regardless of which syntax option you choose, you need to add the following items to your MVC project:

• Infragistics.Web.Mvc.dll
• Reference to Ignite UI for JavaScript JS and CSS files

After adding dependencies, you need to add CSS and JS references to the View where Ignite UI for JavaScript controls would be used. Read Ignite UI’s help topic on adding CSS and JavaScript references for more information on this topic.

In an MVC application, if you are using Ignite UI controls throughout the application, the best approach is to use MVC bundling. This way, you don’t have to add Ignite UI references to each View, and you can use Ignite UI controls through the application. The disadvantage of this approach is that Ignite UI will be downloaded at the start of the application. 

To create a bundle for Ignite UI in the BundleConfig.cs file, add the following code:

bundles.Add(new ScriptBundle("~/bundles/IgniteUI").Include(
                           "~/Scripts/jquery-ui-1.10.3.js",
                           "~/Scripts/Infragistics/js/infragistics.core.js",
                           "~/Scripts/Infragistics/js/infragistics.lob.js"));

            bundles.Add(new StyleBundle("~/IgniteUI/css").Include(
                             "~/Content/Infragistics/css/themes/infragistics/infragistics.theme.css",
                             "~/Content/Infragistics/css/structure/infragistics.css"));

After creating the bundle, update the _Layout.cshtml head section with the listing below: 

    @Styles.Render("~/IgniteUI/css")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/IgniteUI")

Configuring the Grid in Controller

To add a grid using the GridModel class syntax, you first need to add the Infragistics.Web.Mvc namespace to the Controller class.

After that, you need to bring data to the Controller. There are multiple ways data can be brought to the Controller. For example, you might be using LINQ to Entity or project-specific Repository pattern in your project to bring data. Keep in mind that as a data source, the Ignite UI for JavaScript grid accepts only IQueryable. Therefore, whichever form you bring data must be converted to IQueryable to set as data source of the grid.

Once you have the IQueryable data source, you need to create an object of GridModel class. This class comes as part of Infragistics.Web.Mvc namespace. You need to set properties such as Id, datasource of GridModel object and pass the object to the View.

All of the above tasks can be performed in the Controller class, as shown here:

 public ActionResult Index()
        {            
            StudentsEntities model = new StudentsEntities();
            IQueryable<Student> studentsData = model.Students.ToList().AsQueryable();
            GridModel studentGrid = new GridModel();
            studentGrid.ID = "studentgrid";
            studentGrid.PrimaryKey = "Id";
            studentGrid.DataSource = studentsData;
            studentGrid.AutoGenerateColumns = true;
            return View(studentGrid);
        }

In the above code snippet, you are fetching data and converting it to IQueryable. You need to convert List to IQueryable because Ignite UI for JavaScript grid works only with LINQ. After that, you are creating  an instance of GridModel class. The GridModel class is a helper class for the Ignite UI Grid control and is part of the Infragistics.Web.Mvc namespace. To the instance of GridModel class, you are setting the Id, Primary Key, AutoGeneratedColumns options of the grid. Most importantly, you are setting the DataSource property of the Ignite UI Grid to the IQueryable. This IQueryable will be bound as data of the grid at runtime.

Adding Grid to the View

You’re now ready to pass the GridModel instance to the View.  To render the Ignite UI for JavaScript Grid on the View, you need to add Infragistics.web.Mvc so that Grid API will be available on the View, and you need the model to match the type passed from the Controller.  So at the top of the View add this code:

@using Infragistics.Web.Mvc
@model Infragistics.Web.Mvc.GridModel

After adding the required namespace, you need to add references to Ignite UI JavaScript and CSS files (see “Adding References” in this post). Once all namespaces and references are added, you can create igGrid in the MVC view by using the Infragistics for JavaScript Grid helper class. In the class, pass the Model to create the view, like this:

@(Html.Infragistics().Grid(Model))

Putting everything together in the View, you should have code as listed below:

@using Infragistics.Web.Mvc
@model Infragistics.Web.Mvc.GridModel

<h2 class="text-center">Students Data </h2>
@(Html.Infragistics().Grid(Model))

Running the Application

When running the application, you can see Ignite UI for JavaScript Grid rendered in the MVC application like this:

Ignite UI for JavaScript Grids can easily be added to an ASP.NET MVC application. With a few lines of code, you can add a powerful, feature-rich grid into an ASP.NET MVC application.  In further posts, you will also learn to enable features such a filtering, paging, and sorting on the Ignite UI for JavaScript grid with a few more lines of code.

Ignite UI for JavaScript offers you more than 60 components, which can be integrated to any web application in a few steps. Take a few minutes to learn more, then try out Ignite UI for free. Our demo app and lessons show how easy it is to use Ignite UI for JavaScript components like our Grids and Charts in Angular.  

Finally, download our free Angular Essentials eBook to learn more about Angular.

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