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

Applying subscripts to the data grid


<e-treegrid-columnfield="MA_TMP" headerText="M.A TMP.(TM,)" visible="true" width="110" headerTextAlign="Center" defaultValue="@empty"></e-treegrid-column>

I want to subscript some of the names in the columns shown in the image.

The name of the sub-column was applied like the following code, but the name of the top column is not easy to apply.

Is there a service that changes to "subscript"?

Syncfusion.EJ2.Grids.GridColumn { Field ="PC_AES"       , Width ="100", HeaderText
="A<sub>es</sub> (m²)"    ,
AllowEditing = false, HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right , DisableHtmlEncode = false},

3 Replies 1 reply marked as answer

PS Pon Selva Jeganathan Syncfusion Team October 21, 2022 10:06 PM

Hi TaeWook Kang,

Thanks for contacting syncfusion forum.

Query: Is there a service that changes to "subscript"?

We achieved your requirement by using the “sub” tag and disableHtmlEncode property of the treegrid.

Please refer to the below code example,

<ejs-treegrid id="CalGrid" …>



        <e-treegrid-column disableHtmlEncode="false"  headerText="A<sub>es</sub>(m²)" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "ID", Width = "110", HeaderText="A<sub>es</sub> (m²)", DisableHtmlEncode=false, TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right  },

                                                                                                          new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Name", Width = "220", HeaderText = "Order Name",  TextAlign= Syncfusion.EJ2.Grids.TextAlign.Left },

                                                                                                          new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "OrderDate", Width = "120", HeaderText = "Order Date",  TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right, Format="yMd" }} )">



Please refer to the below screenshot,

Please refer to the below API documentation,


Kindly get back to us for further assistance.

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Marked as answer

TK TaeWook Kang October 24, 2022 01:26 AM

Thank you for your good reply.

Thanks to you, I solved it.


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 24, 2022 01:59 AM

Hi TaeWook Kang,

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you further.


Farveen sulthana T

Live Chat Icon For mobile
Up arrow icon