rowstyle

I want to add some spacing between every two rows of data, how do I do that? for example: Image_2189_1739173706257


1 Reply

SB Sweatha Bharathi Syncfusion Team February 10, 2025 01:18 PM UTC

Hi Tom ,
We have reviewed your query. To achieve your requirement of adding space between the two rows of data, this can be accomplished by setting the margin to create space between the rows and applying a top border to the grid cell. By default, in our SfDataGrid, borders are applied on the right and bottom. In this scenario, we have set the margin between the two rows to create space, so the top border is not applied to the next row. To resolve this issue, we have applied the top border to the grid cell.

However, in this case, the first row becomes shorter because the row is drawn with the margin you have provided for spacing taken into account. To address this, you can use the QueryRowHeight event. In this event, you can set the row height for specific rows by adding the margin you provided for spacing to the default row height. This will help compensate for the space taken by the margin.

We have provided a sample for your reference. Kindly review the sample and let us know if you have any concerns.

Code snippet :

 public class MarginConverter : IValueConverter
 {
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
         var rowIndex = (parameter as SfDataGrid).ResolveToRowIndex(value);
         if (rowIndex % 2 != 0)
         {
             return new Thickness(0, 12, 0, 0);
         }
         return new Thickness(0);

     }

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
     {
         throw new NotImplementedException();
     }
 }

 public class ThickenssConverter : IValueConverter
 {
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
         var rowIndex = (parameter as SfDataGrid).ResolveToRowIndex(value);

         if (rowIndex % 2 != 0)
         {
             return new Thickness(0, 1, 1, 1);
         }
         return new Thickness(0, 0, 1, 1);
     }

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
     {
         throw new NotImplementedException();
     }
 }



 private void Sfdatagrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
 {
     if (e.RowIndex % 2 != 0)
     {
         e.Height = sfdatagrid.RowHeight + 12;
         e.Handled = true;
     }
 }


Regards,
Sweatha.B

Attachment: sample_4740ad05.zip

Loader.
Up arrow icon