Customize Styling of SfDataGrid Group Header

[Malcolm van Staden]

Hi,

I'd like to know whether it's possible to customize the group header of the SfDataGrid? 

I'd also like to know whether it's possible to add a button to the group header?

[Sivaraman Sivagurunathan]

Hi Malcolm,   

   

Thanks for using Syncfusion support.   

   

We have checked your query. Yes, you can customize the group Header by using CaptionSummaryTemplate property in SfDatGrid. You can host the any view(s) inside a CaptionSummaryTemplate. We have prepared a sample based on your requirement and you can download the same from the below link. Also, please refer the UG link.   

   

Sample Link:http://www.syncfusion.com/downloads/support/forum/135660/ze/CaptionSummaryTemplate-3143486   

   

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

   

The below code illustrates how to load the view inside caption summary template.   

   

   

<ContentPage.Resources>   

    <ResourceDictionary>   

        <local:GroupCaptionConverter x:Key="SummaryConverter" />   

    </ResourceDictionary>   

</ContentPage.Resources>   

   

<syncfusion:SfDataGrid.CaptionSummaryTemplate>   

  <DataTemplate>   

    <StackLayout Orientation="Horizontal" BackgroundColor="Gray">   

      <Button Text="Total Salary"   

            HorizontalOptions="Start"   

            VerticalOptions="Center"/>   

      <Label Text="{Binding Converter={StaticResource SummaryConverter}, ConverterParameter = {x:Reference dataGrid} }"   

              TextColor="White"   

              FontSize="Large"   

              VerticalTextAlignment="Center"   

             HorizontalTextAlignment="Start"   

              HorizontalOptions="FillAndExpand"   

              VerticalOptions="FillAndExpand">   

        <Label.Style>   

          <Style TargetType="Label">   

            <Setter Property="FontAttributes" Value="Bold, Italic" />   

          </Style>   

        </Label.Style>   

      </Label>   

    </StackLayout>   

  </DataTemplate>   

</syncfusion:SfDataGrid.CaptionSummaryTemplate>   

<syncfusion:SfDataGrid.CaptionSummaryRow>   

<syncfusion:GridSummaryRow Name="CaptionSummary" ShowSummaryInRow="True"Title="Salary: {CaptionSummary}">   

    <syncfusion:GridSummaryRow.SummaryColumns>   

        <syncfusion:GridSummaryColumn Name="CaptionSummary"   

                                  Format="{}{Sum}"   

                                  MappingName="Freight"   

                                  SummaryType="DoubleAggregate" />   

    </syncfusion:GridSummaryRow.SummaryColumns>   

</syncfusion:GridSummaryRow>   

</syncfusion:SfDataGrid.CaptionSummaryRow>   

   

// Converter   

public class GroupCaptionConverter : IValueConverter   

{   

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

    {   

        var data = value != null ? value as Group : null;   

        if (data != null)   

        {   

            SfDataGrid dataGrid = (SfDataGrid)parameter;   

            var summaryText = SummaryCreator.GetSummaryDisplayTextForRow((value asGroup).SummaryDetails, dataGrid.View);   

   

            return summaryText;   

        }   

        return null;   

    }   

   

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

    {   

        return null;   

    }   

}   

 

Regards, 

Sivaraman 

[Malcolm van Staden]

Thank you, this was very helpful.

Is it possible to add more than 1 summary row?  

If someone else might need info concerning how to attach a command to the button:

<Button Text="Total Salary"

                HorizontalOptions="Start"

                VerticalOptions="Center"

                             Command="{Binding Source={x:Reference dataGrid}, Path=BindingContext.OnTestClick}"

                            CommandParameter="{Binding .}"/>

        private Command<Syncfusion.Data.Group> _onTestClick;

        public Command<Syncfusion.Data.Group> OnTestClick

        {

            get

            {

                return _onTestClick

                    ?? (_onTestClick = new Command<Syncfusion.Data.Group>(

                    (datagridGroup) =>

                    {

                        var clickedItem = datagridGroup.Source.First() as OrderInfo;

                    }));

            }

        }

[Sivaraman Sivagurunathan]

Hi Malcolm, 

 

Regarding Your First Query: 

 

We have checked your query. By default, in SfDataGrid for a single group there is only one caption summary you can achieve your requirement by using table summary. 

 

Regarding your Second Query: 

 

You can achieve your requirement “perform button action by using Command” by using the below code example. Xamarin.Forms.Behaviors allows you to convert events into commands. We have prepared sample based on your requirement and attached for your reference  you can download the same from the below link also refer the UG link. 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/135660/ze/CaptionSummaryTemplate880645276 

 

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

 

 

//ViewModel 

private Command buttonClickedCommand; 

public Command ButtonClickedCommand 

{ 

    get { return buttonClickedCommand; } 

    set { buttonClickedCommand = value; } 

} 

public ViewModel() 

{ 

    buttonClickedCommand = new Command(ButtonClick); 

    SetRowstoGenerate(50); 

} 

private void ButtonClick() 

{ 

// Your Code 

} 

 

// Xaml 

 

<syncfusion:SfDataGrid.CaptionSummaryTemplate> 

  <DataTemplate> 

    <StackLayout> 

      <Button x:Name="button" 

              Text="Total Salary" 

              HorizontalOptions="Start" 

              VerticalOptions="Center"> 

        <b:Interaction.Behaviors> 

          <b:BehaviorCollection> 

            <b:EventToCommand EventName="Clicked" 

                              Command="{Binding ButtonClickedCommand, Source={Reference viewModel}}" 

                              CommandParameter="{x:Reference Name=button}"/> 

          </b:BehaviorCollection> 

        </b:Interaction.Behaviors> 

      </Button> 

      <Label Text="{Binding Converter={StaticResource SummaryConverter}, ConverterParameter = {x:Reference dataGrid} }" 

              TextColor="White" 

              FontSize="Large" 

              VerticalTextAlignment="Center" 

              HorizontalTextAlignment="Start" 

              HorizontalOptions="FillAndExpand" 

              VerticalOptions="FillAndExpand"> 

        <Label.Style> 

          <Style TargetType="Label"> 

            <Setter Property="FontAttributes" Value="Bold, Italic" /> 

          </Style> 

        </Label.Style> 

      </Label> 

    </StackLayout> 

  </DataTemplate> 

</syncfusion:SfDataGrid.CaptionSummaryTemplate> 

 

 

 

Regards, 

Sivaraman