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
close icon

How to change the font size, type, bold on a certain column

Hi team,

I need to change the font size and size on a certain column. I saw some solution on your forum using css but it affects all the column... is there is a way to set class on a specific column?


Best Regards,


Tyrone


3 Replies

MS Monisha Saravanan Syncfusion Team October 13, 2022 08:11 AM

Hi Tyrone,


Greetings from Syncfusion support.


Query: “I need to change the font size and size on a certain column. I saw some solution on your forum using css but it affects all the column... is there is a way to set class on a specific column?”


We have checked your query and we suspect that you need to change the font size for the particular column. If so we suggest you to achieve your requirement by using the CustomAttribute feature of DataGrid. Kindly check the attached code snippet and sample for your reference.


 

<SfGrid DataSource="@Orders" Height="315">

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID"  TextAlign="TextAlign.Right" Width="140"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City"  Width="100"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="100"></GridColumn>

    </GridColumns>

</SfGrid>

 

 

<style>

    .e-attr {

        font-size: 20px !important;

     

    }

</style>

 


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1796707900.zip


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

https://blazor.syncfusion.com/demos/datagrid/cell-formatting?theme=bootstrap4

https://blazor.syncfusion.com/documentation/datagrid/column-template


Please let us know if you have any concerns.


Regards,

Monisha



TY Tyrone October 18, 2022 11:58 PM

Thanks Monisha, It worked!!



MS Monisha Saravanan Syncfusion Team October 19, 2022 11:42 PM

Hi Tyrone,


Most Welcome.


We are glad to hear that the reported query has been resolved. Kindly get back to us if you have further queries. As always we will be happy to assist you.


Regards,

Monisha


Loader.
Live Chat Icon For mobile
Up arrow icon