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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147536 Sep 14,2019 09:39 PM UTC May 7,2020 09:03 AM UTC Blazor 6
loading
Tags: Grid
Saif Ur Rehman
Asked On September 14, 2019 09:39 PM UTC

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.

Saif Ur Rehman
Replied On 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.

Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


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

Okay, thanks. :)

Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


Dominic Lapointe
Replied On 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 });
    }

}

Vignesh Natarajan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon