Available in the Full Version

Hierarchical Grid - KnockoutJS Configuration

Parent first row
Employee ID:
First Name:
Last Name:
City:
Country:
First child's first row
Order ID:
Ship Name:
Freight:
Postal Code:
Order Date:

This sample is designed for a larger screen size.

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

Note: The Knockout extensions do not work with the ASP.NET MVC Helpers.
This sample demonstrates support of KnockoutJS bindings with the igHierarchicalGrid widget. In this implementation, the first row of the hierarchical grid parent/child layout is bound using a standard two-way binding.

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>

    <script src="/js/external/knockout-latest.js" type="text/javascript"></script>
    <script src="/js/external/knockout.mapping-latest.js" type="text/javascript"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/infragistics.datasource.knockoutjs.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/infragistics.ui.grid.knockout-extensions.js"></script>

</head>
<body>
    <style>
        .config-tbl tr td:first-child {
            text-align: right;
            margin-right: 2px;
            color: #444;
            font-family: "Segoe UI",Arial,sans-serif;
            font-size: 1em;
        }
        .config-tbl input {
            border: solid 1px #ccc;
            color: #444;
            font-family: "Segoe UI",Arial,sans-serif;
            font-size: 1.1em;
        }
    </style>
    <table style="width: 100%">
        <tr>
            <td style="width:50%"> 
                <fieldset>
                    <legend>Parent first row</legend>
                    
                    <table class="config-tbl">
                        <tr>
                            <td>
                                <b>Employee ID:</b>
                            </td>
                            <td>
                                <span id="idEditor" data-bind="text: Records()[0].EmployeeID, valueUpdate: 'input'"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>First Name:</b>
                            </td>
                            <td>
                                <input id="fnameEditor" type="text" data-bind="value: Records()[0].FirstName, valueUpdate: 'input'" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Last Name:</b>
                            </td>
                            <td>
                                <input id="lnameEditor" type="text" data-bind="value: Records()[0].LastName, valueUpdate: 'input'" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>City:</b>
                            </td>
                            <td>
                                <input id="cityEditor" type="text" data-bind="value: Records()[0].City, valueUpdate: 'input'" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Country:</b>
                            </td>
                            <td>
                                <input id="countryEditor" type="text" data-bind="value: Records()[0].Country, valueUpdate: 'input'" />
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </td>
            <td style="width:50%">
                <fieldset>
                    <legend>First child's first row</legend>
                    <table class="config-tbl">
                        <tr>
                            <td>
                                <b>Order ID:</b>
                            </td>
                            <td>
                                <span id="Span1" data-bind="text: Records()[0].Orders()[0].OrderID, valueUpdate: 'input'"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Ship Name:</b>
                            </td>
                            <td>
                                <input id="Text1" type="text" data-bind="value: Records()[0].Orders()[0].ShipName, valueUpdate: 'input'" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Freight:</b>
                            </td>
                            <td>
                                <input id="Text2" type="text" data-bind="value: Records()[0].Orders()[0].Freight, valueUpdate: 'input'" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Postal Code:</b>
                            </td>
                            <td>
                                <input id="Text3" type="text" data-bind="value: Records()[0].Orders()[0].ShipPostalCode, valueUpdate: 'input'" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Order Date:</b>
                            </td>
                            <td>
                                <input id="Date1" type="date" data-bind="igDatePicker: { value: Records()[0].Orders()[0].OrderDate, valueUpdate: 'input'}" />
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </td>
        </tr>
    </table>  

    <script src="/data-files/northwind.js"></script>

    <script>
        var customerOrdersModel, modifiedDataSource = {}, Records = [], db = northwind.results;

        $(function () {

            for (var i = 0; i < db.length; i++) {
                var currentItem = {};
                currentItem["EmployeeID"] = db[i].EmployeeID;
                currentItem["FirstName"] = db[i].FirstName;
                currentItem["LastName"] = db[i].LastName;
                currentItem["City"] = db[i].City;
                currentItem["Country"] = db[i].Country;
                var orders = db[i].Orders.results.splice(0,10);
                for (var j = 0; j < 10; j++) {
                    orders[j].RecordsOrderDate = normalizeDate( orders[j].OrderDate );
                }
                currentItem["Orders"] = orders;
                Records.push(currentItem);
            }

            modifiedDataSource["Records"] = Records;
            customerOrdersModel = ko.mapping.fromJS( modifiedDataSource );
            ko.applyBindings(customerOrdersModel);
        });

        function normalizeDate(date) {
            // Note: dataSource in grid requires Date object for a column with dataType:"date".
            if (!date)
                return null;
            if (date.getTime)
                return date;
            if (!date.substring)
                return null;
            if (date.indexOf("(") > 0)
                return new Date(parseInt(date.substring(date.indexOf("(") + 1, date.lastIndexOf(")"))));
            return Date.parse(date);
        }
    </script>

    <table id="grid" data-bind="igHierarchicalGrid:
               {
                   dataSource: Records,
                   autoCommit: true,
                   width: '100%',
                   initialDataBindDepth: -1,
                   primaryKey: 'EmployeeID',
                   dataSourceType: 'json',
                   autoGenerateColumns: false,
                   autoGenerateLayots: false,
                   childrenDataProperty: 'Orders',
                   columns: [
                       { key: 'EmployeeID', headerText: 'Employee ID', width: '5%', dataType: 'number' },
                       { key: 'FirstName', headerText: 'First Name', width: '25%', dataType: 'string' },
                       { key: 'LastName', headerText: 'Last Name', width: '25%', dataType: 'string' },
                       { key: 'City', headerText: 'City', width: '20%', dataType: 'string' },
                       { key: 'Country', headerText: 'Country', width: '20%', dataType: 'string' }
                   ],
                   columnLayouts: [
                       {
                           key: 'Orders',
                           primaryKey: 'OrderID',
                           foreignKey: 'EmployeeID',
                           autoGenerateColumns: false,
                           autoCommit: true,
                           width: '100%',
                           dataSourceType: 'json',
                           features: [
                               {
                                   name: 'Updating',
                                   editMode: 'cell',
                                   enableDataDirtyException: false,
                                   enableDeleteRow: false,
                                   enableAddRow: false,
                                   columnSettings: [
                                       {
                                           columnKey: 'OrderID',
                                           readOnly: true
                                       }
                                   ]
                               },
                               {
                                    name: 'Paging',
                                    type: 'local',
                                    pageSize: 5
                               }
                           ],
                           columns: [
                               { key: 'OrderID', headerText: 'Order ID', width: '5%', dataType: 'number' },
                               { key: 'ShipName', headerText: 'Ship Name', width: '20%', dataType: 'string' },
                               { key: 'Freight', headerText: 'Freight', width: '20%', dataType: 'string' },
                               { key: 'ShipPostalCode', headerText: 'Postal Code', width: '20%', dataType: 'string' },
                               { key: 'OrderDate', headerText: 'Order Date', width: '30%', dataType: 'date' }
                           ]
                       }
                   ],
                   features: [
                       {
                           name: 'Updating',
                           editMode: 'cell',
                           enableDataDirtyException: false,
                           inherit: true,
                           columnSettings: [
                               {
                                   columnKey: 'EmployeeID',
                                   readOnly: true
                               }
                           ]
                       },
                       {
                           name: 'Selection',
                           mode: 'row',
                           multipleSelection: false,
                           activation: true
                       }
                   ]
               }">
    </table>
</body>
</html>