Infragistics(R) NetAdvantage(R) jQuery
igHierarchicalGrid Columns and Layouts
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This topic demonstrates how to define columns and layouts in the igHierarchicalGrid™ including through auto-generation.

In this topic

This topic contains the following sections:

Features overview

The table below provides brief descriptions of the Colimns features of the igHierarchicalGrid.

Feature Description
Columns Defines the columns in the grid.
Layouts Defines the layouts in the grid.

Defining Columns

When defining columns, you can configure some individual column settings, like the data binding. the header text, and the column width . For more information about the available options, see the columns property. The code below demonstrates setting of some basic options at defining columns.

In Javascript:

$("#hgrid1").igHierarchicalGrid({
       autogenerateColumns: false,
       columns: [
           { key: "OrderID", headerText: "OrderID", dataType: "number"},
           { key: "Name", headerText: "MovieName", type: "string"},
           { key: "Date", headerText: "Date"", type: "date"}
       ]
});

In ASPX:

<%= Html.Infragistics().Grid(Model)
        .ID("grid1")
        .AutoGenerateColumns(false)
        .Columns(column =>
        {
                column.For(x => x.OrderID).HeaderText("OrderID").DataType("number");
                column.For(x => x.Name).HeaderText("Name"). DataType("string");
                column.For(x => x.Date).HeaderText("Date").HeaderText("date");
        })
        .DataBind()
        .Render()%>


Note:

In order to display dates properly in the grid, the following requirements must be met:

For example, if the above requirements are met, the following incoming data string

\/Date(1097655307263)\/

will be interpreted by the igHierarchicalGrid as

Defining Layouts

Introduction

Layouts are the definitions of the column structure and features of the child grids at a particular level. In a layout you can define the same options as in the igGrid definition plus sume properties describing the relationships with the parent igGrid. Child layouts can be defined inside a layout which allows for creating multi-level layout hierarchies.

Property settings

Child layouts are defined through a property of the igHierarchicalGrid, called “columnLayouts”. (See the Multiple Levels and Layouts sample.)

Code example

The code below demonstrates how to define a child layout.

In Javascript:

$("#grid1").igHierarchicalGrid({
    autoGenerateColumns: true,
    childrenDataProperty: "Orders",
    autoGenerateLayouts: false,
    columnLayouts: [
        {
            key: "Orders",
            responseDataKey: 'd.results',
            autoGenerateColumns: true
        }
    ]
});

In ASPX:

<%= Html.Infragistics()
        .Grid(Model)
        .ID("grid1")
        .AutoGenerateLayouts(false)
        .ColumnLayouts(layouts => {
             layouts.For(x => x.ProductInventories)
                .PrimaryKey("LocationID")
                .ForeignKey("ProductID")
                .AutoGenerateColumns(true)
             });
        })
        .DataBind()
        .Render()%>

Load on demand considerations

To load the data for the igHierarchicalGrid on demand, you must explicitly define the primary and foreign keys of every layout. This is the only way through which the igHierarchicalGrid can form correct requests when using the Load On Demand feature.

Auto-generate Columns and Layouts

Introduction

If you you don’t need to define neither the columns nor layouts, you can let the igHierarchicalGrid to configure columns and layoutst automatically. When the grid auto-generates the layouts automatically, it takes the structure of attached data source. This can be done either on the client or on the server .

Property settings

Auto-generating layouts works by recursively analyzing the data source structure. If the objects' types contain public properties that are of IEnumerable/IQueryable type, they are assumed that they define a parent-child relationships and thus a layout is generated for these relationships. For example, you can bind to a list of Customers, and that list can have a property called "Orders" which is of type IQueryable.

Code example

The code below demonstrates how to auto-generate columns in jQuery and MVC. To see this example code in action, refer to the Auto-generate sample.

In Javascript:

$("#grid1").igHierarchicalGrid({
    autoGenerateColumns: true,
    autoGenerateLayouts: true,
});

In ASPX:

<%= Html.Infragistics()
        .Grid(Model)
        .ID("grid1")
        .AutoGenerateColumns(true)
        .AutoGenerateLayouts(true)
        .DataBind()
        .Render()%>


Additional considerations

It's important to know that using autogenerate columns and autogenerate layouts saves implementation time and can be used when the site is in development. But it is always preferable to define columns and layouts manually, when the application is running in a production environment. This is because the performance is better and you have control on the data is rendered to the client.

Rendering Checkboxes on a Column

By default for a column which contains Boolean data types, the igHierarchicalGrid shows a string saying true or false. You have, however, the option to make igHierarchicalGrid columns display Boolean data as checked or unchecked checkboxes to indicate, respectively, the true and false states of the data items. You render checkboxes on a column by setting the renderCheckboxes property to true. Rendering checkboxes requires setting the dataType property of the column to bool.

The example code that follows renders a checkbox on the Current Flag column as shown in the illustration on the right.

Figure 1: A column displaying Boolean values without (left) and with (right) rendered checkboxes

In Javascript:

$("#hierarchicalGrid1").igHierarchicalGrid({
            // enabling render checkboxes on a column
            renderCheckboxes: true,
            columns: [ { 
                    key: "ProductID", 
                    headerText: "ProductID", 
                    dataType: "number" 
                }, { 
                    key: "Code", 
                    headerText: "Code", 
                    dataType: "string" 
                }, { 
                    key: "InStock", 
                    headerText: "In Stock", 
                    dataType: "bool"
                }, {
                    headerText: "Order Date", 
                    key: "OrderDate", 
                    dataType: "date"
                }, {
                    headerText: "List Price", 
                    key: "ListPrice", 
                    dataType: "number", 
                    format: "currency"
                }
            ],
            columnLayouts: [ {
                    // enabling render checkboxes on a column
                    renderCheckboxes: true,
                    columns: [ { 
                            key: "ProductID", 
                            headerText: "ProductID", 
                            dataType: "number" 
                        }, { 
                            key: "StoreCode", 
                            headerText: "Store Code", 
                            dataType: "string" 
                        }, { 
                            key: "Quantity", 
                            headerText: "Quantity",
                            dataType: "number"
                        }, { 
                            key: "Ship", 
                            headerText: "Quantity", 
                            // note: rendering checkboxes on a column required to set dataType to "bool"
                            dataType: "bool"
                        }
                    ]
                }
            ]
        });

In ASPX:

<%= Html.Infragistics().Grid(Model).ID("hierarchicalGrid1").LoadOnDemand(false).AutoGenerateColumns(false).AutoGenerateLayouts(false).PrimaryKey("EmployeeID").RenderCheckboxes(true).Columns(column => 
            {
                column.For(x => x.EmployeeID).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "EmployeeID").ToString()).DataType("number");
                column.For(x => x.ManagerID).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "ManagerID").ToString()).DataType("number");
                column.For(x => x.Title).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "Title").ToString()).DataType("string");
                column.For(x => x.CurrentFlag).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "CurrentFlag").ToString()).DataType("bool");
                column.For(x => x.SalariedFlag).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "SalariedFlag").ToString()).DataType("bool");
            })
            .ColumnLayouts(layouts => {
                layouts.For(x => x.Employees).ForeignKey("EmployeeID").AutoGenerateColumns(false).AutoGenerateLayouts(false).RenderCheckboxes(true).Columns(childcolumn =>
                    {
                        childcolumn.For(x => x.EmployeeID).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "EmployeeID").ToString()).DataType("number");
                        childcolumn.For(x => x.ManagerID).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "ManagerID").ToString()).DataType("number");
                        childcolumn.For(x => x.Title).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "Title").ToString()).DataType("string");
                        childcolumn.For(x => x.CurrentFlag).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "CurrentFlag").ToString()).DataType("bool");
                        childcolumn.For(x => x.SalariedFlag).HeaderText(this.GetGlobalResourceObject("HierarchicalGrid", "SalariedFlag").ToString()).DataType("bool");
                    })
                    .Features(features => {
                        features.Selection().Mode(SelectionMode.Row);
                        features.Updating().EnableAddRow(false).EditMode(GridEditMode.Row).EnableDeleteRow(false).ColumnSettings(columnSettings =>
                        {
                            columnSettings.ColumnSetting().ColumnKey("EmployeeID").ReadOnly(true);
                            columnSettings.ColumnSetting().ColumnKey("ManagerID").ReadOnly(true);
                        });
                        features.Paging().Type(OpType.Local);
                        features.Sorting();
                    });
            })
            .Features(features => {
                    features.Selection().Mode(SelectionMode.Row);
                    features.Updating().EnableAddRow(false).EditMode(GridEditMode.Row).EnableDeleteRow(false).ColumnSettings(columnSettings =>
                    {
                        columnSettings.ColumnSetting().ColumnKey("EmployeeID").ReadOnly(true);
                        columnSettings.ColumnSetting().ColumnKey("ManagerID").ReadOnly(true);
                    });
                    features.Paging().Type(OpType.Local);
                    features.Sorting();
            }).DataBind().Height("500px").Render()
            %>

Related Topics

Following are some other topics you may find useful.

Initializing the igHierarchicalGrid

igHierarchicalGrid Properties Reference

Related Samples

Following are some samples you may find useful.

Auto-Generate Columns and Layouts

Checkbox Column