Available in the Full Version

Hierarchical Grid - JSON Binding

Orders By Employee
Show
records
First NameLast NameTitleAddressCity
NancyDavolioSales Representative507 - 20th Ave. E. Apt. 2ASeattle
Show
records
Order ID
Ship NameShip AddressShip City
Ship Country
10258Ernst HandelKirchgasse 6GrazAustria
10270Wartian HerkkuTorikatu 38OuluFinland
10275Magazzini Alimentari RiunitiVia Ludovico il Moro 22BergamoItaly
10285QUICK-StopTaucherstraße 10CunewaldeGermany
10292Tradiçao HipermercadosAv. Inês de Castro, 414Sao PauloBrazil
 
 

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

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

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

     <!--Sample JSON Data-->
    <script src="/data-files/northwind.js"></script>
</head>
<body>

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

    <script>

        $(function () {
            $("#hierarchicalGrid").igHierarchicalGrid({
                width: "100%",
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                dataSourceType: "json",
                caption: "Orders By Employee",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "Title",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Address",
                                classes: "ui-hidden-phone"
                            }
                        ]
                    },
                    {
                        name: "Sorting",
                        inherit: true
                    },
                    {
                        name: "Paging",
                        pageSize: 5,
                        type: "local",
                        inherit: true
                    }
                ],
                columns: [
                   { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
                    { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
                   { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
                   { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                   { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
                   { key: "City", headerText: "City", dataType: "string", width: "15%" }
                ],
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        width: "100%",
                        autoGenerateColumns: false,
                        primaryKey: "OrderID",
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "20%" },
                            { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
                            { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
                            { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
                            { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" },
                            { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
                        ],
                        features: [
                             {
                                 name: "Responsive",
                                 enableVerticalRendering: false,
                                 columnSettings: [
                                     {
                                         columnKey: "ShipAddress",
                                         classes: "ui-hidden-phone"
                                     },
                                     {
                                         columnKey: "ShipCity",
                                         classes: "ui-hidden-phone"
                                     }
                                 ]
                             },
                             {
                                 name: "Summaries",
                                 columnSettings: [
                                      {
                                          columnKey: "OrderID",
                                          summaryOperands: [
                                              {
                                                  rowDisplayLabel: "Orders Count",
                                                  type: "count",
                                                  decimalDisplay: 3
                                              }
                                          ]

                                      },
                                     {
                                         columnKey: "ShipName",
                                         allowSummaries: false
                                     },
                                     {
                                          columnKey: "ShipAddress",
                                          allowSummaries: false
                                     },
                                     {
                                         columnKey: "ShipCity",
                                         summaryOperands: [
                                             {
                                                 rowDisplayLabel: "Sao Paulo Orders",
                                                 type: "custom1",
                                                 summaryCalculator: $.proxy(countSaoPauloValues, this),
                                                 order: 5,
                                                 decimalDisplay: 1
                                             },
                                              {
                                                  rowDisplayLabel: "Bergamo Orders",
                                                  type: "custom2",
                                                  summaryCalculator: $.proxy(countBergamoValues, this),
                                                  order: 6,
                                                  decimalDisplay: 1
                                              }
                                         ]
                                     },
                                      {
                                          columnKey: "ShipCountry",
                                          allowSummaries: false
                                      },

                                     
                                 ]

                             }
                        ]
                    }
                ]
            });
          //expanding first parent row in the grid
            var parentGrid = $("#hierarchicalGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0);
            $("#hierarchicalGrid").igHierarchicalGrid("expand", rowDomElement);

            function countSaoPauloValues(data) {
                var i, l = data.length, count = 0, elem;
                for (i = 0; i < l; i++) {
                    elem = data[i];
                    if (elem === "Sao Paulo") {
                        count++;
                    }
                }
                return count;
            }
            function countBergamoValues(data) {
                var i, l = data.length, count = 0, elem;
                for (i = 0; i < l; i++) {
                    elem = data[i];
                    if (elem === "Bergamo") {
                        count++;
                    }
                }
                return count;
            }

        });
    </script>

</body>
</html>