Hi,
This is the firs time, I would work on Infragistics grid. I am aware that my question is very basic ad I am sorry for that. Based upon the answers I will get on to my actual questions.
I am trying to create a hierarchical grid, using MVC helpers and following this example (http://www.igniteui.com/hierarchical-grid/aspnet-mvc-helper).
In this example I noticed that data is kept in DataSet and DataTables, thus my first question is: Is it really necessary to work off of a data set to setup a hierarchical grid? In my application I will get an object graph lets say a list of customers with multiple orders. I want to bind this object graph to a Grid to show data is some sort of hierarchy. And I will get data for a page in one shot let's 10 record from the list of many records.
Then could someone please explain, how the children data is binded on the grid? Will the Infragistics grid automatically get the Children's data based on its parent, or do I need to configure that by some kind of method which takes an ID of the customer and return its order?
Any thoughts around it would be helpful or if you could refer me to an more real-life example on grid binding. Thanks in advance.
-KP
Hello KP,
You can definitely bind to a collection of data and not use a DataSet or DataTable. For example, you could use a WebAPI service and pass over IQueryable collections of your data objects:
http://www.igniteui.com/help/ighierarchicalgrid-binding-to-webapi
If you wanted you could instead pass your model through you controller to the view as your page's model. As long as there is a collection of type IQueryable that is passed over your application will serialize the data to a JSON array which the igHierarchicalGrid will be able to work with. Then, as long as your ColumnLayouts are specificied correctly, or if you set AutoGenerateLayouts to true, then the grid will be able to properly understand and work with your hierarchical data.
For more information about the binding requirements, please see the following section of the igHierarchicalGrid Overview:
Thanks Jason for the reply.
In the meantime I managed to bind my data on the HierarchicalGrid. I do it using GridModel from a controller. I have a simple scenario where Customer Info is to be shown on top and then on Demand, a customer's orders should be shown in the child grid (i.e. as a 1 to N layout).
I have configured the GridModel, ColumnLayout, and Setup my model classes. However on the UI, I could only see the customer's data and when I try to drill down on a customer info to see its orders, it throws an error:
A first chance exception of type 'System.NullReferenceException' occurred in Infragistics.Web.Mvc.dll
Additional information: Object reference not set to an instance of an object.
I understand that I might be trying to use an un-initialized object, but I could not figure out which one.
Here are the highlights of the GridModel initialization:
var gridModel= new GridModel { AutoGenerateColumns = false, Width = "100%" };
gridModel.Columns =
new List<GridColumn> { new GridColumn { Key = "CustomerId ", HeaderText = "CustomerId", DataType = "number", Width = "50%" }, new GridColumn { Key = "CustomerType", HeaderText = "CustomerType", DataType = "string", Width = "30%" } };
//gridModel.InitialExpandDepth = 1; gridModel.ResponseDataKey = "Records"; gridModel.PrimaryKey = "CustomerId"; gridModel.AutoGenerateLayouts = false; gridModel.DataSourceType = "json"; gridModel.DataSourceUrl = parentDataSourceUrl; GridColumnLayoutModel decModel = GetChildLayout(); gridModel.ColumnLayouts.Add(decModel); gridModel.ColumnLayouts[0].DataSourceUrl = childDataSourceUrl;
gridModel.LoadOnDemand = true;
public static GridColumnLayoutModel GetChildLayout() { var layout = new GridColumnLayoutModel { ResponseDataKey = "Records", Key = "Orders ", PrimaryKey = "OrderId", ForeignKey = "CustomerId", Width = "100%", AutoGenerateColumns = false, AutofitLastColumn = true, Columns = new List<GridColumn> { new GridColumn { Key = "col1", HeaderText ="col1", DataType = "number", Width = "50%" }, new GridColumn { Key = "col2", HeaderText ="col2", DataType = "number", Width = "30%" },} };
return layout; }
Here is my model classes:
public class Customer { public Customer() { Orders = new List<Order>(); }
public int CustomerId { get; set; } public string CustomerType { get; set; } public List<Order> Orders }
public class Order { public int OrderId{ get; set; } public string Col1{ get; set; } public string Col2{ get; set; } public string Col3{ get; set; }
//FK public int CustomerId { get; set; } }
Here is how I bind data to child layout
[DataGridSourceActionFilter] public JsonResult GetOrdersRecords(string path, string layout) {
var data = GetDataForOrders(); var gridModel = DataGridModelHelper.GetChildLayout(); gridModel.DataSource = data.Data.AsQueryable(); JsonResult jsonData = gridModel.GetData(path, layout); //I get "Orders" in the layout path return jsonData; }
Can you pin point any obvious mistake? Could you please explain the importance of layout parameter? I feel I have done something wrong around layout configuration...
Thanks for your help.
KP
Would you be able to provide me with a runnable sample of your code? Some of the logic in your GetOrdersRecords call looks a little odd but I'd like to have a full sample that I can debug.
You may want to consider not using the GridModel as it can complicate some of the logic when attempting to implement the igGrid. For an example of implementing the igHierarchicalGrid using object collections please see the following documentation:
http://www.igniteui.com/help/ighierarchicalgrid-initializing?v=14.1#initializing-mvc
I will try to shell out my code in a run able stand alone app. The reason for going for GridModel is that we want to go for server side sorting, paging and filtering. And we though it will be easier to maintain at GridModel style, since it can be configured from a controller and we don't have an expert on JQuery.
I could configure the grid on the JQuery now, but I want to make the children load on Demand. Any pointers on how to make it on Demand? I tried setting loadOnDemand to true, but that does not do anything...
Thanks
One more thing Jason. Does igGrid supports sorting on multiple columns? Or can just one column be sorted at a time?
If you want to use the GridModel with Load on Demand then this blog post may be a better guide for you:
http://es.infragistics.com/community/blogs/damyan_petev/archive/2012/02/15/jquery-hierarchical-grid-load-on-demand.aspx
This blog walks through step by step setting up the igHierarchicalGrid to use load on demand with a GridModel and explains the details of each of the settings. This example uses EntityFramework to pull object collections from SQL, but it should be similar enough to your approach that you could swap in your collections instead if you want.
As for sorting on multiple columns, yes this is supported and can be enabled by setting the Mode for the Sorting feature to "multi". For more information please see the following article:
http://www.igniteui.com/help/iggrid-sorting-overview