Vertical Header Width of Column

[indrani Gajjarapu]

Hi,

I attached a script and the grid image with vertical headers.

I want to set the width of each column according to the cell content.

Can you give me a workaround for this please.

Thank you

[Mani Sankar Durai]

Hi Indrani, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suggest you to enable AllowResizeToFit property which helps to set the column width inbuilt based on its cell content. So it is not necessary to set the width for the columns explicitly.  

Refer the below code example. 

[GridFeatures.cshtml] 

@(Html.EJ().Grid<MvcApplication14.OrdersView>("FlatGrid") 

                                    .Datasource((IEnumerable<object>)ViewBag.dataSource) 

                            .AllowPaging() 

                             .AllowResizeToFit()       //set the column width based on its content 

                          .Columns(col => 

        { 

                           ... 

        }) 

    ) 

Also you have mentioned that you are using like vertical headers. 

So please refer the following KB and documentation link. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:allowresizetofit 

Kb Link: https://www.syncfusion.com/kb/2634/how-to-change-the-orientation-of-header-text 

If you face any difficulties please share the following details, 

1.       Share the screenshot/video of the issue you have faced. 

2.       Share the full grid code. 

3.       Share the sample with issue reproducing. 

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai 

[indrani Gajjarapu]

Hi,

Thanks for your reply.

"AllowResizetoFit" works to some extent. However as mentioned in the documentation, the column width is set automatically based on content or header text text which is large. But my requirement is to set width only by content but not header text.

Please find the picture attached as an example.

Regards,

Indrani

Attachment: pic_3d60cb34.zip

[Prasanna Kumar Viswanathan]

Hi Indrani, 

If you need to set column width based on content only, enable the AllowTextWrap property and wrapMode as header in textWrapSettings API of ejGrid. The allowTextWrap  property is used to wrap the content to the next line if the content exceeds the column. In this when we set the wrapMode as header then the auto wrap will be set only for header. 

Find the code example:  

@(Html.EJ().Grid<Document>("HierarchyGrid") 

   .Datasource((IEnumerable<object>)ViewBag.datasource) 

   .AllowSorting() 

   .AllowPaging() 

   .AllowResizeToFit() 

   .AllowTextWrap() 

   .TextWrapSettings(e => e.WrapMode(WrapMode.Header)) 

   .IsResponsive() 

   .Columns(col => 

    { 

        -------------------- 

) 

Refer to the Help document. 

https://help.syncfusion.com/api/js/ejgrid#members:allowtextwrap 

https://help.syncfusion.com/api/js/ejgrid#members:textwrapsettings 

Regards, 

Prasanna Kumar N.S.V

[indrani Gajjarapu]

Hi Prasanna Kumar,

Thanks for your reply.

I did apply those settings but they didn't completely solve the issue.

I have attached a sample project below.

Thank you.

Regards,

Indrani

Attachment: ColumnWidth_d2ea486b.7z

[Mani Sankar Durai]

Hi Indrani, 

 

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  

 

Link: https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Regards, 

Manisankar Durai.