A bit old but still got the same question and the answer doesn't really solve the issue.
I have a grid with bootstrap4 theme. I need to add the class .table-striped to it. I did find the HtmlAttributes on SfGrid but that only add the class to the wrapper div and not the table element.
Is there any way other than JsInteropt to add a class to the current table within the grid component? Example is table-striped, table-dark, table-condensed.
Any tough?
Thank you
code :
<div class="col-md-12" id="main-content" style="min-height: 500px;">
<SfGrid TValue="JobListingModel" AllowSorting="true" AllowPaging="true" Toolbar="Toolbaritems" Height="650" AllowReordering="true" AllowResizing="true" HtmlAttributes="@attr">
<SfDataManager Url="https://localhost:5000/api/Job" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
<GridPageSettings PageSizes="PageSizeList" PageCount="5" PageSize="50"></GridPageSettings>
<GridColumns>
@foreach (var prop in typeof(JobListingModel).GetProperties())
{
@if (prop.Name != nameof(JobListingModel.Id))
{
<GridColumn Field="@prop.Name" IsPrimaryKey="@(prop.Name == "Id")"></GridColumn>
}
}
</GridColumns>
</SfGrid>
</div>
@code {
private List<int> PageSizeList = new List<int>() { 5, 10, 15, 25, 50, 100 };
private Dictionary<string, object> attr = new Dictionary<string, object>() { { "class", "table-striped" } };
private List<ItemModel> Toolbaritems = new List<ItemModel>();
protected override void OnInitialized()
{
Toolbaritems.Add(new ItemModel() { Text = "Search", TooltipText = "Search", Align = ItemAlign.Left });
}
}
