Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
150
Updating Hierarchical Grid
posted

Could you please provide an example of the edit/add/delete rows in the Hierarchical Grid. In my example I have a Save button that calls the "saveChanges" event. This fires the UpdateExportFile method of the controller. However, this does not seem to be working for the child column layouts and their respective UpdateURLs. Ideally I would like this to auto save when the user clicks "Done" on the edit/add dialog (without having to click a Save button). Below is my current Code. Thank you for your help. 

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%" });
            recordTypeLayout.UpdateUrl = Url.Action("UpdateRecordType", "ExportFile");
            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%" });
            definitionLayout.UpdateUrl = Url.Action("UpdateDefinition", "ExportFile");
            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>> transactions = gridModel.LoadTransactions<ExportFileItem>(HttpContext.Request.Form["ig_transactions"]);
            var exportFiles = GetExportFiles();
            foreach (Transaction<ExportFileItem> t in transactions)
            {
                if (t.type == "newrow")
                {
                    // do stuff
                }
                else if (t.type == "deleterow")
                {
                    // do stuff
                }
                else if (t.type == "row")
                {
                    // 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;
        }
        
        public ActionResult UpdateRecordType()
        {
            GridModel gridModel = new GridModel();
            List<Transaction<ExportFileItem>> transactions = gridModel.LoadTransactions<ExportFileItem>(HttpContext.Request.Form["ig_transactions"]);
            var exportFiles = GetExportFiles();
            foreach (Transaction<ExportFileItem> t in transactions)
            {
                if (t.type == "newrow")
                {
                    // do stuff
                }
                else if (t.type == "deleterow")
                {
                    // do stuff
                }
                else if (t.type == "row")
                {
                    // 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;
        }
        
        public ActionResult UpdateDefinition()
        {
            GridModel gridModel = new GridModel();
            List<Transaction<ExportFileItem>> transactions = gridModel.LoadTransactions<ExportFileItem>(HttpContext.Request.Form["ig_transactions"]);
            var exportFiles = GetExportFiles();
            foreach (Transaction<ExportFileItem> t in transactions)
            {
                if (t.type == "newrow")
                {
                    // do stuff
                }
                else if (t.type == "deleterow")
                {
                    // do stuff
                }
                else if (t.type == "row")
                {
                    // 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) {
                        e.preventDefault();
                        grid.igGrid("saveChanges");
                    }
                );
            });
        })(jQuery);
    </script>
}

Parents
  • 150
    Offline posted

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

  • 445
    Offline posted in reply to Eric

    Hello Eric,

     

    Thank you for posting in our forum.

     

    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.

  • 150
    Offline posted in reply to Vasil Pavlov

    Thanks Vasil,

    This worked. However, the grid itself still displays the edited cell/row (grayed an italic) after the dialog closes (saves the data) as if the cell/row was still edited. I assume the grid still needs to be redrawn on the UI? I'm wondering if doing this would also solve question 2...

    Thanks for your help with this. 

    Edit: 

    Just another note/correction on this. The "rowEditDialogBeforeClose" handler will not work. The transaction does not pull in until the grid makes a second change/save. For example: I make an edit and close the dialog. The change does not load the transaction. I make another change. The edit from the first transaction now loads and the second (current) transaction isn't yet recognized. I'm not sure if this is a bug or not, however... using the "rowEditDialogAfterClose" works correctly.

Reply
  • 445
    Offline posted in reply to Eric

    Hello Eric,

     

    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. 

Children
No Data