Version

Initializing igHierarchicalGrid

Topic Overview

Purpose

This topic demonstrates how to initialize the igHierarchicalGrid™ in both jQuery and MVC.

In this topic

This topic contains the following sections:

Introduction

Bellow following are the main igHierarchicalGrid properties that are typically used with initialization. They are same as the properties of the flat igGrid.

  • key – the ID of a column layout
  • dataSource – the data source that the igHierarchicalGrid takes the data from
  • initialDataBindDepth – The level of hierarchy, at which the igHierarchicalGrid will initially bind the data source
  • responseDataKey – the object that holds the collection of the row elements.
  • primaryKey – the primary key of a child layout
  • foreignKey – the foreign key of a child layout

These properties are used in the example procedure that follows.

Preview

Following is a preview of the final result.

Requirements

General Requirements

  • jQuery-specific requirements

    • An HTML web page with a grid connected to a data source
    • A table tag in the body of the HTML page to serve as a container for the grid

    In HTML:

    <table id="hierarchicalGrid">
</table>

  • MVC-specific requirements

    • An MVC 4, MVC 5 or ASP.NET Core project in MS Visual Studio® with a grid connected to a data source
    • A reference to the MVC dll (stores the MVC IG wrappers)

Scripting Requirements

The required scripts for the jQuery and MVC samples are the same because Ignite UI for MVC renders jQuery widgets.

The following scripts are required to run the grid and its grouping functionality:

  • The jQuery library script
  • The jQuery User Interface (UI) library
  • The IG library script (This is obfuscated code for the controls)

The following code sample demonstrates the scripts as added to the header code of the HTML file.

In HTML:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script><script type="text/javascript" src="infragistics.lob.js"></script>

Database Requirements

For the purpose of this example only:

  • jQuery – Northwind database

  • MVC – Adventure Works database.

Initializing a jQuery igHierarchicalGrid

The sample below demonstrates how to bind igHierarchicalGrid to JSON data source.

igHierarchicalGrid JSON Binding

Initializing an MVC igHierarchicalGrid

  1. Create the LINQ to SQL model.

  2. Create an MVC Controller method.

    Create MVC Controller method that will get data from the Model and will call the View

    In MVC:

    public ActionResult Default()
{
    var ctx = new AdventureWorksDataContext("ConnString");
    var ds = ctx.Products;

    return View("Events", ds);
 }

  3. Define the igHierarchicalGrid.

    In ASPX:

    <%= Html.Infragistics()
.Grid(Model)
.ID("grid1")
.LoadOnDemand(false)
.AutoGenerateColumns(true)
.PrimaryKey("ProductID")
.AutoGenerateLayouts(false)
.ColumnLayouts(layouts => {
    layouts.For(x => x.ProductInventories)
        .PrimaryKey("LocationID")
        .ForeignKey("ProductID")
        .AutoGenerateColumns(false)
        .Columns(childcols1 =>
        {
            childcols1.For(x => x.ProductID);
            childcols1.For(x => x.LocationID);
            childcols1.For(x => x.Shelf);
            childcols1.For(x => x.Bin);
            childcols1.For(x => x.Quantity);
        });
})
.Width("750px")
.DataBind()
.Render()%>
  1. Save the project.
  2. (Optional) Verify the result.

To verify the result, run your application. You should see the igHierarchicalGrid (as shown in the Preview above).

Related Topics

Following are some other topics you may find useful.

View on GitHub