Available in the Full Version

Data Grid - Editing API and Events

Employee IDFirst NameLast NameTitleBirth DatePostal CodeCountry
Add new row
1NancyDavolioSales Representative12/8/194898122USA
2AndrewFullerVice President, Sales2/19/195298401USA
3JanetLeverlingSales Representative8/30/196398033USA
4MargaretPeacockSales Representative9/19/193798052USA
5StevenBuchananSales Manager3/4/1955SW1 8JRUK
6MichaelSuyamaSales Representative7/2/1963EC2 7JRUK
7RobertKingSales Representative5/29/1960RG1 9SPUK
8LauraCallahanInside Sales Coordinator1/9/195898105USA
9AnneDodsworthSales Representative1/27/1966WG2 7LTUK
 
Edit settings
Deleting settings

Adding settings
API Viewer

This sample is designed for a larger screen size.

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

The igGrid control provides different editor types, options, methods, and events for editing data. This sample demonstrates how many of the options interact together. If grid selection is enabled, the active row corresponds to the editing row. If the grid has focus, then editing of the active row can be started from the keyboard when the user begins typing. Keyboard triggers can be adjusted using the startEditTriggers option.

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

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />

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

    <!-- Used to add markup and provide logging 
        functionality for the API Explorer and API Viewer UI -->
    <script src="/js/apiviewer.js"></script>
    <style>
        fieldset.explorer
        {
            float: left;
            width: 45%;
        }
        #sampleContainer fieldset input[type="checkbox"] + label
        {
            display: inline;
        }
        .addNewRow
        {
            width: 100%;
            list-style-type: none;
        }
        .addNewRow li
        {
            display: inline-block;
            float: left;
            margin-right: 1em;
            height: 60px;
        }
        .ui-igedit
        {
            margin: 2px 0px 2px 0px;
        }
    </style>
</head>
<body>

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

    <!-- Target element for the igGrid -->
    <table id="grid">
    </table>
    <div>
        <fieldset id="editOptions" class="explorer">
            <legend>Edit settings</legend>
            <input type="checkbox" id="showButtons" checked="checked" /><label for="showButtons">Show Done/Cancel Buttons</label>
            <label for="editMode">Edit mode</label>
            <select id="editMode">
                <option selected="selected">row</option>
                <option>cell</option>
                <option>dialog</option>
                <option>none</option>
            </select>
            <label for="startEditTriggers">Start edit triggers</label>
            <select id="startEditTriggers" class="explorer">
                <option value="click,F2,enter" selected="selected">click,F2,enter</option>
                <option value="dblclick,F2,enter">dblclick,F2,enter</option>
                <option value="dblclick">dblclick</option>
                <option value="click">click</option>
                <option value="click,F2">click,F2</option>
                <option value="F2,enter">F2,enter</option>
            </select>
        </fieldset>

        <fieldset id="deletingOptions" class="explorer">
            <legend>Deleting settings</legend>
            <input type="checkbox" id="enableDelete" checked="checked" />
            <label for="enableDelete">Enable Delete Row</label>
            <br />
            <label for="rowSelect">Select Row Index</label>
            <span id="rowSelect"></span>
            <br />
            <input type="button" id="deleteRow" value="Delete row" />
        </fieldset>
        <div style="clear:both;"></div>
        <fieldset id="addingOptions">
            <legend>Adding settings</legend>

            <input type="checkbox" id="enableAddRow" checked="checked" /><label for="enableAddRow">Enable Add Row</label>
            
                <ul class="addNewRow">
                    <li><label for="firstName">First Name</label>
                        <input id="firstName" type="text" />
                    </li>
                    <li><label for="lastName">Last Name</label>
                        <input id="lastName" type="text" />
                    </li>
                    <li><label for="title">Title</label>
                        <input id="title" type="text" />
                    </li>
                    <li>
                        <label for="birthDate">Birth Date</label>
                        <input id="birthDate" type="text" />
                    </li>
                    <li><label for="postCode">Postal Code</label>
                        <input id="postCode" type="text" />
                    </li>
                    <li>
                        <label for="country">Country</label>
                        <input id="country" type="text" />
                    </li>
                    <li> <label>&nbsp;</label><input id="addRow" type="button" value="Add row" /></li>
                </ul>
        </fieldset>
        <div style="clear:both;"></div>
    </div>
    <div class="api-viewer"></div>

    <script type="text/javascript">
        $(function () {

            // Used to show output in the API Viewer at runtime,
            // defined in external script "apiviewer.js"
            var apiViewer = new $.ig.apiViewer();

            var titles = ["Sales Representative", "Sales Manager", "Inside Sales Coordinator", "Vice President, Sales"];
            var countries = ["UK", "USA"];

            /*----------------- Method & Option Examples -------------------------*/

            // process events of checkboxes
            $("#enableDelete").on({
                change: function (e) {
                    $("#grid").igGridUpdating("option", "enableDeleteRow", $(this).is(":checked"));
                }
            });

            $("#enableAddRow").on({
                change: function (e) {
                    $("#grid").igGridUpdating("option", "enableAddRow", $(this).is(":checked"));
                }
            });

            $("#showButtons").on({
                change: function (e) {
                    $("#grid").igGridUpdating("option", "showDoneCancelButtons", $(this).is(":checked"));
                }
            });

            // process events of select options
            $("#editMode").igCombo({
                mode: "dropdown",
                height: 23,
                enableClearButton: false,
                enableActiveItem: false,
                selectionChanged: function (evt, ui) {
                    if (ui.items.length == 1) {
                        var editMode = ui.items[0].data.value;
                        $("#grid").igGridUpdating("option", "editMode", editMode);
                    }
                }
            });

            $("#startEditTriggers").igCombo({
                mode: "dropdown",
                height: 23,
                enableClearButton: false,
                enableActiveItem: false,
                selectionChanged: function (evt, ui) {
                    if (ui.items.length == 1) {
                        var startEditTriggers = ui.items[0].data.value;
                        $("#grid").igGridUpdating("option", "startEditTriggers", startEditTriggers);
                    }
                }
            });

            // process events of buttons

            $("#deleteRow").igButton({
                labelText: $("#deleteRow").val(),
                click: function (e) {
                    var rowIndex = $("#rowSelect").igNumericEditor("option", "value"),
                        tr = $("#grid").igGrid("rowAt", parseInt(rowIndex-1)), pkValue;
                    if (!tr) return;
                    pkValue = parseInt($(tr).attr("data-id"));
                    $("#grid").igGridUpdating("deleteRow", pkValue);
                }
            });

            $("#addRow").igButton({
                labelText: $("#addRow").val(),
                click: function (e) {
                    var rowObj = {
                        "EmployeeID": $("#grid").igGrid("rows").length + 1,
                        "FirstName": $("#firstName").val(),
                        "LastName": $("#lastName").val(),
                        "Title": $("#title").val(),
                        "BirthDate": $("#birthDate").val(),
                        "PostalCode": $("#postCode").val(),
                        "Country": $("#country").val()
                    };

                    $("#grid").igGridUpdating("addRow", rowObj);
                }
            });

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

            $("#grid").on("iggridupdatingrowdeleting", function (evt, ui) {
                var message = "iggridupdatingrowdeleting";
                apiViewer.log(message);
            });

            $("#grid").on("iggridupdatingrowadding", function (evt, ui) {
                var message = "iggridupdatingrowadding";
                apiViewer.log(message);
            });

            $("#grid").on("iggridupdatingeditcellending", function (evt, ui) {
                var message = "iggridupdatingeditcellending";
                apiViewer.log(message);
            });

            $("#grid").on("iggridupdatingeditrowstarting", function (evt, ui) {
                var message = "iggridupdatingeditrowstarting";
                apiViewer.log(message);
            });

            $("#grid").on("iggridupdatingeditrowending", function (evt, ui) {
                var message = "iggridupdatingeditrowending";
                apiViewer.log(message);
            });

            /*----------------- Instantiation -------------------------*/
            $("#grid").igGrid({
                virtualization: false,
                autoGenerateColumns: false,
                renderCheckboxes: true,
                primaryKey: "EmployeeID",
                columns: [{
                    // note: if primaryKey is set and data in primary column contains numbers,
                    // then the dataType: "number" is required, otherwise, dataSource may misbehave
                    headerText: "Employee ID", key: "EmployeeID", dataType: "number"
                },
                {
                    headerText: "First Name", key: "FirstName", dataType: "string"
                },
                {
                    headerText: "Last Name", key: "LastName", dataType: "string"
                },
                {
                    headerText: "Title", key: "Title", dataType: "string"
                },
                {
                    headerText: "Birth Date", key: "BirthDate", dataType: "date"
                },
                {
                    headerText: "Postal Code", key: "PostalCode", dataType: "string"
                },
                {
                    headerText: "Country", key: "Country", dataType: "string"
                }
                ],
                dataSource: northwind,
                dataSourceType: "json",
                responseDataKey: "results",
                height: "350px",
                width:"100%",
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        columnSettings: [
                            {
                                columnKey: "EmployeeID",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "PostalCode",
                                classes: "ui-hidden-phone"
                            },
                            {
                                columnKey: "BirthDate",
                                classes: "ui-hidden-phone"
                            }
                        ]
                    },
                    {
                        name: "Selection",
                        mode: "row"
                    },
                    {
                        name: "Updating",
                        enableAddRow: true,
                        editMode: "row",
                        enableDeleteRow: true,
                        rowEditDialogContainment: "owner",
                        showReadonlyEditors: false,
                        enableDataDirtyException: false,
                        columnSettings: [
                        {
                            columnKey: "EmployeeID",
                            readOnly: true
                        },
                        {
                            columnKey: "Title",
                            editorType: "text"
                        },
                        {
                            columnKey: "Country",
                            editorType: "combo",
                            editorOptions: {
                                dataSource: countries
                            }
                        },
                        {
                            columnKey: "BirthDate",
                            editorType: "datepicker",
                            validation: true,
                            required: true,
                            editorOptions: {
                                maxValue: new Date()
                            }
                        }]
                    }]
            });

            // editors initialization

            $("#rowSelect").igNumericEditor({
                dataMode: "sbyte",
                buttonType: "spin",
                value: 1,
                minValue: 1,
                maxValue: 9,
                width: 150,
                height: 23
            });

            $("#firstName").igTextEditor({
                width: 100,
                height: 23
            });

            $("#lastName").igTextEditor({
                width: 100,
                height: 23
            });

            $("#birthDate").igDatePicker({
                width: 120,
                height: 23,
                maxValue: new Date(),
                required: true
            });

            $("#country").igTextEditor({
                width: 80,
                height: 23,
                buttonType: "dropdown",
                listItems: countries,
                value: countries[1]
            });

            $("#title").igTextEditor({
                width: 150,
                height: 23,
                buttonType: "dropdown",
                listItems: titles,
                value: titles[1]
            });

            $("#postCode").igMaskEditor({
                width: 100,
                height: 23,
                inputMask: ">00000",
                dataMode: "rawText"
            });
        });
    </script>
</body>
</html>