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> 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> }
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...
[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
@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> 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> }
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.