Available in the Full Version

Hierarchical Grid - Unbound Columns

The sample demonstrates how to configure unbound columns in igHierarchicalGrid.
Last NameFirst NameTitleCityIn USARegion
 

This sample is designed for a larger screen size.

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

The column "In USA" in the root layout is using dataBound client event to set unbound values. The column "Freight Expense" in the child layout is using formula to calculate its values.

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>

</head>
<body class="samplePage">
    <!-- Target element for the igGrid -->
    <table id="grid3">
    </table>

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

    <script type="text/javascript">

        // the JavaScript function used for the formula property
        function CalculateFreightExpence(data, grid) {
            return 2.95 * data["Freight"];
        }

        $(function () {

            /*----------------- Event Examples -------------------------*/

            $("#grid3").on("iggriddatabound", function (event, ui) {
                var i, grid = ui.owner,
                     ds = grid.dataSource,
                     data = ds.data(),
                     dataLength = data.length;

                for (i = 0; i < dataLength; i++) {
                    if (data[i]["Country"] === "USA") {
                        data[i]["IsUSA"] = true;
                    }
                    else {
                        data[i]["IsUSA"] = false;
                    }
                }
            });

            /*----------------- Instantiation -------------------------*/

            $("#grid3").igHierarchicalGrid({
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "Title",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Region",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "City",
                                classes: "ui-hidden-phone"
                            }
                        ]
                    }
                ],
                width: "100%",
                dataSource: northwind,
                dataSourceType: "json",
                responseDataKey: "results",
                autoGenerateColumns: false,
                autofitLastColumn: false,
                primaryKey: "EmployeeID",
                columns: [
                    { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
                    { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
                    { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
                    { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                    { key: "City", headerText: "City", dataType: "string", width: "15%" },
                    { key: "IsUSA", headerText: "In USA", unbound: true, dataType: "bool", width: "15%", format: "checkbox" },
                    { key: "Region", headerText: "Region", dataType: "string", width: "10%" },
                    { key: "Country", headerText: "Country", dataType: "string", width: "0%", hidden: true }
                ],
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        autoGenerateColumns: false,
                        autofitLastColumn: false,
                        primaryKey: "OrderID",
                        width: "100%",
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
                            { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "15%" },
                            { key: "Freight", headerText: "Freight", dataType: "number", format:"0.00", width: "15%" },
                            { key: "FreightExpence", headerText: "Freight Expense", unbound: true, dataType: "number", format: "0.00", width: "20%", formula: "CalculateFreightExpence" },
                            { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "25%" },
                            { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "15%" },
                        ],
                        features: [
                            {
                                name: "Responsive",
                                enableVerticalRendering: false,
                                columnSettings: [
                                    {
                                        columnKey: "Freight",
                                        classes: "ui-hidden-phone"
                                    },
                                    {
                                        columnKey: "CustomerID",
                                        classes: "ui-hidden-phone"
                                    },
                                    {
                                        columnKey: "ShipName",
                                        classes: "ui-hidden-phone"
                                    }
                                ]
                            },
                            {
                                name: "Paging",
                                type: "local",
                                pageSize: 5
                            }
                        ]
                    }
                ]
            });
        });
    </script>
</body>
</html>