How can i add space between Grid rows

[Adnan Ali]

Can you please let me know if i can add space between grid rows with Blazor and Syncfusion? If so how can i do that.. i have tried different solutions on my end but they are not working 

[Adnan Ali]

I need to add spacing between grid rows,but any solution is not working for me

[Prathap Senthil]

Hi Adnan Ali,

Query:” How can i add space between Grid rows:”

Based on your needs, we suggest you use the below CSS customization to achieve your requirements. Kindly refer to the below code snippet and sample for your reference.

 

<style >

  

    .e-content .e-table{

        border-spacing: 0px 10px; /* space between rows */

    }

   .e-grid .e-row{

           background-color:aquamarine;

        }

</style>

Sample Link: https://blazorplayground.syncfusion.com/embed/BZBUNbibKFDfyhcH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[jishnu chn]

Can we add space between few rows ? like in the above image i want to add space between 2nd and 3rd row . not others.

[Naveen Palanivel]

Hi jishnu chn,

We checked your requirement and it seems that you want to add space between a specific row instead of applying it to the entire grid. This can be achieved by using the RowDataBound event to add a custom class to the specific row. Then, you can apply the desired spacing using CSS for that class. Please refer to the code snippet and sample provided below to implement this solution.

Sample : https://blazorplayground.syncfusion.com/embed/hZLosjrMNZBwMhir?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

UG : https://blazor.syncfusion.com/documentation/datagrid/row#using-event

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

    <GridEvents TValue="Order" RowDataBound="RowBound"></GridEvents>

    <GridColumns>

</SfGrid>

 

<style>

 

    .e-grid tr.e-row {

        background-color: aquamarine;

    }

 

    .e-grid tr.e-row.spaced-row td {

            background-color: aquamarine;

        border-bottom : 10px solid white;

 

    }

 

</style>

 

@code {

    public List<Order> Orders { get; set; }

 

    public void RowBound(RowDataBoundEventArgs<Order> args)

    {

        if (args.Data.OrderID == 1002 || args.Data.OrderID == 1003)

        {

            args.Row.AddClass(new string[] { "spaced-row" });

        }

       

    }

Regards,
Naveen

[jishnu chn]

Thanks for the update. I want the style in this format: each super parent and all its children should be marked with a black border(border only for super parent not its child ). Add extra space only between the super parents (not between their children) in the tree grid.

[Naveen Palanivel]

Hi jishnu chn,

We want to inform you that we have branched a new forum for this query . For any updates or further communication regarding that particular concern, we kindly ask you to refer to the following forum:

Forum: Customizing the border style and spac... | Blazor Forums | Syncfusion®

Please use the provided forum to communicate with us about your query .Thank you for your patience and cooperation. We are committed to resolving these issues for you as quickly as possible.

Regards,
Naveen.