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,
Thank you for the code snippet provided.
I created an igGrid with all the properties and features you use, that is, I rewrote all your code according to my columns and my model. However, what happened is that I could not reproduce the described behavior with the wrong/funky information displayed in the group summaries in this grid. For me, everything works as expected and I am able to see the summary of every column where I have enabled it, without such wrong/funky information. This may be due to other custom logic in your application.
What I can give as guidance is to check your model, how you pass the data to the grid and how you bind it. If you remember, I recommended you to pass the model as AsQueryable() to the grid already when declaring the it.
Html.Infragistics().Grid(Model.Customers.AsQueryable())
However, what I see is that you have managed to set the summary feature for the entire grid and display only a given summary function as well as change the summary label. On the other hand for group summaries this will happen in a similar way as when initializing the GroupBy feature in ColumnSettings the column declaration instead of using GroupSummaries(true) will be replaced by a lambda function that sets the summary function and the summary label for that specific column and for that group summaries.
groupedGolumn.ColumnSetting().ColumnKey("Salary").IsGroupBy(false).AllowGrouping(false).GroupSummaries(set => { set.GroupSummary().SummaryFunction(SummaryFunction.Sum).Label("Group Total = "); });
Regarding the summaries layout the class you have managed to find .ui-iggrid-summaries-footer-text-container is responsible for the grid summaries in general. This class can be replaced by the id of any column #grid1_summaries_footer_row_text_container_count_Salary starting with the id of the grid and finally the column key of the column itself. This way you can align each grid summary along to given column.
#grid1_summaries_footer_row_text_container_count_Salary { text-align: right; }
On the other hand, for the group summaries again what I can say is that the .ui-iggrid-summarycolumn class is the one responsible for them and with the :nth-child() pseudo selector a given column is accessed and its group summaries are aligned. Again, everything works as expected for me, and you can try the class again and don't forget that in the :nth-child() pseudo selector pass the number of the given column. You can try with all the numbers until you hit your column which should have right alignment of the group summary.
.ui-iggrid-summarycolumn:nth-child(7) { text-align: right; }
The described scenario could be observed here:
I have prepared small sample illustrating my suggestion which could be found attached here. Please test it on your side and let me know how it behaves.
4265.igGridGroupBySummaries.zip
Thank you for your cooperation.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
it seems that the css .ui-iggrid-summarycolumn:nth-child(7){ text-align:right; } does not work? I cannot get it to work on a particular column nor does it seem to be reliable. I did find this css from your website: ui-iggrid-summaries-footer-text-container which works but cannot find a way to control every column...
Please advise as the frustration grows.. should not have to struggle to find answers for basic topics like this..
Hello Georgi, Thanks for the reply. I believe that I have made the changes you requested and I am still getting the same summary as before getting the irrelevant info.. In other words nothing has changed..Also I want to be able to display only certain summary data such as Sum or Count and not necessary all summary values.. can you please advise on this as well.
Also, the script did not change the alignment on my summary data for some reason.
Sorry for the double post as this is very very frustrating to me.. This should be a simple thing to do and i am hours and days into this...
Below is my modified code that did not change the outcome:
@(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)); }); }); //Enable groupBy feature features.GroupBy() .Type(OpType.Local) .GroupByAreaVisibility(GroupAreaVisibility.Hidden) .FeatureChooserTextHide("") .ColumnSettings(groupedGolumn => { //groupedGolumn.ColumnSetting() //.ColumnKey("EventGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false) //.ColumnKey("EventName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false) //.ColumnKey("TicketTypeGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false) //.ColumnKey("TicketTypeName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true) //.ColumnKey("CheckInCount").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true) //.ColumnKey("CheckedIn").IsGroupBy(true).AllowGrouping(true).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("EventGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("EventName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("TicketTypeGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("TicketTypeName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("CheckInCount").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true); groupedGolumn.ColumnSetting().ColumnKey("CheckedIn").IsGroupBy(true).AllowGrouping(true).GroupSummaries(false); }) //Enable group summaries .GroupSummaries(true) .GroupSummariesPosition(GroupSummariesPositionMode.Bottom); 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("CheckInCount").SummaryOperands(so => { so.SummaryOperand().Type(SummaryFunction.Sum).RowDisplayLabel("Total").Active(true); }); }); }) .DataBind() .Render() )
Thank you for information and code snippets provided.
After further investigation what i can say is that your initializing the igGrid and enabling the groupBy feature is correct and as expected.
However, adding group summaries to only some columns is done when initializing the groupBy feature and the ColumnSettings property. In it you set which columns should have group summaries with the GroupSummaries property by passing true to enable summaries for this column and false to disable.
groupedGolumn.ColumnSetting().ColumnKey("Salary").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true);
In addition, the summary types are automatically determined according to the type of the column for string column they are one, for boolean columns another as well as for number and data type columns. When you initialize the columns and set a column to be of the number datatype with DataType set to number, when displaying the summaries they will have all the basic functions such as Sum, Avg, Count, Max and Min.
column.For(x => x.Salary).HeaderText("Salary").DataType("number");
When enabling the group feature in the ColumnSettings property, initialize all columns as follows:
ColumnSettings(groupedGolumn => { groupedGolumn.ColumnSetting().ColumnKey("CustomerID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("CompanyName").IsGroupBy(false).AllowGrouping(true).GroupSummaries(true); groupedGolumn.ColumnSetting().ColumnKey("ContactName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("Address").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("City").IsGroupBy(true).AllowGrouping(true).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("Salary").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true); }).
And after that enable GroupSummaries(true), this would remove the irrelevant information that appears in the summary.
Finally, to align a given summary to a given position, you can set a style tag in the View or in your site.css file to select the given summary with .ui-iggrid-summarycolumn and with the :nth-child() pseudo selector to select the particular summary.
.ui-iggrid-summarycolumn:nth-child(7){ text-align:right; }
2768.igGridSummaries.zip
If you require any further assistance on the matter, please let me know.
Thank you for the sample code.. i was finally able to find some basic syntax however now I am struggling with the group summaries.. But now I am struggling to add summaries to certain columns only and specific summary types like count, sum... The grid is displaying funcky info that i cannot find out how to get rid of.. Please, please point me to the correct documentation on how to achieve this. I would also like to be able to control the positions of the summary info because it is always left justified..
This is what I have so far:
features.GroupBy() .Type(OpType.Local) .GroupByAreaVisibility(GroupAreaVisibility.Hidden) .FeatureChooserTextHide("") .GroupSummaries(true) .ColumnSettings(groupedGolumn => { groupedGolumn.ColumnSetting() .ColumnKey("EventGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false) .ColumnKey("EventName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false) .ColumnKey("TicketTypeGUID").IsGroupBy(false).AllowGrouping(false).GroupSummaries(false) .ColumnKey("TicketTypeName").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true) .ColumnKey("CheckInCount").IsGroupBy(true).AllowGrouping(true).GroupSummaries(false) .ColumnKey("CheckedIn").IsGroupBy(true).AllowGrouping(true).GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("EventGUID").GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("EventName").GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("TicketTypeGUID").GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("TicketTypeName").GroupSummaries(false); groupedGolumn.ColumnSetting().ColumnKey("CheckInCount").GroupSummaries(true); });