Available in the Full Version

Hierarchical Grid - Edit Dialog

This sample demonstrates the row edit dialog functionality of the Updating feature in the igHierarchicalGrid.
First NameLast NameTitleAddressCity
Add new row
 

This sample is designed for a larger screen size.

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

To edit a row, click or tap on the row to pop up a separate dialog window.

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">

    <table id="grid2">
    </table>

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

    <script type="text/javascript">

        $(function () {
            /*----------------- Instantiation -------------------------*/
            $("#grid2").igHierarchicalGrid({
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "Title",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "Address",
                                classes: "ui-hidden-phone"
                            }
                        ]
                    },
                    {
                        name: "Updating",
                        editMode: "dialog",
                        rowEditDialogOptions: {
                            height: "350px",
                            width: "390px",
                            containment: "window",
                            showDoneCancelButtons: true
                        },
                        columnSettings:
                            [{
                                columnKey: "LastName",
                                required: true
                            }]
                    }
                ],
                width: "100%",
                autoCommit:true,
                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: "FirstName", headerText: "First Name", dataType: "string", width: "15%" },
                    { key: "LastName", headerText: "Last Name", dataType: "string", width: "15%" },
                    { key: "Title", headerText: "Title", dataType: "string", width: "25%" },
                    { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
                    { key: "City", headerText: "City", dataType: "string", width: "20%" }
                ],
                childrenDataProperty: "Orders",
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        width: "100%",
                        autoGenerateColumns: false,
                        autofitLastColumn: false,
                        primaryKey: "OrderID",
                        autoCommit: true,
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
                            { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
                            { key: "Freight", headerText: "Freight", dataType: "string", width: "15%" },
                            { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
                            { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "25%" },
                            { 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: "Paging",
                                pageSize: 10
                            },
                            {
                                name: "Updating",
                                enableAddRow: false,
                                editMode: "dialog",
                                rowEditDialogOptions: {
                                	height: "350px",
                                	width: "390px",
                                	containment: "window",
                                	showDoneCancelButtons: true
                                },
                                columnSettings:
                                [
                                    {
                                        columnKey: "ShipName",
                                        required: true
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
        });
    </script>
</body>
</html>