Available in the Full Version

Data Grid - REST Editing

Order IDShip 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.

This sample demonstrates how to bind igGrid to REST service (WebAPI). This is done by configuring the grid REST settings. When in REST mode igGrid will create a POST request for the newly created rows, a PUT request for the updated rows and a DELETE request for the deleted rows. Create, update or delete rows from the grid and use the "Save Changes" button to propagate them to the server. "Undo" button will delete any locally pending changes made to the grid.

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>

    @(Html.Infragistics()
        .Grid(Model)
        .ID("Grid")
        .Height("500px")
        .Width("100%")
        .AutoGenerateColumns(false)
        .AutoGenerateLayouts(false)
        .PrimaryKey("OrderID")
        .LocalSchemaTransform(true)
        .Columns(column =>
        {
            column.For(x => x.OrderID).HeaderText("Order ID").Width("10%");
            column.For(x => x.ShipName).HeaderText("Ship Name").Width("30%");
            column.For(x => x.ShipAddress).HeaderText("Ship Address").Width("30%");
            column.For(x => x.TotalItems).HeaderText("Total Items").Width("15%");
            column.For(x => x.TotalPrice).HeaderText("Total Price").Width("15%");
        })
        .Features(feature =>
        {
            feature.Updating().ColumnSettings(cs =>
            {
                cs.ColumnSetting().ColumnKey("OrderID").ReadOnly(true);
            });
        })
        .DataSourceUrl(Url.Content("~/api/orders?$top=20"))
        .Rest(true)
        .RestSettings(rs =>
        {
            rs.RestSetting()
                .Create(c => c.RestVerbSetting().Url(Url.Content("~/api/orders")))
                .Update(u => u.RestVerbSetting().Url(Url.Content("~/api/orders")))
                .Remove(r => r.RestVerbSetting().Url(Url.Content("~/api/orders")));
        })
        .DataBind()
        .Render()
    )
    <input type="button" id="saveChanges" class="button-style" value="Save Changes" />
    <input type="button" id="undo" class="button-style" value="Undo" />
    <script>
        var updates;
        $(function () {
            var grid = $("#Grid"), loadingIndicator;
            $("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true });
            $("#undo").igButton({ labelText: $("#undo").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);
                    });

                    $("#undo").igButton("disable");
                    $("#saveChanges").igButton("disable");

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