How to add border around data grid?

[Matthew]

Hello,

How would you go about adding a border around the data grid? 

Also, I'm trying to apply a background color to certain columns. I'm using this guide: (https://blazor.syncfusion.com/documentation/datagrid/how-to/customize-column-styles).

The background color applies, but the issue is that the color applies only to every other row in the datagrid. So Row 1 = correct color, Row 2 = white, Row 3 = correct color, Row 4 = white, and so on.

Thanks!

[ali]

hi

use this style

.e-grid 

{

  bb        border-color: black;

  bo        border-width: 2px;

}

[Vignesh Natarajan]

Hi Matthew,

Greetings from Syncfusion support.

@Ali – Thanks for your suggestion.

Query: “How would you go about adding a border around the data grid? ”

We suspect that you want to display border between each cell in the Grid. If yes, kindly refer the below ug documentation for your reference.

https://blazor.syncfusion.com/documentation/datagrid/cell#datagrid-lines

If above solution does not match your requirements, kindly get back to us with more details. Or use the suggested provided by Mr. Ali.

Query: “I'm trying to apply a background color to certain columns. I'm using this guide:”

We have already documented this topic in our UG documentation. We can achieve this requirement using CustomAttibutes property of GridColumn. Refer te below Ug documentation link for your reference

https://blazor.syncfusion.com/documentation/datagrid/cell#custom-attributes

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

[Erciyes]

if use this style

.e-grid 

{

  bb        border-color: black;

   bo        border-width: 2px;

} 

then left, bottom and right border appear but not top border

[Sanjay Kumar Suresh]

Hi Erciyes,

To apply borders between the DataGrid rows, we suggest overriding the below CSS with your custom styles:

Concern Code Snippet:

<style>

 

    .e-grid .e-gridheader

    {

        border-top: 2px solid black;

        border-left: 2px solid black;

        border-right: 2px solid black;

    }

 

    .e-grid .e-gridcontent {

        border-top: 2px solid black;

        border-left: 2px solid black;

        border-right: 2px solid black;

        border-bottom: 2px solid black;

    }

      

</style>

Concern Playground Sample:

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

Feel free to reach out if you have any questions.

Regards,

Sanjay Kumar Suresh