Infragistics(R) NetAdvantage(R) jQuery
Initializing the igHierarchicalGrid
E-mail your feedback on this topic.

Glossary Item Box

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.

These properties are used in the example procedure that follows.

Preview

Following is a preview of the final result.

Requirements

General Requirements

Scripting Requirements

The required scripts for both jQuery and MVC sample are the same because the MVC wrappers just render a jQuery widget.

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

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-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="ig.ui.min.js"></script>

Database Requirements

For the purpose of this example only:

Initializing a jQuery igHierarchicalGrid

Inside the $(document).ready() event handler you can create a igHierarchicalGrid using ‘ds’ data source from the requirements above. Follow the next table to see how to initialize igHierarchicalGrid .

In Javascript:

$("#grid1").igHierarchicalGrid({
    initialDataBindDepth: 1,
    dataSource: ds,
    dataSourceType: 'json',
    responseDataKey: 'd.results',
    width: "700px",

    autoGenerateColumns: false,
    primaryKey: "CategoryID",
    columns: [
      { key: "CategoryID", headerText: "Category ID", dataType: "number" },
      { key: "CategoryName", headerText: "Category Name", dataType: "string" },
      { key: "Description", headerText: "Description", dataType: "string" }
    ],
            
    autoGenerateLayouts: false,
    columnLayouts: [
        {
            key: "Products",
            responseDataKey: 'results',
            autoGenerateColumns: false,
            primaryKey: "ProductID",
            foreignKey: "CategoryID",
            columns: [
                { key: "ProductID", dataType: "number" },
                { key: "ProductName", dataType: "string" },
                { key: "QuantityPerUnit", dataType: "string" }
            ]
        }
    ]    
});

To verify the result, open the HTML file in your browser. You should see the igHierarchicalGrid (as shown in the Preview above).

Initializing a 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()%>
     
    
    
  4. Save the project.
  5. (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.