Share via

How to: Create a Hierarchical JS Grid Control

  • Article

Applies to: SharePoint Foundation 2010

This how-to demonstrates how to create a hierarchical JS Grid control. It builds on the project completed in How to: Create a Basic JS Grid Control.

Note

Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements.

Prerequisites

Note

Although this how-to can be done without using Visual Studio 2010, it is easier to use Visual Studio 2010 and the SharePoint development tools in Microsoft Visual Studio 2010.

Creating a Hierarchical Grid

Create a hierarchical grid by calling EnableHierarchy(DataTable, String, String, Boolean). The method requires a parent key column and an outline text column. The parent key column and the outline text column have already been included in the GridData.cs and GridUtilities.cs files created in How to: Create a Basic JS Grid Control; all that remains is to enable the hierarchy.

To create a hierarchical grid

  1. In Visual Studio, open the JSGrid project created by following the steps in How to: Create a Basic JS Grid Control.

  2. Open JsGridWebPartUserControl.ascx.cs.

  3. Inside the Page_Load method, immediately after defining the grid controller, enable the hierarchy by using EnableHierarchy(DataTable, String, String, Boolean).

    _grid.JSControllerClassName = "GridManager";
gds.EnableHierarchy(null, "HierarchyParentKey", "Title", false);

    The first argument, if not null, defines an unfiltered data table. The second argument is the hierarchy parent key column, HierarchyParentKey, defined in GridData.cs. The third parameter indicates which column displays the hierarchy indicator. (In our case, it is the Title column, which is also defined in GridData.cs.) The last parameter, if true, indicates that the unfiltered data table should be passed down to the client. For simplicity, this example does not use an unfiltered data table.

  4. Review the definitions of HierarchyParentKey and Title in GridUtilities.cs.

    Open GridUtilities.cs.

    In GridUtilities.cs, the HierarchyParentKey should not be visible. Remember that columns are visible while fields are not, which is why in GridUtilities.cs we ensure that the HierarchyParentKey is not visible.

    if (iterator.ColumnName != "Key"
                    && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
                    && iterator.ColumnName != "HierarchyParentKey"
                    && iterator.ColumnName.Substring(0, 5) != "costq"
                    && iterator.ColumnName.Substring(0, 5) != "Quart")

  5. Open GridData.cs to review the definitions of HierarchyParentKey and Title in GridData.cs.

    The Title and HierarchyParentKey columns are added in the Data method.

    data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid))); // Hierarchial Grid
data.Columns.Add(new DataColumn("Title", typeof(string)));

    In the Data method, notice the code that populates the HierarchyParentKey column and the Title column with data.

    // Used for the hierarchy grid how-to.


if (i % 10 == 0)
{
    parent = curKey;
    j++;
}
if (parent.HasValue)
{
    dr["HierarchyParentKey"] = parent.Value;
}
if (parent == null)
{
    parent = curKey;
}
dr["Title"] = "Task " + j + "." + i % 10;

    In this example, the modulus operator is used to create 10 minor tasks for each major task. The task numbers, such as 1.1, 1.2, and 1.3 are stored in the Title column.

The complete listings of GridData.cs and GridUtilities.cs can be found in How to: Create a Basic JS Grid Control.

To test the Web Part

  1. In Visual Studio, press F5 to run the project.

    When you run the project, deployment occurs and the SharePoint 2010 site opens. The Web Part is automatically added to the SharePoint 2010 Web Part gallery.

  2. Open and edit any Web Parts page. You can add the Web Part to any Web Parts page.

  3. Click Insert, click Web Part, and then select the JSGridWebPart from the custom category. The Web Part is displayed on the page.

See Also

Reference

EnableHierarchy(DataTable, String, String, Boolean)