Hi,
I am trying to use a hierarchical grid using MVC 5. I am suppose to have three levels of data in the grid - parent , child and grand child.
I am able to bind the parent but not the child using Load on demand from the controller.
--Modelpublic class ParentViewModel{ public int PId {get; set;} public string Name {get; set;} public ICollection ChildDetails}
Public class ChildViewModel{ public int CId {get; set;} public int PId {get; set;} public int CData {get; set;}}
--View@model Infragistics.Web.Mvc.GridModel
(Html.Infragistics().Grid(Model))
--Controller
private GridModel GetGridModel(){
GridModel model = new GridModel(); model.AutoGenerateColumns = false; model.AutoCommit = true; model.PrimaryKey = "PId"; model.AutoGenerateLayouts = false; model.ID = "igGrid";
model.LoadOnDemand = true;
model.Columns.Add(new GridColumn { Key = "PId", Hidden = true, DataType = "number" }); model.Columns.Add(new GridColumn { Key = "Name", HeaderText = "Parent Name ", DataType = "string" }); model.DataSourceUrl = (Url.Action("BindParentDetails"));
GridColumnLayoutModel childModel = new GridColumnLayoutModel(); childModel.Key = "ChildDetails"; childModel.PrimaryKey = "PID"; childModel.ForeignKey = "CId"; childModel.AutoGenerateColumns = false; childModel.Columns.Add(new GridColumn { Key = "CId", HeaderText = "Child ID", DataType = "number" }); childModel.Columns.Add(new GridColumn { Key = "CData", HeaderText = "Child Data", DataType = "number" }); childModel.DataSourceUrl = Url.Action("BindChildDetails");
model.ColumnLayouts.Add(childModel); return model;}
public JsonResult BindParentDetails() { GridModel rModel = GetGridModel();
var p = _service.GetPDetails();
rModel.DataSource = p.AsQueryable(); var res = rModel.GetData(); return res; }
public JsonResult BindChildDetails(string path, string layout) { var pid = path.Substring(path.LastIndexOf(':') + 1);
GridModel grd = GetGridModel();
var p = _service.GetChildDetails(pId); grd.DataSource = p.AsQueryable(); var res = grd.GetData(path, layout); return res; }
When I run the solution it binds the parent grid correctly. On clicking the + icon it goes into BindChildDetails function and breaks on:
var res = grd.GetData(path, layout);
An exception of type 'System.NullReferenceException' occurred in Infragistics.Web.Mvc.dll but was not handled in user code
Additional information: Object reference not set to an instance of an object.
It has correct values in path and layout
grd.DataSource is set correctly with the data from the DB.
The version of Infragistics.Web.Mvc we are using is 5.16.2.2040
Can anyone please help me with this?
Hi Mike,
Thanks for your reply. I will give this a try.
What do I need to do for sorting?
Regards
S
Hello Singh,
For paging, this depends upon if you want local or remote paging. If you want local you just have to set the type to local. If you want remote paging for child levels, you will have to handle this yourself. The reason the parent level works is you are passing the model down so the grid can then do what it needs with that. For the child levels you are just passing the data so you need to return the correct data based on the params of the request. You can access like the following:
this.Request.Paramsthis.Request.Params["page"]this.Request.Params["pageSize"]
The “page” and “pageSize” are keys you can see what keys are in a request through the following:
this.Request.Params.AllKeysorthis.Request.Params.Keys
What would be the reason you would be unable to save rows? You mean like they fail validation?
For persisting the page/state of the grid that will be up to you to save the state of the grid and set/reload it how you want after f]refresh or re-launch of the page after closing.
I am able to save the changes now using the above links.
Thanks for that.
However I am having some issues -
1) As you know I have 3 levels of band to be shown on the grid using load on demand. Sorting and paging seems to be working on parent and child grid but not on the grand child level (3rd band). Can you please suggest something?
2) On save if I am unable to save some of the rows in the grid (as per my business logic) I want to show those rows as highlighted and refresh the rest of the grid with new and saved data from the DB. Is this highlighting possible? Also when I refresh the grid I would want to maintain the state of the grid as it was open when the user saved it. For e.g if the grid was expanded by opening the parent , child and grand child level and the user clicked save so I want to refresh the grid but leave the grid as it was expanded earlier.
Thank you for the update. SaveChanges should be called on the main grid. And you will only have one update url that is setup on the parent band and it will have the transactions for both the parent grid and child grids. Please see the following sample that demonstrates editing in MVC:
https://www.igniteui.com/hierarchical-grid/editing-dataset
https://www.igniteui.com/help/api/2016.2/ui.ighierarchicalgrid#methods:saveChanges
Thanks Mike
Yes I am calling it in the javascript but still it doesn't get triggered.
Please note I am trying to call saveChanges in the child grid and not the parent grid.
I am using it like this:
$(document).ready(function () {
var grid = $("#igGrid")
grid.igGrid("saveChanges", function (data2) {
if (data2.Success === true) {
vex.dialog.alert({
className: 'vex-theme-os',
unsafeMessage: "Success"
});
}
}, function () {
unsafeMessage: "Failure "
UpdateChildren Action method is not getting called.
Can you please help me with this?