Available in the Full Version

Hierarchical Grid - Editing

In this sample the igHierarchicalGrid Updating feature communicates with the Grid MVC Helper wrapper to persist the changes on the server in a DataSet object.
Category NameDescription

This sample is designed for a larger screen size.

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

The igHierarchicalGrid Updating feature uses transactions to log any changes made to the grid. These transactions are kept locally in the browser until the igHierarchicalGrid.saveChanges API method is called to send a POST request to the URL indicated by the igHierarchicalGrid.updateUrl option. On the server, these transaction should be parsed and processed, and the Grid MVC Helper wrapper greatly simplifies this task. The EditingSaveChanges 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 in either the root or child layout. Press "Save Changes" to send the changes on the server with an Ajax call.

Code View

Copy to Clipboard 
@using Infragistics.Web.Mvc
@using System.Data
@using IgniteUI.SamplesBrowser.Models.Northwind
@model System.Data.DataSet

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

</head>
<body>
@(Html.Infragistics().Grid<Category>()
    .ID("grid1")
    .Width("100%")
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .Columns(column =>
    {
        column.For(x => x.ID).Hidden(true);
        column.For(x => x.CategoryName).HeaderText("Category Name").Width("30%");
        column.For(x => x.Description).HeaderText("Description").Width("70%");
    })
    .PrimaryKey("ID")
    .Features(features =>
    {
        features.Updating().EnableAddRow(false).Inherit(true);
        features.Selection().Mode(SelectionMode.Row);
    })
    .ColumnLayouts(layouts =>
    { 
        layouts.For(x => x.Products)
        .Width("100%")
        .ForeignKey("CategoryID")
        .AutoGenerateColumns(false)
        .RenderCheckboxes(true)
        .Columns(column =>
        {
            column.For(x => x.ID).Hidden(true);
            column.For(x => x.ProductName).HeaderText("Product Name").Width("40%");
            column.For(x => x.UnitPrice).HeaderText("Unit Price").Width("20%");        
            column.For(x => x.UnitsInStock).HeaderText("Units In Stock").Width("20%");
            column.For(x => x.Discontinued).HeaderText("Discontinued").Width("20%");
        })
        .PrimaryKey("ID")
        .DataMember("Products");
    })
    .DataMember("Categories")
    .UpdateUrl(Url.Action("EditingSaveChanges"))
    .DataSourceUrl(Url.Action("editing-dataset"))
    .Render()
)
    <br />
    <input type="button" id="saveChanges" value="Save Changes"/>

    <script type="text/javascript">
        $( "#saveChanges" ).igButton( { labelText: $( "#saveChanges" ).val(), disabled: false } );
        $( "#saveChanges" ).on( 'igbuttonclick',
                function ( e )
                {
                    $( "#grid1" ).igHierarchicalGrid( "saveChanges" );
                    return false;
                }
            );
    </script>
</body>
</html>