I've got this working except for a few Items. 1) I'd still like to update the grid once the dialog closes instead of having to have a Save button. 2) is there a way to add a new row on the 3rd tier from a newly added row on the 2nd tier? For example. If I start with no rows in the 2nd tier, I add a new row. Then I would like to add a new row in the 3rd tier without having to save the grid first. It seems that there is no way to add a new row on the 3rd tier to a newly added 2nd tier row. 

Below is the current code that I have...

Controller:

        [HttpGet]
        public ActionResult Index()
        {
            var model = _modelBuilder.BuildExportFileModel(this.CurrentUser.CompanyID, this.CurrentUser.UserID);

            model.ExportFiles = GetGridModel();

            return View("ExportFiles", model);
        }

        #region igGrid

        private GridModel GetGridModel()
        {
            //define ExportFile layout
            GridModel exportFileLayout = new GridModel();
            exportFileLayout.ID = "ExportFiles";
            exportFileLayout.PrimaryKey = "ExportFileID";
            exportFileLayout.Width = "100%";
            exportFileLayout.AutoGenerateLayouts = false;
            exportFileLayout.AutoGenerateColumns = false;
            exportFileLayout.AnimationDuration = 100;
            exportFileLayout.Columns.Add(new GridColumn() { Key = "Description", HeaderText = "Description", DataType = "string", Width = "100%" });
            exportFileLayout.Columns.Add(new GridColumn() { Key = "FileTypeDescription", HeaderText = "File Type", DataType = "string", Width = "100%" });
            exportFileLayout.Columns.Add(new GridColumn() { Key = "CompanyID", HeaderText = "CompanyID", DataType = "string", Width = "100%", Hidden = true });
            exportFileLayout.Columns.Add(new GridColumn() { Key = "ExportFileID", HeaderText = "ExportFileID", DataType = "number", Width = "100%", Hidden = true });
            exportFileLayout.Columns.Add(new GridColumn() { Key = "ExportFileTypeID", HeaderText = "ExportFileTypeID", DataType = "number", Width = "100%", Hidden = true });
            exportFileLayout.Columns.Add(new GridColumn() { Key = "ReportExportTypeID", HeaderText = "ReportExportTypeID", DataType = "number", Width = "100%", Hidden = true });
            exportFileLayout.UpdateUrl = Url.Action("UpdateExportFile", "ExportFile");

            //define RecordType layout
            GridColumnLayoutModel recordTypeLayout = new GridColumnLayoutModel();
            recordTypeLayout.Key = "RecordTypes";
            recordTypeLayout.ForeignKey = "ExportFileID";
            recordTypeLayout.PrimaryKey = "ExportFileRecordTypeID";
            recordTypeLayout.Width = "100%";
            recordTypeLayout.AutoGenerateLayouts = false;
            recordTypeLayout.AutoGenerateColumns = false;
            recordTypeLayout.AnimationDuration = 100;
            recordTypeLayout.Columns = new List<GridColumn>();
            recordTypeLayout.Columns.Add(new GridColumn() { HeaderText = "Record Type", Key = "Description", DataType = "string", Width = "100%" });
            recordTypeLayout.Columns.Add(new GridColumn() { HeaderText = "ExportFileRecordTypeID", Key = "ExportFileRecordTypeID", DataType = "number", Width = "100%", Hidden = true });
            recordTypeLayout.Columns.Add(new GridColumn() { HeaderText = "ExportFileID", Key = "ExportFileID", DataType = "number", Width = "100%", Hidden = true });
            recordTypeLayout.Columns.Add(new GridColumn() { HeaderText = "Sequence", Key = "Sequence", DataType = "number", Width = "100%" });
            exportFileLayout.ColumnLayouts.Add(recordTypeLayout);

            //define Definition layout
            GridColumnLayoutModel definitionLayout = new GridColumnLayoutModel();
            definitionLayout.Key = "Definitions";
            definitionLayout.ForeignKey = "ExportFileRecordTypeID";
            definitionLayout.PrimaryKey = "ExportFileDefinitionID";
            definitionLayout.Width = "100%";
            definitionLayout.AutoGenerateLayouts = false;
            definitionLayout.AutoGenerateColumns = false;
            definitionLayout.AnimationDuration = 100;
            definitionLayout.Columns = new List<GridColumn>();
            definitionLayout.Columns.Add(new GridColumn() { HeaderText = "Data Field", Key = "Description", DataType = "string", Width = "100%" });
            definitionLayout.Columns.Add(new GridColumn() { HeaderText = "Definition ID", Key = "ExportFileDefinitionID", DataType = "number", Width = "100%", Hidden = true });
            definitionLayout.Columns.Add(new GridColumn() { HeaderText = "Data Field ID", Key = "ExportFileDataFieldID", DataType = "number", Width = "100%", Hidden = true });
            definitionLayout.Columns.Add(new GridColumn() { HeaderText = "Sequence", Key = "Sequence", DataType = "number", Width = "100%" });
            recordTypeLayout.ColumnLayouts.Add(definitionLayout);

            //data source
            exportFileLayout.DataSource = GetExportFiles().AsQueryable();
            
            //features
            GridSorting sorting = new GridSorting();
            sorting.Type = OpType.Local;
            exportFileLayout.Features.Add(sorting);

            GridUpdating updatingExportFile = new GridUpdating();
            updatingExportFile.EditMode = GridEditMode.Dialog;
            updatingExportFile.RowEditDialogOptions.Containment = "window";
            exportFileLayout.Features.Add(updatingExportFile);

            GridUpdating updatingRecordType = new GridUpdating();
            updatingRecordType.EditMode = GridEditMode.Dialog;
            updatingRecordType.RowEditDialogOptions.Containment = "window";
            recordTypeLayout.Features.Add(updatingRecordType);

            GridUpdating updatingDefinition = new GridUpdating();
            updatingDefinition.EditMode = GridEditMode.Dialog;
            updatingDefinition.RowEditDialogOptions.Containment = "window";
            definitionLayout.Features.Add(updatingDefinition);

            return exportFileLayout;
        }

        private List<ExportFileItem> GetExportFiles()
        {
            var exportFileItems = new List<ExportFileItem>();
            var recordExportTypes = _systemRefService.GetExportFileTypes();
            foreach (var exportFile in _masterRefService.GetExportFiles(this.CurrentUser.CompanyID, this.CurrentUser.UserID))
            {
                var recordTypes = new List<ExportFileRecordTypeItem>();
                var dataFields = _systemRefService.GetExportFileDataFields(exportFile.ExportFileTypeID);
                foreach (var recordType in _masterRefService.GetExportFileRecordTypes(this.CurrentUser.CompanyID, this.CurrentUser.UserID, exportFile.ExportFileID))
                {
                    recordTypes.Add(new ExportFileRecordTypeItem()
                    {
                        Description = recordType.Description,
                        ExportFileRecordTypeID = recordType.ExportFileRecordTypeID,
                        ExportFileID = recordType.ExportFileID,
                        Sequence = recordType.Sequence,
                        Definitions = (from fd in _masterRefService.GetExportFileDefinitions(this.CurrentUser.CompanyID, this.CurrentUser.UserID, recordType.ExportFileRecordTypeID)
                                       join df in dataFields on fd.ExportFileDefinitionID equals df.ExportFileDataFieldID
                                       select new ExportFileDefinitionItem()
                                       {
                                           Description = df.Description,
                                           ExportFileDefinitionID = fd.ExportFileDefinitionID,
                                           ExportFileDataFieldID = fd.ExportFileDataFieldID,
                                           ExportFileRecordTypeID = fd.ExportFileRecordTypeID,
                                           Sequence = fd.Sequence
                                       }).OrderBy(x => x.Sequence)
                    });
                }

                var exportFileItem = new ExportFileItem()
                {
                    FileTypeDescription = recordExportTypes.Where(x => x.ExportFileTypeID == exportFile.ExportFileTypeID).Select(x => x.Description).FirstOrDefault(),
                    ExportFileID = exportFile.ExportFileID,
                    CompanyID = exportFile.CompanyID,
                    ExportFileTypeID = exportFile.ExportFileTypeID,
                    ReportExportTypeID = exportFile.ReportExportTypeID,
                    Description = exportFile.Description,
                    RecordTypes = recordTypes.OrderBy(x => x.Sequence)
                };
                
                exportFileItems.Add(exportFileItem);
            }

            return exportFileItems.OrderBy(x => x.Description).ToList();
        }

        private class ExportFileItem
        {
            public ExportFileItem()
            {
                RecordTypes = new List<ExportFileRecordTypeItem>();
            }

            public string FileTypeDescription { get; set; }
            public int? ExportFileID { get; set; }
            public string CompanyID { get; set; }
            public int? ExportFileTypeID { get; set; }
            public int? ReportExportTypeID { get; set; }
            public string Description { get; set; }

            public IEnumerable<ExportFileRecordTypeItem> RecordTypes { get; set; }
        }

        private class ExportFileRecordTypeItem
        {
            public string Description { get; set; }
            public int? ExportFileRecordTypeID { get; set; }
            public int? ExportFileID { get; set; }
            public int? Sequence { get; set; }

            public IEnumerable<ExportFileDefinitionItem> Definitions { get; set; }
        }

        private class ExportFileDefinitionItem
        {
            public string Description { get; set; }
            public int? ExportFileDefinitionID { get; set; }
            public int? ExportFileDataFieldID { get; set; }
            public int? ExportFileRecordTypeID { get; set; }
            public int? Sequence { get; set; }
        }
        
        public ActionResult UpdateExportFile()
        {
            GridModel gridModel = new GridModel();
            List<Transaction<ExportFileItem>> exportFileTransactions = gridModel.LoadTransactions<ExportFileItem>(HttpContext.Request.Form["ig_transactions"]);
            foreach (Transaction<ExportFileItem> t in exportFileTransactions)
            {
                if (t.type == "newrow")
                {
                    switch(t.layoutKey)
                    {
                        case "RecordTypes":
                            break;
                        case "Definitions":
                            break;
                        default:
                            break;
                    }
                    // do stuff
                }
                else if (t.type == "deleterow")
                {
                    switch (t.layoutKey)
                    {
                        case "RecordTypes":
                            break;
                        case "Definitions":
                            break;
                        default:
                            break;
                    }
                    // do stuff
                }
                else if (t.type == "row")
                {
                    switch (t.layoutKey)
                    {
                        case "RecordTypes":
                            break;
                        case "Definitions":
                            break;
                        default:
                            break;
                    }
                    // do stuff
                }
            }
            //TODO: Save to repository
            
            JsonResult result = new JsonResult();
            Dictionary<string, bool> response = new Dictionary<string, bool>();
            response.Add("Success", true);
            result.Data = response;
            return result;
        }
        
        #endregion

View:

@using Optimum.WebUI.Common
@using Infragistics.Web.Mvc
@model Optimum.WebUI.Areas.CodeTables.Models.ExportFile.ExportFileModel
@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><i class="fa fa-table fa-lg"></i>&nbsp;Export Files</h4>
    </div>

    @(Html.Infragistics().Grid(Model.ExportFiles))
</div>
<div class="row content-footer">
    <div class="col-xs-12">
        <ul class="pager pull-left">
            <li>
                <input id="saveChanges" type="button" name="saveButton" value="Save Changes" class="btn btn-primary" />
            </li>
        </ul>

    </div>
</div>

@section Scripts{
    <script type="text/javascript">
        (function ($) {
            $(function () {
                var grid = $("#ExportFiles");

                $("#saveChanges").on('click',
                    function (e) {
                        grid.igHierarchicalGrid("saveChanges");
                        return false;
                    }
                );
            });
        })(jQuery);
    </script>
}

Regarding your first question: there are 2 events, which are raised just before and right after the editing dialog has been closed: the rowEditDialogBeforeClose and rowEditDialogAfterClose. You may add an event handler in your Controller, by using the AddClientEvent method, which takes two arguments – the name of the event that should be handled, and the name of the handler function. In case you handle rowEditDialogBeforeClose, the code would look like this:

GridUpdating updating = new GridUpdating();

updating.AddClientEvent("rowEditDialogBeforeClose", "dialogClosingHandler");

Then add the handler function itself in the View:

<script>

    function dialogClosingHandler() {

        $("#ExportFiles").igHierarchicalGrid("saveChanges")

    }

</script>

Regarding your second question: As this is a very specific scenario, I am currently investigating if this is supported, or if it could be achieved. I will contact you shortly with more details regarding this matter.

If you need any additional assistance, feel free to contact me.

This behavior you describe, with regard to the “rowEditDialogBeforeClose”, might occur because the last editing transaction has not been committed to the dataSource yet - the event gets raised BEFORE the row exits edit mode and the grid does not know about it yet. I would suggest that you use the other event – “rowEditDialogAfterClose”, as it would be more suitable for your scenario. This also explains the italic font and when the dialog closes – the grid by design uses an italic font as a way to inform the user which rows have been modified, but the transactions have not been committed to the dataSource yet. You might want to change the autoCommit option to “true” – I have explained why at the very bottom of this response.

As the igHierarchicalGrid does not provide a UI for adding a new child grid out-of-the-box (this was your second question from the previous response), there is a workaround you might use – handle the “rowAdding” event, which gets raised when the editing dialog has been closed and the grid is about to add a new row). In the handler, an empty array could be added to the values of the new row corresponding to the columnLayout’s “key”– this way the parent grid think a whole new child grid has been added, and not just a new row – hence it would add the expand/collapse icon at the beginning of the row. The rowAdded event provides you a reference to the new values that are going to be added, via the “ui” parameter. For example, if the property that holds the array with the data for the child grid is called “Details”, the event handler for the parent grid would look like this:

features: [
    {
        name: "Updating",
        editMode: "dialog",
        rowAdding: function(evt, ui) {
            ui.values.Details = []
            
        }
    }
],

Please note that this approach would only work if your autoCommit option is set to “true”, so make sure you have updated this in the options for every hierarchy that uses the workaround described above. This means if the child grids are also using it, the “autoCommit” has to be set to “false” in their respective “columnLayout”s.

Here is an isolated sample that shows the aforementioned approach in code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="http://cdn-na.infragistics.com/igniteui/2018.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2018.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/infragistics.lob.js"></script>
    <script type="text/javascript">
        $(function () {
            var data = [
                {
                    Name: "Food",
                    Id: 1,
                    Products: [
                        { Name: "Pizza", Quantity: 4, Details: [
							{ProductNumber: "AK4763B", Origin: "Bulgaria"}
						] },
						{ Name: "Bread", Quantity: 3,  Details: [
							{ProductNumber: "AD6763B", Origin: "Greece"}
							]  
						}

                    ]
                },
                {
                    Name: "Beverages",
                    Id: 2,
                    Products: [
                        { 
							Name: "Milk", Quantity: 1, Details: [
								{ProductNumber: "PK2263J", Origin: "Germany"}
							]  
						},
                        { 
							Name: "Fruit_punch", Quantity: 4, Details: [
								{ProductNumber: "MN9263J", Origin: "Italy"}
							]  
						}
                    ]
                }
            ];

            $("#hierarchicalGrid").igHierarchicalGrid({
                width: "50%",
                dataSource: data, //Array of objects defined above
                fixedHeaders: true,
                primaryKey: "Id",
                autoGenerateColumns: false,
                autoCommit: true,
                columns: [
                     { headerText: "Name", key: "Name", dataType: "string", width: "75px" },
                     { key: "Id", dataType: "number", hidden: true}
                ],
                autoGenerateLayouts: false,
                defaultChildrenDataProperty: "Products",
                features: [
                    {
                        name: "Updating",
                        editMode: "dialog",
                    }
                ],
                columnLayouts: [{
                    autoCommit: true,
                    key: "Products",
                    autoGenerateColumns: false,
                    fixedHeaders: true,
                    primaryKey: "Name",
                    columns: [
                    { key: "Name", headerText: "Name" },
                    { key: "Quantity", headerText: "Quantity" }
                    ],
                    features: [
                        {
                            name: "Updating",
                            editMode: "dialog",
                            rowAdding: function(evt, ui) {
                                ui.values.Details = []
                                
                            }
                        }
                    ],
					columnLayouts:[
						{
							key: "Details",
                            autoGenerateColumns: false,
                            columns: [
                                { headerText: "Product Number", key: "ProductNumber", dataType: "string"},
                                { headerText: "Origin", key: "Origin", dataType: "string"}
                            ],
                            autoCommit: true,
							primaryKey: "ProductNumber",
                            features: [
                                {
                                    name: "Updating",
                                    editMode: "dialog"
                                }
                            ]
						}
					]
                }]
            });
        });
    </script>
</head>
<body>
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 50px auto">
        <table id="hierarchicalGrid"></table>
    </div>
</body>
</html>

Please let me know if I you have any further questions regarding this matter.