We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to add bootstrap small table class ".table-sm" to GRID.

I want to add bootstrap small table class ".table-sm" to make GRID more compact. And I also want to add "form-control-sm" to Input fields to make them small too during In-line editing.

I'm using Blazor Preview 9 Server Side.

6 Replies

SU Saif Ur Rehman September 17, 2019 07:34 AM UTC

Hi Syncfusion,

Would you please take a moment to reply? I am looking forward to hearing from you soon.


RS Renjith Singh Rajendran Syncfusion Team September 17, 2019 08:53 AM UTC

Hi Saif, 

Thanks for contacting Syncfusion support. 

By default, Syncfusion Blazor Grid is responsive. Based on the size of viewport, the scrollbar will be rendered to show the exceeding columns. This is the default responsive behavior of Syncfusion Blazor Grid. So there is no need to add the bootstrap classes to make the Grid compact, as the Grid will be rendered based on the viewport size. 

And also we would suggest you the use the Syncfusion Blazor Grid’s bootstrap layout theme, if you want to display the Grid in bootstrap theme. Please use the below css in your application, 

[_Host.cshtml] 
 
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.2.50/bootstrap.css" rel="stylesheet" /> 


 
If we have misunderstood your query, kindly get back to us with the following details, 

  1. Share with us the detailed explanation of your complete requirement.
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



SU Saif Ur Rehman September 18, 2019 07:50 AM UTC

Okay, thanks. :)


RS Renjith Singh Rajendran Syncfusion Team September 19, 2019 09:00 AM UTC

Hi Saif, 

Thanks for your update. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



DL Dominic Lapointe May 7, 2020 01:12 AM UTC

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 });
    }

}


VN Vignesh Natarajan Syncfusion Team May 7, 2020 09:03 AM UTC

Hi Dominic,  
 
Greetings from Syncfusion support.  
 
Query: “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? 
 
From your query we suspect that you are trying to display grid lines in between rows and column and also to apply dark theme in grid. We suggest you to achieve your requirement using GridLines property of Grid to display lines in between the rows and column. Refer the below code example.  
 
<SfGrid TValue="JobListingModel" AllowSorting="true" AllowPaging="true" GridLines="GridLine.Both" Toolbar="Toolbaritems" Height="650" AllowReordering="true" AllowResizing="true" HtmlAttributes="@attr"> 
       . . . . ..  .. .  
   </SfGrid> 
 
Refer our API documentation for your reference 
 
 
And also we suggest you to refer highcontrast theme file instead of bootstrap to apply dark mode to Grid. refer the below code example and screenshot for your reference 
 
<head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>DataGrid</title>    <base rel='nofollow' href="~/" />    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />    <link rel='nofollow' href="css/site.css" rel="stylesheet" />    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/highcontrast.css" rel="stylesheet" /></head>
 
 
Output 
 
 
 
You can customize the highcontrast theme using our theme studio, kindly refer the below UG documentation for your reference 
 
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon