Ignite UI for jQuery is a JavaScript-based jQuery UI control suite that you can use to build rich, interactive web applications. When Ignite UI for jQuery is paired with ASP.NET MVC, you have the option to use JavaScript directly or with the Ignite UI for MVC.
Ignite UI for MVC is a collection of .NET classes and extension methods that generate the HTML markup and JavaScript required to work with Ignite UI for jQuery controls. Once rendered to the page, there is very little difference between code you may write by hand using a JavaScript-only approach and what is rendered by Ignite UI for jQuery MVC Helpers, but using the helpers may be a good choice for you if:
You are implementing remote features like remote load-on-demand, remote paging, remote filtering, etc.
You feel more comfortable working with MVC view engine syntax or in managed code rather than HTML and JavaScript
This document is focused specifically on explaining the igGrid MVC Helper. Along the way you'll become familiar with the different syntax options available when constructing a view as well as the different approaches available to you in working with the server to provide data to the grid.
Note: This document shows sample code using the Razor view engine and in C#.
Before you can use the Ignite UI for MVC Grid, you must first create a reference to the Infragistics.Web.Mvc assembly and reference the proper scripts and style sheets on your page.
Begin by creating a reference in your ASP.NET application to the Ignite UI for MVC assembly which is found at this location:
%%InstallPathMVC%%\<MVC_VERSION_NUMBER>\Bin\Infragistics.Web.Mvc.dll
Next, you need to reference the required style sheet and script files on your page.
<link type="text/css" href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="css/structure/infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script>
<script type="text/javascript" src="infragistics.lob.js"></script>
Note: Due to the nature of how the Ignite UI for jQuery MVC Helpers operate, you must include references to jQuery, jQuery UI and Ignite UI for jQuery at the top of the page.
When using the Ignite UI for MVC, there are a few different parts that compose a page that are relevant to using the igGrid. As a page is requested, Model data is collected in the Controller and passed to the View so the Ignite UI for MVC can render the control on the page. In the Controller, you can choose to either pass data directly to the view in the form of an IQueryable<T> collection, or pass an instance of the Infragistics.Web.Mvc.GridModel class.
Note: The Ignite UI for MVC Grid data source uses LINQ and therefore only accepts instances of
IQueryable<T>. Even when you opt to use theGridModelyou will explicitly set theDataSourceproperty which requires an instance ofIQueryable<T>.
Therefore, as you use the Ignite UI for MVC Grid you use syntax that follows a pattern like this:
@(Html.Infragistics().Grid(/* collection or grid model here */)...
The Grid method supports a number of overloads that give you the ability to select a syntax variation you want to use with Ignite UI for MVC. A "syntax variation" is found while either using data collections (IQueryable<T>) or a grid model. The following table shows how the return type of Ignite UI for MVC is affected by the argument you pass in to the Grid method.
| Syntax Variation | Primary Argument | Return Type |
|---|---|---|
| Grid Model | IGridModel | MvcHtmlString |
| Chaining | IQueryable<T> | IGrid<T> |
Note: The above table refers to the "Primary Argument" because Ignite UI for MVC includes a number of variations in the overloads that include the ability to control the rendered TABLE element's HTML attributes, but the main difference between each of the overloads is the differentiation between either using
IQueryable<T>orInfragistics.Web.Mvc.GridModelinstances.
The first option available to you in configuring the igGrid is to define all the options for the grid (including the data source) in the controller and simply pass the GridModel instance to the Helper. As an example, here a controller creates an instance of the GridModel class and sets the DataSource property to an instance of an IQueryable<T> collection.
using Infragistics.Web.Mvc;
...
public class GridModelController : Controller
{
public ActionResult Index()
{
PersonRepository repository = new PersonRepository();
GridModel model = new GridModel();
model.DataSource = repository.GetAll();
return View(model);
}
}
The GridModel is send to the view and used by the Ignite UI for MVC Helper to render the control.
@using Infragistics.Web.Mvc
@model Infragistics.Web.Mvc.GridModel
...
@(Html.Infragistics().Grid(Model))
Notice that the page requires a using directive to import Infragistics.Web.Mvc at the top of the page to make the API available in the view. The model's declared type is Infragistics.Web.Mvc.GridModel which matches what was passed to the view by the controller. Since the return type for the Grid method in this case is MvcHtmlString (which ultimately is the rendered string of HTML and JavaScript for the page), no further method calls are required to render the control.
If you were to view the source of the page rendered as a result of this example you will see something like this:
<table id="Grid1"></table>
<script type="text/javascript">$(function () {$('#Grid1').igGrid({ dataSource: {"Records":[{"Name":"John Smith","Age":45},{"Name":"Mary Johnson","Age":32}],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-25200000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { key: 'Name', headerText: 'Name', width: null, dataType: 'string' }, { key: 'Age', headerText: 'Age', width: null, dataType: 'number' } ], features: [ { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting' } ], localSchemaTransform: false });});</script>
It's not important for you to understand everything in this code listing at the moment, but this is included to help you get an understanding of the type of code rendered as you use Ignite UI for MVC. Notice that a HTML TABLE element is generated with an ID of Grid1. Then in the SCRIPT element, just after the jQuery ready anonymous function, is the jQuery selector of $('#Grid1') runs which associates the data and options to the declared TABLE element.
When you want to have fine-grained control over the settings and features of the grid, you simply need to appropriately compose the object model for the grid. The following listing demonstrates how to:
Here is the controller code that initializes the grid model:
public ActionResult Index()
{
PersonRepository repository = new PersonRepository();
GridModel model = new GridModel();
model.AutoGenerateColumns = false;
GridColumn nameColumn = new GridColumn();
nameColumn.Key = "Name";
nameColumn.HeaderText = "Name";
nameColumn.DataType = "string";
GridColumn ageColumn = new GridColumn();
ageColumn.Key = "Age";
ageColumn.HeaderText = "Age";
ageColumn.DataType = "number";
model.Columns.Add(nameColumn);
model.Columns.Add(ageColumn);
GridSorting sorting = new GridSorting();
sorting.Mode = SortingMode.Multiple;
ColumnSortingSetting colSetting = new ColumnSortingSetting();
colSetting.ColumnKey = "Name";
colSetting.AllowSorting = false;
sorting.ColumnSettings.Add(colSetting);
model.Features.Add(sorting);
model.DataSource = repository.GetAll();
return View(model);
}
As an alternative to defining the grid model in the controller, you may choose to use the chaining syntax. When you pass in a collection of data into the Ignite UI for MVC Helper, the Grid method returns an instance of IGrid that exposes a fluent interface allowing you to chain method calls to define the control on your page.
Consider a Controller where data is passed to the view as an IQueryable<T> collection:
using Infragistics.Web.Mvc;
...
public class ChainedController : Controller
{
public ActionResult Index()
{
PersonRepository repository = new PersonRepository();
IQueryable<Person> people = repository.GetAll();
return View(people);
}
}
Here the Ignite UI for MVC Grid passed the collection via the page's Model.
@using Infragistics.Web.Mvc
@model System.Linq.IQueryable<HelloMVC.Models.Person>
...
@(Html.Infragistics()
.Grid(Model)
.DataBind()
.Render())
Here again the page requires a using directive make the Infragistics.Web.Mvc API available in the view. The model is defined to match the incoming type as determined by what the controller passes to the view. In this case the type is System.Linq.IQueryable<HelloMVC.Models.Person>.
As the grid is declared, the Grid method is called and the Model is passed in as the primary argument. The call to DataBind is necessary in order to serialize the data from the server to the client. Finally, Render is called to tell the Helper to render the HTML element and JavaScript required to render the control to the page.
The resulting HTML and JavaScript is the same as shown in the previous Grid Model section.
When using chaining, you use a similar approach as you might when using the grid model in order to take fine-grained control over the grid. Instead of building the object graph up in the controller, you declaratively define the specifics for the grid using the fluent interface.
The following listing demonstrates how to:
Implementing these details using chaining looks like this:
@(Html.Infragistics()
.Grid(Model)
.AutoGenerateColumns(false)
.Columns(column =>
{
column.For(x => x.Name).HeaderText("Full Name");
column.For(x => x.Age).HeaderText("Age");
})
.Features(f => f.Sorting()
.Mode(SortingMode.Multiple)
.ColumnSettings(settings => {
settings.ColumnSetting()
.ColumnKey("Name")
.AllowSorting(false);
}))
.DataBind()
.Render())
The Helper uses lambda expressions in order to compose the object graph in Razor in much the same way you would in C# in the controller. Other than the use of lambdas, notice how all declarations are stated with parenthesis, even you are setting a property's value (like setting AutoGenerateColumns to false).
Note: When you are defining columns using chaining, you do not need to specify the underlying data’s data type, unless you would like to override the automatically inferred data type of the column.
Along with syntax variations, the grid is flexible enough to allow for different approaches when binding to data. You can either choose to have the grid rendered along with serialized data by explicitly setting the DataSource, or you can allow the grid to be initially rendered empty and allow for subsequent request to fetch data for the grid by providing a DataSourceUrl value.
Note: While this section discusses serialized and asynchronous data independently, you may choose to mix the approaches in your applications as both techniques will work together.
All of the code used so far in this tutorial have provided data for the DataSource of the grid which ends up serializing all the data as JSON into the HTML page. (Click here to see an example of how what serialized data looks like.)To revisit these examples you can take a look at how this is accomplished via the grid model as well as with chaining.
If you want remote features enabled, then you may want to set up the grid to support asynchronous requests in order to retrieve data. The following code demonstrates how to use chaining in order to initially render a grid which then gets it's data from a separate location:
Note: When supporting asynchronous data, you must set
AutoGenerateColumnstofalseand explicitly define grid columns.
The following controller sets the GridModel's DataSourceUrl property to an action method that returns JSON data. The Data method also return a GridModel, but sends it back with data associated to the DataSource:
using Infragistics.Web.Mvc;
...
public class AsyncController : Controller
{
private GridModel GetModel()
{
GridModel model = new GridModel();
model.AutoGenerateColumns = false;
GridColumn nameColumn = new GridColumn();
nameColumn.Key = "Name";
nameColumn.HeaderText = "Name";
nameColumn.DataType = "string";
GridColumn ageColumn = new GridColumn();
ageColumn.Key = "Age";
ageColumn.HeaderText = "Age";
ageColumn.DataType = "number";
model.Columns.Add(nameColumn);
model.Columns.Add(ageColumn);
model.DataSourceUrl = "/async/data";
return model;
}
public ActionResult Index()
{
GridModel model = this.GetModel();
return View(model);
}
public JsonResult Data()
{
PersonRepository repository = new PersonRepository();
GridModel model = GetModel();
model.DataSource = repository.GetAll();
return model.GetData();
}
}
The associated View for this controller is:
@using Infragistics.Web.Mvc
@model Infragistics.Web.Mvc.GridModel
@(Html.Infragistics().Grid(Model))
View on GitHub