Add CSS class to grid (html table) component

[Johann Alexander Quintero Cortes]

Hello,

I am creating an application in Blazor and I am using an HTML template in bootstrap4 that I bought on https://themes.getbootstrap.com/.

I am trying to use the Syncfusion components for Blazor with this template but when I try to apply the Css classes to the grid component, I am not able to add the proper classes to the HTML tags.

What I am trying to achieve in this moment is to create a table like this:

<table class="table table-sm mb-0 table-striped table-dashboard fs--1 data-table border-bottom border-200">

<thead class="bg-200 text-900">

<tr>

<th class="align-middle no-sort pr-3">

<div class="custom-control custom-checkbox">

<input class="custom-control-input checkbox-bulk-select" type="checkbox"/>

<label class="custom-control-label" for="checkbox-bulk-customers-select"></label>

</div>

</th>

<th class="align-middle sort">Name</th>

<th class="align-middle sort">Email</th>

<th class="align-middle sort">Phone</th>

<th class="align-middle sort pl-5" style="min-width: 200px;">Billing Address</th>

<th class="align-middle sort">Joined</th>

<th class="align-middle no-sort"></th>

</tr>

</thead>

<tbody id="customers">

<tr class="btn-reveal-trigger">

<td class="py-2 align-middle white-space-nowrap">

<div class="custom-control custom-checkbox">

<input class="custom-control-input checkbox-bulk-select-target" type="checkbox" id="customer-checkbox-0" />

<label class="custom-control-label" for="customer-checkbox-0"></label>

</div>

</td>

<td class="py-2 align-middle white-space-nowrap customer-name-column">

<a rel='nofollow' href="../pages/customer-details.html">

<div class="media d-flex align-items-center">

<div class="avatar avatar-xl mr-2">

<div class="avatar-name rounded-circle"><span>RA</span></div>

</div>

<div class="media-body">

<h5 class="mb-0 fs--1">Ricky Antony</h5>

</div>

</div>

</a>

</td>

<td class="py-2 align-middle">

<a rel='nofollow' href="mailto:[email protected]">[email protected]</a>

</td>

<td class="py-2 align-middle white-space-nowrap">

<a rel='nofollow' href="tel:[phone]">[phone]</a>

</td>

<td class="py-2 align-middle pl-5">2392 Main Avenue, Penasauka, New Jersey 02139</td>

<td class="py-2 align-middle">30/03/2018</td>

<td class="py-2 align-middle white-space-nowrap">

<div class="dropdown text-sans-serif">

<button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal mr-3" type="button" id="customer-dropdown-0" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false">

<span class="fas fa-ellipsis-h fs--1"></span>

</button>

<div class="dropdown-menu dropdown-menu-right border py-0" aria-labelledby="customer-dropdown-0">

<div class="bg-white py-2">

<a class="dropdown-item" rel='nofollow' href="#!">Edit</a>

<a class="dropdown-item text-danger" rel='nofollow' href="#!">Delete</a>

</div>

</div>

</div>

</td>

</tr>

</tbody>

</table>

Any guidance on how can I add this classes and custom attributes to the syncfusion grid and other components?

Thanks,

Johann Quintero.

[Vignesh Natarajan]

Hi Johann,  

Thanks for contacting Syncfusion support.  

Query: “Any guidance on how can I add this classes and custom attributes to the syncfusion grid and other components?” 

We have analyzed your query and we understand that you want to customize the Grid appearance by adding a specific class name. We suggest you to use CustomAttributes property of GridColumn to apply specific class named to tr element of Grid component.  

Also we request you to refer the below styling and appearance UG documentation of Grid component to customize the style. 

https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/  

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

Kindly share more details about the other components you are using, it will be very helpful for to understand you requirement and based on that, we will update you the details.  

Regards, 

Vignesh Natarajan 

[Johann Alexander Quintero Cortes]

Hi good evening:

Thanks for your answer. So according to what you say I can apply classes to tr elements, but can I do the same for table, thead, tfoot, th and td?

[Vignesh Natarajan]

Hi Johann,  

Thanks for the update.  

Query: “but can I do the same for table, thead, tfoot, th and td?” 

We can add a class name to td element using QueryCellInfo event of Grid. But we do not have support to add class name to other elements. So we request you to customize the td, tr, table using Theme Studio where a model Grid component will be displayed and customization can be done and downloaded as a local file.  

UG: https://blazor.syncfusion.com/documentation/appearance/theme-studio/ 

Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan