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:

Hello Richard,

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;
     }

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.

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.