igGrid Editing API and Events Original Sample

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<table id="grid">
    </table>
    <div>
        <fieldset id="editOptions" class="explorer">
            <legend>Edit settings</legend>
            <input type="checkbox" id="showButtons" checked="checked"></input><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>

  ...

CSS

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

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