Available in the Full Version

Data Grid - Editing

This sample demonstrates how the igGrid Updating feature can communicate with the Grid MVC Helper wrapper to persist the changes on the server.
Order IDOrder DateShip NameShip AddressTotal ItemsTotal Price
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.

Transactions used to log any changes made to the grid are kept locally in the browser until the igGrid.saveChanges API method is called to send a POST request to the Url indicated by the igGrid.updateUrl option. The Grid MVC Helper wrapper greatly simplifies the task of parsing and processing these changes on the server. The OrdersSaveData controller method uses a GridModel.LoadTransactions(string postdata) to deserialize the changes from the grid and processes them. Use the grid to add, edit, or delete single or multiple records. Press the "Save Changes" to send the changes to the server with an Ajax call.

Code View

Copy to Clipboard 
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
@model IQueryable<IgniteUI.SamplesBrowser.Models.Northwind.Order>
<!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>

    <!-- Used to add modal loading indicator for igGrid -->
    <script src="http://igniteui.com/js/grid-modal-loading-inicator.js"></script>

    <style type="text/css">
        input.button-style
        {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <script>
        function lookupCustomer(id) {
            return customersLookup[id].CompanyName;
        }
    </script>

    @(Html.Infragistics()
        .Grid(Model)
        .ID("Grid")
        .Height("500px")
        .Width("100%")
        .AutoGenerateColumns(false)
        .AutoGenerateLayouts(false)
        .RenderCheckboxes(true)
        .PrimaryKey("OrderID")
        .Columns(column =>
        {
            column.For(x => x.OrderID).HeaderText("Order ID").Width("10%");
            column.For(x => x.OrderDate).HeaderText("Order Date").Width("15%");
            column.For(x => x.CustomerID).HeaderText("Ship Name").Width("20%").FormatterFunction("lookupCustomer");
            column.For(x => x.ShipAddress).HeaderText("Ship Address").Width("25%");
            column.For(x => x.TotalItems).HeaderText("Total Items").Width("10%");
            column.For(x => x.TotalPrice).HeaderText("Total Price").Width("15%");
        })
        .Features(feature =>
        {
            feature.Updating().ColumnSettings(cs => {
                cs.ColumnSetting().ColumnKey("OrderID").ReadOnly(true);
                cs.ColumnSetting().ColumnKey("OrderDate").EditorType(ColumnEditorType.DatePicker).Required(true);
                cs.ColumnSetting().ColumnKey("CustomerID").EditorType(ColumnEditorType.Combo).Required(true).ComboEditorOptions(co => co.DataSource(ViewBag.Customers).ValueKey("ID").TextKey("CompanyName").Mode(ComboMode.DropDown).EnableClearButton(false));
                cs.ColumnSetting().ColumnKey("ShipAddress").Required(true).TextEditorOptions(o => o.ValidatorOptions(vo => vo.LengthRange(4)));
                cs.ColumnSetting().ColumnKey("TotalItems").Required(true);
                cs.ColumnSetting().ColumnKey("TotalPrice").Required(true).EditorType(ColumnEditorType.Currency);
            });
            feature.Sorting();
        })
        .DataSourceUrl(Url.Action("GetOrders"))
        .UpdateUrl(Url.Action("OrdersSaveData"))
        .DataBind()
        .Render()
    )
    <input type="button" id="saveChanges" class="button-style" value="Save Changes" />
    <input type="button" id="undo" class="button-style" value="Undo" />
    <input type="button" id="redo" class="button-style" value="Redo" />
    <script>
        var updates, customersLookup = [], loadingIndicator;
        $(function () {
            var grid = $("#Grid"), comboDataSource = {};
            comboDataSource = grid.data("igGridUpdating").options.columnSettings[2].editorOptions.dataSource;
            for (var i = 0; i < comboDataSource.length; i++) {
                customersLookup[comboDataSource[i].ID] = comboDataSource[i];
            }
            $("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true });
            $("#undo").igButton({ labelText: $("#undo").val(), disabled: true });
            $("#redo").igButton({ labelText: $("#redo").val(), disabled: true });

            loadingIndicator = new GridModalLoadingIndicator(grid);

            grid.on("iggriddatabinding", function (e, args) {
                loadingIndicator.show();
            });

            grid.on("iggriddatabound", function (e, args) {
                loadingIndicator.hide();
            });

            grid.on("iggridupdatingrowdeleted", function (e, args) {
                $("#undo").igButton("option", "disabled", false);
                $("#saveChanges").igButton("option", "disabled", false);
            });

            grid.on("iggridupdatingrowadded", function (e, args) {
                $("#undo").igButton("option", "disabled", false);
                $("#saveChanges").igButton("option", "disabled", false);
            });
            grid.on("iggridupdatingeditrowended", function (e, args) {
                if (args.update) {
                    $("#undo").igButton("option", "disabled", false);
                    $("#saveChanges").igButton("option", "disabled", false);
                }
            });
            $("#undo").on('igbuttonclick',
                function (e, args) {
                    updates = $.extend({}, grid.data('igGrid').pendingTransactions());
                    $.each(updates, function (index, transaction) {
                        grid.igGrid("rollback", transaction.rowId, true);
                    });

                    $("#redo").igButton("option", "disabled", false);
                    $("#undo").igButton("disable");
                    $("#saveChanges").igButton("disable");

                    return false;
                }
            );

            $("#redo").on('igbuttonclick',
                function (e) {
                    $.each(updates, function (index, transaction) {
                        switch (transaction.type) {
                            case "row":
                                grid.igGridUpdating('updateRow', transaction.rowId, transaction.row, null, false);
                                break;
                            case "newrow":
                                grid.igGridUpdating('addRow', transaction.row, false);
                                break;
                            case "deleterow":
                                grid.igGridUpdating('deleteRow', transaction.rowId, false);
                                break;
                        }

                    });
                    $(this).igButton("disable");
                    $("#undo").igButton("option", "disabled", false);
                    $("#saveChanges").igButton("option", "disabled", false);
                }
            );

            $("#saveChanges").on('igbuttonclick',
                function (e) {
                    grid.igGrid("saveChanges", function saveSuccess() {
                        loadingIndicator.hide();
                    });
                    loadingIndicator.show();
                    $("#undo").igButton("disable");
                    $(this).igButton("disable");
                    return false;
                }
            );
            grid.on("iggridupdatingdatadirty", function (event, ui) {
                grid.igGrid("commit");
                //saving local changes to the datasource when sorting
                return false;
            });
        });
    </script>
</body>
</html>