Questions regarding grouping

Question

GreetingsI would like to display the key for a column that is grouped along with summaries for two other columns. For examples, we have the following grid columns:    A | B | C | D-------------------    a1|b1|$76|$142    a1|b2|$23|$150 where A, B are text columns and C,D are currency columns which are essentially text columns with the currency format. 1) The problem is that when the summaries are displayed with 'ShowSummaryInRow' set to false, the key is no longer displayed. That is the sum of columns C and D are displayed in their respective columns but 'a1' is not displayed in the grouped row. Is it possible to display the grouped column's key (while not displaying the column itself) and summaries for multiple columns within their respective columns? For example using the above grid, the desired outcome would look like this:   a1      $99 $292Currently, this is the display that I'm getting             $99 $2922) The group arrow icon is displayed in the right most position of the grid, next to the sum of the 'D' values. The sum entry overwrites the arrow. Is it possible to place the arrow in the right most position of the grid?  One possibility is to set 'GroupingMode' to 'Multiple' but this causes a small empty column of cells to be added to the left of the grid which is not desirable.Thanks very much in advance.

Shivagurunathan Kamalakannan · Answer

Hi svrz,

Thanks for contacting Syncfusion support.

You can display grouped column’s key for multiple columns. You can achieve this by setting SfDataGrid.GroupingMode to multiple and proceed to give required columns in SfDataGrid.CaptionSummaryRow. I have attached the sample link. Kindly refer it.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridSample-1190835026

You can use the caption summary template, So that overlapping can be avoided in the icon. Kindly refer the link for more details.

Link: https://help.syncfusion.com/xamarin/sfdatagrid/summary#caption-summaries

Regards,

Shivagurunathan. K

svrz · Answer

Hello ShivagurunathanThank you very much for your prompt reply and taking the extra time to provide the sample.I must apologize as I may not have stated my problem clearly. To better illustrate my requirement, please refer to the screenshots 'one.png', 'two.png' and 'three.png' in the attached zip folder.In the first image, the grid is grouped by column 'A.'  In the second image, property 'ShowColumnWhenGrouped' is set to false which results in column 'A' being hidden. So far so good as this meets a large portion of the requirement.The third image depicts the grid with columns 'D' and 'E' being designated as summary columns. The problem is that grouping header which is based on values of column 'A' has disappeared.When I'm trying to achieve is a composition of 'two.png' and 'three.png.'  It appears that this may not be possible.Thanks again   Attachment: GridImages_5c1cc861.zip

Shivagurunathan Kamalakannan · Answer

Hi svrz,

Thanks for the detailed explanation of about your query. The provided images were clear and was helpful to find out your requirement. Your requirement can be achieved by using SfDataGrid.CaptionSummaryTemplate and converter in it. Kindly find the below code example for reference:

public class CustomConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

Group group = value as Group;

SfDataGrid dataGrid = parameter as SfDataGrid;

if(group != null && dataGrid != null)

{

var val = SummaryCreator.GetSummaryDisplayText(group.SummaryDetails, "CustomerID", dataGrid.View);

return group.Key + ":" + " " + val + " " + "items" ;

}

return value;

}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

{

return value;

}

Kindly find the attached sample link for more details.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridSample921414475

Regards,

Shivagurunathan. K

svrz · Answer

Greetings ShivagurunathanI apologize for the tardy reply. This is exactly what I was seeking. I thank you immensely for the time and effort that you spent on this query.If I may ask one more question:Would it be possible to the change 'expand\collapse' icon that is displayed in the summary row?Thanks again.Take care

Shivagurunathan Kamalakannan · Answer

Hi svrz,

Thanks for your update.

Regarding your query “Would it be possible to the change 'expand\collapse' icon that is displayed in the summary row?”:

Yes, it is possible to change the group collapse and expand icon displayed in the caption summary row. It can be achieved by the following the below instructions:

Write a custom style class deriving from DataGridStyle class.
Override the GetGroupCollapseIcon and GetGroupExpanderIcon method.
Customize the icons there based on your requirement.
Assign a new instance of your custom style class to SfDataGrid.GridStyle property.

Refer the below code example for further reference:

dataGrid.GridStyle = new CustomStyle();

public class CustomStyle:DataGridStyle

{

public CustomStyle()

{

}

public override ImageSource GetGroupCollapseIcon()

{

return ImageSource.FromResource("SfDataGridSample.flower.png");

}

public override ImageSource GetGroupExpanderIcon()

{

return ImageSource.FromResource("SfDataGridSample.flower.png");

}

Note: The images used as icons must be attached to your project as “EmbeddedResource”
For example, “flower.png” in our sample is included as EmbeddedResource.

We have also prepared a sample based on the requirement and you can download the same from the below location.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridSample1018847158

Additional Information:

In addition the group icon can be made to animate in SfDataGrid just by returning the GetGroupCollapseIcon as null. Refer the below link for more details.

Link: https://help.syncfusion.com/xamarin/sfdatagrid/grouping#animate-group-expandcollapse-icon

Regards,

Shivagurunathan. K

svrz · Answer

Another question, if I may :) :I attempted to change the font color in the 'caption summary' cell by following Ashok's recommendation here:https://www.syncfusion.com/forums/132022/how-to-style-the-gridsummarycolumn-font-alignmentThe problem is that the 'view' parameter is always null.Here is a snippet of the XAML file:[code=XAML] [/code]

svrz · Answer

Regarding your query “Would it be possible to the change 'expand\collapse' icon that is displayed in the summary row?”:  
 
Yes, it is possibleThank you very much, Shivagurunathan.

Shivagurunathan Kamalakannan · Answer

Hi svrz,

We have checked your query regarding “Changing the font color in the 'caption summary' cell by following Ashok's recommendation” and your requirement can be achieved depending on the below scenarios.

Since we are not clear about your exact requirement we have provided solution for all the possibilities that you may need. You can choose the appropriate one based on your requirement.

Approach 1: Customize only the caption summary font color

If you need only to customize the font color of the CaptionSummaryRow. Kindly follow the below instructions.

Write a custom style class deriving from DataGridStyle class.
Override the GetCaptionSummaryRowForegroundColor method.
Assign a new instance of your custom style class to SfDataGrid.GridStyle property.

dataGrid.GridStyle = new CustomStyle();

public class CustomStyle :DataGridStyle

{

public override Color GetCaptionSummaryRowForegroundColor()

{

return Color.Red;

}

Approach 2: Customize caption row font color and font attribute

If your requirement is to customize the caption row’s font color along with the font attributes, then you need to write a custom class deriving from GridCaptionSummaryCellRenderer.

//Defining custom CellRenderers for caption summary.

dataGrid.CellRenderers.Remove("CaptionSummary");

dataGrid.CellRenderers.Add("CaptionSummary", new GridCaptionSummaryExt());

The below given code allows you to customize the TextColor, FontAttributes etc., of the view loaded in the caption row by overriding the OnInitializeDisplayView method.

OnInitializeDisplayView – It loads the grid when the display view is initiated.

public class GridCaptionSummaryExt : GridCaptionSummaryCellRenderer

{

public GridCaptionSummaryExt()

{

}

public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfLabel view)

{

base.OnInitializeDisplayView(dataColumn, view);

if (view == null)

{

var templatedView = ((ContentView)(dataColumn as IElement).Element).Content as Label;

templatedView.TextColor = Color.Red;

}

else

view.TextColor = Color.Red;

}

Approach 3: Customize the view loaded in the caption row based on requirement.

If you wish to customize the entire view loaded in the caption row or caption cell (For example, like loading image) then you can customize the caption row by loading a DataTemplate. Kindly follow the below code to customize it.

<sfgrid:GridSummaryColumn Name="OrderId"

Format="{}{Count}"

SummaryType="CountAggregate"

MappingName="OrderID">

<sfgrid:GridSummaryColumn.Template>

<Label Text="{Binding Converter={StaticResource converter}, ConverterParameter={Reference dataGrid}}"

VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="Blue"></Label>

</DataTemplate>

</sfgrid:GridSummaryColumn.Template>

</sfgrid:GridSummaryColumn>

Refer the below sample link for more details.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridSample1739307004

Regards,

Shivagurunathan. K

svrz · Answer

Hello ShivagurunathanApproach #1 works perfectly.Once again I thank you immensely for providing such outstanding and timely level of support.Best wishes

Shivagurunathan Kamalakannan · Answer

Hi svrz,  
 
Thanks for the update.  
 
We are glad that your requirement has been achieved. Please let us know if you require any further assistance. 
 
Regards, 
Shivagurunathan. K