Trying to group data in a grid by with a bool value. when I do I get some goofy data in the footer of the gird for each grouping (see red section in attached). Cant get rid of it and I only want to show the summary info for the Count column. How can this be resolved? See page razor code below and attached. I do not want to use any Java or JQuery for this... I would appreciate any help on this matter.. Thanks in advance.@using System.Data@using Infragistics.Web.Mvc;@*@model System.Data.DataTable*@@*@model eMerchant.Reports.Models.EventTicketCheckIn*@@model IQueryable<eMerchant.Reports.Models.EventTicketCheckIn><div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="row"> <div id="container1" class="col-lg-4 col-md-8 col-sm-12 col-xs-12"> @(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.Tooltips().Visibility(TooltipsVisibility.Always); features.Sorting().Type(OpType.Local).Mode(SortingMode.Multiple).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("CheckedIn").AllowSorting(true).CurrentSortDirection("ascending").FirstSortDirection("ascending"); settings.ColumnSetting().ColumnKey("CheckedIn").AllowSorting(true).CurrentSortDirection("descending").FirstSortDirection("descending"); //settings.ColumnSetting().ColumnKey("TicketTypeName").AllowSorting(true).CurrentSortDirection("ascending").FirstSortDirection("ascending"); }); 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); }) .DefaultSortingDirection("descending") //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() ) </div> </div> </div></div><style> /* align particular summary */ /* .ui-iggrid-summarycolumn:nth-child(5) { text-align: right; } */ /*.ui-iggrid-summarycolumn:last-child{ text-align: right; }*/ .ui-iggrid-summarycolumn { text-align: right; } .ui-iggrid-summaries-footer-text-container { text-align: right !important; padding-right: 10px; }</style><script type="text/javascript"> //$("#uigEventTicketCheckIns").igGrid({ // dataBinding: function (evt, ui) { // $("#uigEventTicketCheckIns_container_loading").css("display", "none"); // } //});</script>
In the group totals you can see that the grid is showing Count, Min, Max, Sum and Avg for each group. I only want the Sum for each group not the rest of the summaries in each group.. I cannot seem to not show the others.. See attached
Im sorry but i not clear on suppressing group summaries except for sum. Can you please further elaborate? Not sure how to only show sum of each group instead of min, max...
Thanks!
Hello John,
Thank you for your follow-up message!
After further investigating this matter, what I could say is that some options like the groupLabelFormatter accept functions as parameters and in order for them to work properly and as expected, these functions should be defined, i.e., inside the <script> tag. Furthermore, the group summary icons are displayed by default, and this is the expected behavior and modifying the css is a workaround approach in order to achieve your requirement.
Additionally, regarding your additional question, what I could say is that displaying only a certain group summary, i.e., Sum, for all columns could be achieved by setting the summaryFunction property of the groupSummaries option.
//Enable group summaries .GroupSummaries(gs => gs.GroupSummary().SummaryFunction(SummaryFunction.Sum))
Also, as this option has a lower priority than the groupSummaries defined under columnSettings for each column, this option should be removed from the column settings definitions.
//Enable groupBy feature features.GroupBy() .Type(OpType.Local) .GroupByAreaVisibility(GroupAreaVisibility.Hidden) .FeatureChooserTextHide("") .ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("EventGUID").IsGroupBy(false).AllowGrouping(false); cs.ColumnSetting().ColumnKey("EventName").IsGroupBy(false).AllowGrouping(false); cs.ColumnSetting().ColumnKey("TicketTypeGUID").IsGroupBy(false).AllowGrouping(false); cs.ColumnSetting().ColumnKey("TicketTypeName").IsGroupBy(false).AllowGrouping(false); cs.ColumnSetting().ColumnKey("CheckInCount").IsGroupBy(false).AllowGrouping(false); cs.ColumnSetting().ColumnKey("PeopleCount").IsGroupBy(false).AllowGrouping(false); cs.ColumnSetting().ColumnKey("CheckedIn").IsGroupBy(true).AllowGrouping(true).GroupLabelFormatter("formatter"); })
The result from the above configurations could be observed below:
Let me know if you need further assistance regarding this matter.
Sincerely, Riva Ivanova Associate Software Developer
Thank you for your reply Riva,
The suggestions you made worked.However is there a way not accomplish the same things without using CSS or scripting?Also, I am still struggling with the group summary values. I only want to display the Sum for each group and an overall total for the grid. I cannot seem to hide the Ave, Min, Max and Count for the groups. I am including my latest code and a illustration of this.. Thank you again.
<div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="row"> <div id="container1" class="col-lg-4 col-md-8 col-sm-12 col-xs-12"> @(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(true); column.For(x => x.CheckedIn).DataType("boolean").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.Tooltips().Visibility(TooltipsVisibility.Always); features.Sorting().Type(OpType.Local).Mode(SortingMode.Multiple).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("CheckedIn").AllowSorting(true).CurrentSortDirection("ascending").FirstSortDirection("ascending"); settings.ColumnSetting().ColumnKey("CheckedIn").AllowSorting(true).CurrentSortDirection("descending").FirstSortDirection("descending"); //settings.ColumnSetting().ColumnKey("TicketTypeName").AllowSorting(true).CurrentSortDirection("ascending").FirstSortDirection("ascending"); }); 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("CheckedIn").IsGroupBy(true).AllowGrouping(true).GroupSummaries(false).GroupLabelFormatter("formatter"); groupedGolumn.ColumnSetting().ColumnKey("CheckInCount").IsGroupBy(false).AllowGrouping(false).GroupSummaries(true); features.Summaries().ShowSummariesButton(false).ShowDropDownButton(false).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("CheckInCount").SummaryOperands(so => { so.SummaryOperand().Type(SummaryFunction.Min).RowDisplayLabel("Min").Active(false); so.SummaryOperand().Type(SummaryFunction.Max).RowDisplayLabel("Max").Active(false); so.SummaryOperand().Type(SummaryFunction.Avg).RowDisplayLabel("Avg").Active(false); so.SummaryOperand().Type(SummaryFunction.Sum).RowDisplayLabel("Total").Active(true); so.SummaryOperand().Type(SummaryFunction.Count).RowDisplayLabel("Count").Active(false); }); }); }) .DefaultSortingDirection("descending") //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.Min).RowDisplayLabel("Min").Active(false); so.SummaryOperand().Type(SummaryFunction.Max).RowDisplayLabel("Max").Active(false); so.SummaryOperand().Type(SummaryFunction.Avg).RowDisplayLabel("Avg").Active(false); so.SummaryOperand().Type(SummaryFunction.Sum).RowDisplayLabel("Total").Active(true); so.SummaryOperand().Type(SummaryFunction.Count).RowDisplayLabel("Count").Active(false); }); }); }) .DataBind() .Render() ) </div> </div> </div></div><style> /* align particular summary */ /* .ui-iggrid-summarycolumn:nth-child(5) { text-align: right; } */ /*.ui-iggrid-summarycolumn:last-child{ text-align: right; }*/ .ui-iggrid-summarycolumn { text-align: right; } .ui-iggrid-summaries-footer-text-container { text-align: right !important; padding-right: 10px; }</style><script type="text/javascript"> //$("#uigEventTicketCheckIns").igGrid({ // dataBinding: function (evt, ui) { // $("#uigEventTicketCheckIns_container_loading").css("display", "none"); // } //}); function formatter(val) { return (val === true) ? 'Yes' : 'No'; }</script><style type="text/css"> .ui-iggrid-summaryiconcontainer-group-by { display: none; }</style>
Thank you for following up!
I have been looking into your additional questions and regarding the first one what I could suggest is setting the display property of the summary icon to none via css:
.ui-iggrid-summaryiconcontainer-group-by { display: none; }
Additionally, regarding your second question, I would suggest using the igGridGroupBy feature’s groupLabelFormatter option and setting it similar to the following:
//Enable groupBy feature features.GroupBy() .Type(OpType.Local) .GroupByAreaVisibility(GroupAreaVisibility.Hidden) .FeatureChooserTextHide("") .ColumnSettings(groupedGolumn => { ... groupedGolumn.ColumnSetting() .ColumnKey("CheckedIn") .IsGroupBy(true) .AllowGrouping(true) .GroupSummaries(false) .GroupLabelFormatter("formatter"); })
<script> function formatter(val) { return (val === true)? 'Yes' : 'No'; } </script>
Please test these approaches on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.