Cannot find a good example of how to use the igHierarchicalGrid in ASP.NET MVC c#, using Razor not using jQuery or coding in the controller like the one example I saw.I have a simple usage of the HierarchicalGrid where I want to list all order nos, order dates and order amounts by customer where the order number is a hyperlink to another page that passes the order id to it. I have been looking for hours and cannot find any examples in the environment that I am developing in. Would appreciate a good example sent me.
Thanks!
Hello Richard,
I have been looking into your question and in order to fulfill your requirements and enable the GroupBy feature together with the Group Summaries in the igGrid, what you have to do is in the feature section when declaring the grid, add GroupBy as wel:.
features.GroupBy()
Also you can add given columns to be grouped when initially loading and rendering the grid.
features.GroupBy().ColumnSettings(groupedColumn => { groupedGolumn.ColumnSetting().ColumnKey("City").IsGroupBy(true); });
To enable the group summaries, access the GroupSummaries method and pass true.
features.GroupBy().ColumnSettings(groupedColumn => { groupedGolumn.ColumnSetting().ColumnKey("City").IsGroupBy(true); }).GroupSummaries(true);
The described scenario could be observed here:
More information on how to enable GroupBy and what properties to use can be found in this topic of the IgniteUI documentation. You can find more information about remote grouping and setting here. You will find an additional reference to the classes here.
Also samples with a lot of information and usage of the property can be found here and GroupBy References API here.
In addition, I have prepared small sample illustrating this behavior which could be found attached here. Please test it on your side and let me know how it behaves.
7380.igGridGroupBy.zip
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
I have been reading some more and I discovered the Group by feature of the uigrid.. i cannot find any asp.net mvc c# razor samples of implementing this. Below is a grid I am experimenting with can you point me to some documentation on how to add the grouping and grouping summaries to a grid please
@(Html.Infragistics().Grid<eMerchant.Reports.Models.EventTicketCheckIn>() .ID("uigEventTicketCheckIn01") //.PrimaryKey("EventGUID") .AutoGenerateLayouts(true) .AutoGenerateColumns(false) .AutoCommit(true) .Caption("Event Ticket Check-ins <br/>" + (string)ViewBag.EventName) .DataSource(Model) .Width("100%") .RenderCheckboxes(true) .Columns(column => { column.For(x => x.EventGUID).DataType("string").Width("150px").HeaderText("EventGUID").Hidden(true); column.For(x => x.EventName).DataType("string").HeaderText("Event").Width("250px").Hidden(true); column.For(x => x.TicketTypeGUID).DataType("string").Width("150px").HeaderText("TicketTypeGUID").Hidden(true); column.For(x => x.TicketTypeName).DataType("string").Width("250px").HeaderText("Type").Hidden(false); column.For(x => x.CheckInCount).DataType("number").Width("100px").HeaderText("Count").HeaderCssClass("column-header-number").ColumnCssClass("column-cell-number").Format("0:0").Hidden(false); column.For(x => x.CheckedIn).DataType("bool").Width("100px").HeaderText("Check-in").Hidden(true); }) .Features(features => { //features.Filtering().Type(OpType.Local); //features.Paging().Type(OpType.Local); features.Resizing(); features.Selection().Mode(SelectionMode.Row).MultipleSelection(false); features.Sorting().Type(OpType.Local).Mode(SortingMode.Multiple); features.Tooltips().Visibility(TooltipsVisibility.Always); features.Responsive().EnableVerticalRendering(false).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("EventName").Configuration(config => { config.AddColumnModeConfiguration("desktop", c => c.Hidden(true)); config.AddColumnModeConfiguration("phone", c => c.Hidden(true)); config.AddColumnModeConfiguration("tablet", c => c.Hidden(false)); }); settings.ColumnSetting().ColumnKey("TicketTypeName").Configuration(config => { config.AddColumnModeConfiguration("desktop", c => c.Hidden(false)); config.AddColumnModeConfiguration("phone", c => c.Hidden(false)); config.AddColumnModeConfiguration("tablet", c => c.Hidden(false)); }); settings.ColumnSetting().ColumnKey("CheckInCount").Configuration(config => { config.AddColumnModeConfiguration("desktop", c => c.Hidden(false)); config.AddColumnModeConfiguration("phone", c => c.Hidden(false)); config.AddColumnModeConfiguration("tablet", c => c.Hidden(false)); }); settings.ColumnSetting().ColumnKey("CheckedIn").Configuration(config => { config.AddColumnModeConfiguration("desktop", c => c.Hidden(true)); config.AddColumnModeConfiguration("phone", c => c.Hidden(true)); config.AddColumnModeConfiguration("tablet", c => c.Hidden(true)); }); }); features.Summaries().ShowSummariesButton(false).ShowDropDownButton(false).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("EventGUID").AllowSummaries(false); settings.ColumnSetting().ColumnKey("EventName").AllowSummaries(false); settings.ColumnSetting().ColumnKey("TicketTypeGUID").AllowSummaries(false); settings.ColumnSetting().ColumnKey("TicketTypeName").AllowSummaries(false); settings.ColumnSetting().ColumnKey("CheckedIn").AllowSummaries(false); settings.ColumnSetting().ColumnKey("CheckedIn").Equals(true); settings.ColumnSetting().ColumnKey("CheckInCount").SummaryOperands(so => { so.SummaryOperand().Type(SummaryFunction.Sum).RowDisplayLabel("Total").Active(true); }); }); }) .DataBind() .Render() )
Thank you for following up.
The sample I made and provided you works as expected for me and I am able to implement and run igHierarchicalGrid. For the currently described problems, I have no way of reproducing them for me as I do not have your code in isolated sample and no code snippets or additional screenshots have been provided. However, this could be due to some minor syntax error in your code, but I have provided you with many samples and help topics on how to implement a hierarchical grid along with a custom sample.
After further investigation, perhaps this described behavior is contained in a property, or in the input of the data or model, or in the missing of a dependency, or in the missing of some initialization, or missing files needed to run the code.
What I can give you as guidance for now without having your code in front of me and exactly how to implement your custom logic is to make sure you pass the model as Queryable(), this is important for data binding in the hierarchical grid.
@(Html.Infragistics().Grid(Model.Customers.AsQueryable())
Also make sure you add the following dependencies: IgniteUI, Infragistics.Web.AspnNetCore, Newtonsoft.Json.
Make sure you don't have a syntax error in any properties and put the DataBind() and Render() at the end when initializing the igHierarchicalGrid. Create a ViewModel class that transforms your data into an IEnumerable<YourModelClass> from your data model.
The best practice to implement the Hierarchical Grid and get your app working is to provide me with isolated sample with your code, any necessary information and files, any screenshots, and any custom logic if you're implementing it. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this forum thread.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
Looking forward to hearing from you.
Thanks for the reply, but I have to say I am extremely frustrated with the example. I have been trying to apply the sample to my real world code and it has been 3 hours with nothing but problems. Is there a real world example you can send me. It should not be this difficult to populate a Hierarchical Grid. I use the regular grid a lot passing models to it with no issues.. im ready to give up if this cant be done in a better fashion.
I have been looking into your question and in fact, we provide a large set of Hierarchical Grid samples as well as documentation and help topics.
Here you can find a ready-made sample that you can test and look at how to create an igHierarchicalGrid that supports editing. Additionally, here you will find HierarchyGrid related documentation on what options, properties, events, and methods it offers.
Perhaps the most important help topic in our Ignite UI documentation, which explains step by step how to create your own hierarchical grid, can be found here. More additional help topics for grid initialization can be found here and for some ASP.NET MVC features with igHierarchicalGrid here.
Here is a code snipped for better vizualization:
@(Html.Infragistics().Grid(Model.Customers.AsQueryable()). ID("grid123"). AutoGenerateColumns(false). AutoGenerateLayouts(false). Height("600px"). Width("700px"). PrimaryKey("CustomerID"). Columns(column => { column.For(x => x.CustomerID).HeaderText("Customer ID").DataType("string").Template("<a href='https://www.google.com/search'> ${CustomerID} </a>"); column.For(x => x.CompanyName).HeaderText("Company Name").DataType("string"); column.For(x => x.ContactName).HeaderText("Contact Name").DataType("string"); column.For(x => x.Address).HeaderText("Address").DataType("string"); column.For(x => x.City).HeaderText("City").DataType("string"); }). ColumnLayouts(layouts => { layouts.For(x => x.Orders). Width("100%"). ForeignKey("CustomerID"). PrimaryKey("OrderID"). AutoGenerateColumns(false). AutoGenerateLayouts(false). Columns(childcolumn => { childcolumn.For(x => x.OrderID).HeaderText("Order ID").DataType("number"); childcolumn.For(x => x.ShipAddress).HeaderText("Ship Address").DataType("string"); childcolumn.For(x => x.ShipName).HeaderText("Ship Name").DataType("string"); }); }). DataBind(). Render())
After you create your hierarchical grid and initialize the columns, you can template each column by submitting its content to be wrapped in an A tag as a link to redirect to another page. You can also view additional information about column templating here.
Columns(column => { column.For(x => x.CustomerID).HeaderText("Customer ID").DataType("string").Template("<a href='https://www.google.com/search'> ${ CustomerID} </a>"); column.For(x => x.CompanyName).HeaderText("Company Name").DataType("string"); column.For(x => x.Address).HeaderText("Address").DataType("string"); }).
In addition, I also have prepared small sample where I have initialized igHierarchicalGrid which I attached here. Please test it on your side and let me know how it behaves.
5123.igHierarchicalGrid.zip