ui.igGridUpdating

ui.igGridUpdating_image

Both the igGrid and igHierarchicalGrid controls feature data updating in the grid. The updating features of the grid provide a wide array of adding and editing values of the underling set of data bound to the grid. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igGrid control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
      <script src="js/infragistics.core.js" type="text/javascript"></script>
      <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var ds = [
            { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
            { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
            { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
            { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
            { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
            { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
            { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
            { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
            { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
        ];
 
        $("#gridUpdating").igGrid({
            primaryKey: "ProductID",
            columns: [
                { headerText: "Product ID", key: "ProductID", dataType: "number" },
                { headerText: "Product Name", key: "Name", dataType: "string" },
                { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
            ],
            dataSource: ds,
            features: [
            {
                name: "Updating",
                enableAddRow: true,
                editMode: "row",
                enableDeleteRow: true,
                columnSettings: [
                    { columnKey: "ProductID", editorOptions: { type: "numeric", disabled: true} },
                ]
            }]
        });
    });
    </script>
</head>
<body>
    <table id="gridUpdating"></table>
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui-1.9.0.js
jquery.ui.widget.js
infragistics.ui.grid.framework.js
infragistics.ui.grid.shared.js
infragistics.ui.editors.js
infragistics.ui.validator.js
infragistics.ui.combo.js
infragistics.ui.rating.js
infragistics.ui.shared.js
infragistics.datasource.js
infragistics.util.js

Inherits

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.