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?
Hello Singh,
Thank you for contacting Infragistics!
Looking at your code it appears you return the child and parent model/layout in GetGridModel, when you should have different methods for each level. Here is documentation and a sample on setting up Load on Demand in the igHierarchicalGrid:
https://www.igniteui.com/help/ighierarchicalgrid-load-on-demand
https://www.igniteui.com/hierarchical-grid/load-on-demand
Thanks Mike
I have tried as you suggested but still getting the same error
--Modelpublic class ParentViewModel{ public int PId {get; set;} public string Name {get; set;} public ICollection<ChildViewModel> ChildDetails}
-- View@model Infragistics.Web.Mvc.GridModel
GridColumnLayoutModel childModel = GetChildGridModel();
private GridModel GetChildGridModel(){ GridColumnLayoutModel childModel = new GridColumnLayoutModel(); childModel.Key = "ChildDetails"; childModel.PrimaryKey = "CID"; childModel.ForeignKey = "PId"; 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"); return childModel ;
} public JsonResult BindParentDetails() { GridModel rModel = GetGridModel();
Hi Mike,
The above links were very helpful.
I am able to show the drop downs and textboxes in the child grid but I am now stuck on Saving the data.
I have set the child grid's update URL but still it is not getting called:
Save button on the view :
<input type="submit" id="saveChanges" class="btn btn-block btn-grey" value="Save" />
(Tried with type="button" as well)
In controller
updating.ColumnSettings.Add(new ColumnUpdatingSetting
{
ColumnKey = "StatusValue",
EditorType = ColumnEditorType.Combo,
ComboEditorOptions = new ComboModel { TextKey = "Text", ValueKey = "Value", DataSource = ViewData["Status"], AutoComplete = true }
});
childModel.Features.Add((updating));
childModel.UpdateUrl = (Url.Action("UpdateChildren"));
public ActionResult UpdateChildren()
return View();
}
If I click on the save button it doesn't go into the UpdateChildren
Can you please help me with this?
Regards
S
Thank you for the update. Are you calling the saveChanges method in the saveChanges button’s click event?
Otherwise to save the changes in the grid you should call saveChanges:
https://www.igniteui.com/help/api/2016.2/ui.iggrid#methods:saveChanges
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.
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
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.
What are you looking for when you search the params? As I mentioned sorting is unique for each column say for example you have a column called “QuatityPerUnit” the param key would look like the following: "sort(QuantityPerUnit)"
Concerning the behavior you are seeing with the igDatePicker I am unable to reproduce this behavior. Do you have a sample that demonstrates the behavior?
Thanks for your reply above. I am still trying to do sorting in the grand child level but it doesn't seem to be working.
In Request.Params do not have any property related to sorting. I am trying to access Request.Params in my BindGrandChildDetails(string path, string layout) method.
Can you send me any working example for this please?
Also I am trying to use Infragistics Datepicker in one of my pages like below:
@(Html.Infragistics().DatePicker()
.ID("Date")
.ButtonType(TextEditorButtonType.DropDown)
.AddClientEvent("valueChanged", "onChangeDate")
.Value(@ViewBag.Date)
.Render())
$("#Date").igDatePicker({
value: new Date(y, m, d),
dateDisplayFormat: "dd/MM/yyyy",
minValue : new Date(y -1 , m, d)
I am able to select date but when I hover over the dropdown of the datepicker it clears the textbox which had date in it but when I hover out it shows the date.
Can I remove this property to hide the date on hovering over the dropdown arrow?
Concerning paging and sorting, here is the documentation we have:
Paging:https://www.igniteui.com/help/iggrid-paging
http://www.igniteui.com/help/api/2016.2/ui.iggridpaging
Sorting:https://www.igniteui.com/help/iggrid-sorting-overview
http://www.igniteui.com/help/api/2016.2/ui.iggridsorting
There isn’t specific documentation on how this behaviors interact with load on demand and as I said if you want them to be done remotely you will have to go through the request find the key you need and check if that key exists and then what the request param is for that key.
For adding styles to rows you would use jQuery’s addClass:https://api.jquery.com/addclass/
https://www.igniteui.com/help/ighierarchicalgrid-styling-and-theming
For saving the state of the grid you would have to use the API methods to get the state of the grid to save it:http://www.igniteui.com/help/api/2016.2/ui.ighierarchicalgrid
http://www.igniteui.com/help/api/2016.2/ui.iggrid_hg
Thanks Mike.
Can you please send me some links regarding sorting, paging and coloring the grid or a working example so it will be helpful.
Regarding your question:
What would be the reason you would be unable to save rows? You mean like they fail validation?
It is the requirement that if I there is a newer version of the data exists in the DB then I will not save the data therefore I would want to refresh the grid with the new data and color the row which wasn't saved.
What are the functions or property exposed by the grid to maintain the state?
Again if there are any links it will be really helpful
For sorting you would have to handle it in the same way of getting the info out of the request and using that to return the data you want in the order you want. Same for filtering. When you use load on demand in MVC you are responsible for returning the data. Note with sorting and filtering the key will be unique for each column.