rowstyle and group

[Tom]

I want to achieve a datagrid style like in the image below, and allow grouping on the right side. How can I do this? Can you provide me with a detailed example?

Attachment: 404efe383c6b4dd5aa7ca8aaa8316809_6efda094.png

[Sweatha Bharathi]

Hi Tom,

We have reviewed your query. Based on the image you provided, it is possible to apply styles to rows in the SfDataGrid using either a converter or a style selector. This allows you to apply the styles based on specific conditions.

Additionally, you can apply styles to the caption summary as well. When using grouping, you can enable the ShowGroupDropArea property to true, which allows users to group directly in the UI.

We have provided a sample for your reference. In our sample, we have used a StyleSelector, which you can modify to change the background or apply styles based on your requirements.

Code snippet to achieve row style:

  public class CustomRowStyleSelector : StyleSelector

  {

      public override Style SelectStyle(object item, DependencyObject container)

      {

          var row = (item as DataRowBase);

          if (row.RowIndex % 2 == 0)

              return App.Current.Resources["rowStyle1"] as Style;

          return App.Current.Resources["rowStyle2"] as Style;

      }

  }

 <syncfusion:SfDataGrid  x:Name="datagrid"

                                            Background="LightGreen"

                                            ShowGroupDropArea="True"

                                           RowStyleSelector="{StaticResource alternatingRowStyleSelector}"

                                           ItemsSource="{Binding Orders}">

Image Reference:

For further reference, kindly review the following documentation links:

UG Links: Grouping

                   Conditional Styling

If you need any further assistance, please feel free to get back to us. We will be happy to help you.

Regards,

Sweatha B

Attachment: sample_434f8b0e.zip