Adding Controls to an MVC Project

Topic Overview

This topic explains how to get started with Ignite UI for MVC™ components.

In this topic

This topic contains the following sections:

Using MVC helper

Using the MVC helper overview

The Ignite UI for MVC provides a server-side set of MVC Extensions that allows the Ignite UI for jQuery controls to be defined and used in the following way:

In Razor:



In Razor:


All controls have helper methods available off of the Infragistics() extension methods and can be seen using intellisense.

In Razor:

@(Html.Infragistics().Grid("grid1", Model.GridFiltering))

Navigate to the installed resources

If you have chosen the typical installation of Ignite UI for jQuery 2023.1, you can find the resources under the paths below:

Type Path
Assemblies %%InstallPathMVC%%\
Script files C:\Program Files (x86)\Infragistics\2023.1\Ignite UI for jQuery\js
CSS files C:\Program Files (x86)\Infragistics\2023.1\Ignite UI for jQuery\css

MVC 4, MVC 5

All the Ignite UI for MVC functionality is contained in the Infragistics.Web.Mvc assembly, which comes compiled against all MVC4 and MVC5. For further details on the assembly location of the Ignite UI for MVC, please read Using JavaScript Resources in Ignite UI for jQuery.

Note: You should set Copy Local property of the reference of the dll to be true.

Use the Ignite UI for MVC loader

The Infragistics loader is used to load dependent scripts and styles files required for the page. For further details on how to use the loader please refer to the topic: Using JavaScript Resources in Ignite UI for jQuery.

The following code listing demonstrates how to initialize the Ignite UI for MVC loader:

In Razor:

  <script src="{IG Resources root}/js/infragistics.loader.js"></script>
        .ScriptPath("{IG Resources root}/js/")
        .CssPath("{IG Resources root}/css/")

The JavaScript files are also available in a hosted environment on the Infragistics CDN. The benefits of using a CDN are numerous so please refer to the Infragistics Content Delivery Network (CDN) help topic for details.

In Razor:

<script src=""></script>

In Razor:


Calling Render() method

When instantiating a Ignite UI for MVC control, you must call the Render method last after all other options are configured. This is the method that renders the HTML and JavaScript necessary to instantiate the control on the client.

Methods for using Ignite UI for MVC Controls

Methods for configuring the controls summary

There are two different options available for declaring controls in an MVC application available. The following table lists the available methods for defining Ignite UI for MVC controls depending on whether you define the control in a Model or in the View. Additional details are available after the summary table.

Method Description
Defining controls in a Model Defining the control by configuring a Model class and passing it as an argument in the grid extension method.
Defining controls in a View Defining the control in the View using chaining syntax.

Configuring controls in a View

Initializing the control with the chaining syntax moves all creation and configuration logic to the view, making the controller code extremely concise and clear. Defining the control in the view is achieved by exposing required properties and methods through helper’s methods that always return the same object that called them.

The following code listing demonstrates how to initialize the igTree control using the chanining syntax.

In Razor:

        Bindings( bindings => {
            Bindings( b1 => {

For complex objects lambda expressions are used in order to achieve the syntax. The following code listing demonstrates how to configure ColumnLayouts using lambda expressions.

In Razor:

.ColumnLayouts(layouts =>
        layouts.For(x => x.CustomerAddresses)
        .Columns(childcols1 =>
                childcols1.For(x => x.AddressTypeID).HeaderText("AddressTypeID");
                childcols1.For(x => x.AddressID).HeaderText("AddressID");
                childcols1.For(x => x.CustomerID).HeaderText("CustomerID");

Configuring controls in a Model

Using a model class relies on the controller to configure the control. This is useful in a scenario where after a request, you need to retrieve some of the settings or properties of the control which wouldn’t be otherwise available if you would have used chaining to configure everything in the View.

Note: The model class exists as a helper that can be used to help return data to the view. It is not required for any specific functionality in the controller but does make more complex remote operations easier to code.

In C#:

public ActionResult GridFiltering()
   GridFilteringModel model = new GridFilteringModel();
   model.GridFiltering.DataSourceUrl = Url.Action("BindGridFiltering");
   return View(model);

private void InitializeSortingGridOptions(GridModel model)
   model.Height = "500px";
   model.Columns.Add(new GridColumn("Product ID", "ProductID", "number", "100px"));
   model.Columns.Add(new GridColumn("Product Name", "Name", "string", "300px"));
   model.Columns.Add(new GridColumn("Product Number", "ProductNumber",        "string", "205px"));
   model.Columns.Add(new GridColumn("Standard Cost", "StandardCost", "number", "110px"));
   GridFiltering filtering = new GridFiltering();

Developing ASP.NET MVC application with igTree


The following procedure demonstrates how to add the required assemblies and resources (CSS and JavaScript files) to work with Ignite UI for MVC.


To complete the procedure, you need the following:

  • A project with any Web application
  • Ignite UI for jQuery 2023.1 installed
  • jQuery core library 1.4.4 version or above
  • jQuery UI library 1.8.17 or above
  • Modernizr open-source JavaScript library 2.5.2 or above


This topic takes you step-by-step toward developing an ASP.NET MVC application with the igTree control. The following is a conceptual overview of the process:

  1. Declaring the igTree in an MVC application using chaining

  2. Adding the controller’s code

  3. Bindings


The following steps demonstrate how to develop ASP.NET MVC application with igTree.

  1. Adding required resource to the MVC application

    • Navigate to the installation folder of Ignite UI for jQuery 2023.1: C:\Program Files (x86)\Infragistics\2023.1\Ignite UI for jQuery

    • Copy the js and css folder to the root directory of your MVC application

    • Add reference to Infragistics.Web.Mvc assembly

      Note: You should set Copy Local property of the reference of the dll to true.

  2. Declare the igTree in an MVC application

    • Add the Infragistics loader

      This step adds the Infragistics loader to the header of the page

      In Razor:

           .ScriptPath("{IG Resources root}/js/")
           .CssPath("{IG Resources root}/css/")
    • Add the igTree control

      This step adds the igTree control to the MVC application.

      In Razor:


      Note: Notice the use of the Render method the code listing. All Ignite UI for MVC require the Render method to be called as the last method in order to initiate server-side rendering for the control.

  3. Add the controller’s code

    • Add the action name

      This step adds the ActionName to the controller

      In C#:

      public ActionResult DataBindingUsingMVC()
       return View("NodeImages", this.GetData());
    • Add the GetData() helper method to the controller

      This step defines the helper method for creating the data source

      In C#:

      private IEnumerable<Folders> GetData()
      string phisicalFilePath = System.Web.HttpContext.Current.Server.MapPath(System.Web.HttpContext.GetGlobalResourceObject("Tree", "path_treeData").ToString());
      var ctx = XDocument.Load(phisicalFilePath);
      IEnumerable<Folders> data = from item in ctx.Root.Elements("Folder")
         select new Folders
            Text = item.Attribute("Text").Value,
            Value = item.Attribute("Value").Value,
            ImageUrl = Url.Content(item.Attribute("ImageUrl").Value),
            Folder = from i1 in item.Elements("Folder")
       select new Folders
          Text = i1.Attribute("Text").Value,
          Value = i1.Attribute("Value").Value,
          ImageUrl = Url.Content(i1.Attribute("ImageUrl").Value),
          Folder = from i2 in i1.Elements("Folder")
                 select new Folders
             Text = i2.Attribute("Text").Value,
             Value = i2.Attribute("Value").Value,
             ImageUrl = Url.Content(i2.Attribute("ImageUrl").Value),
             Folder = from i3 in i2.Elements("Folder")
                     select new Folders
                           Text = i3.Attribute("Text").Value,
                           Value = i3.Attribute("Value").Value,
                           ImageUrl = Url.Content(i3.Attribute("ImageUrl").Value)
      return data;
  4. Bindings

    • Add the tree bindings

      This step adds the bindings configuration to the igTree.

      Note: In order for the igTree control to determine how each field of the bound data should function in the hierarchy, a binding object must be configured for each type of object that needs to be displayed in the tree.

      In C#:

      .Bindings( bindings => {

Next Steps

Now that you've had the opportunity to learn about working with Ignite UI for MVC, make sure to check out Developing ASP.NET MVC Applications with igGrid for more detail on working specifically with ASP.NET MVC and the igGrid.

Related Content


The following topics provide additional information related to this topic.

View on GitHub