How do I change the height of the grid header row?

[Nic Adams]

I have some columns that have long titles. I have been able to get the text to wrap but now the text is too tall for the header row. 

Is there a way to set the header row height to autosize? Failing that is there a way to make the header row taller?

TIA

Nic

[Sathyanarayanamoorthy Eswararao]

Hi Nic, 

Thanks for contacting Syncfusion support. 

Before we proceed with your query please confirm the following details. 

1. Do you want to set the height for the header based on the header content?
2. If you want the width of the column to be set automatically based on the header content or grid content then you can use allowResizeToFit property.
3. You have mentioned that you have achieved the text wrap in header cell. Can you explain what issue you are facing in the wrapped content of the header cell?
4. Provide the screenshot of your requirement.

Please refer below documentation. 

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

The provided details will help us to analyze the issue and provide the solution as soon as possible. 

Regards, 

Sathyanarayanamoorthy 

[Nic Adams]

Hi Sathyanarayanamoorthy ,

I would like the column headers to automatically resize to fir the content or failing that just to be able to set the height manually as the text will not change. My current issue is that my header looks like this:

Thanks

Nic

[Sathyanarayanamoorthy Eswararao]

Hi Nic, 

Query: I would like the column headers to automatically resize to fir the content 

To achieve this requirement we suggest you to use the allowResizeToFit property of ejGrid as explained in the previous update. When allowResizeToFit is enabled then the width of the header cell is adjusted based on the content or header text. 

In the provided screenshot we found that the header content is getting hidden. We are unable to reproduce this issue on our end. We have prepared a sample with the same requirement by enabling the allowTextWrap property to achieve your requirement which can be downloaded from the below location. 

Sample: https://www.syncfusion.com/downloads/support/forum/137381/ze/TextWrap741021804.zip  

Refer the below code example and the screenshot. 

    <ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="True" AllowPaging="True" AllowTextWrap="True">

            <Columns> 

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="90" /> 

                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" /> 

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="100" /> 

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="90" Format="{0:C}" /> 

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" /> 

                <ej:Column Field="ShipName" HeaderText="Ship Name" Width="90" /> 

                <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="100" Format="{0:MM/dd/yyyy}" /> 

                <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="110" /> 

                <ej:Column Field="ShipPostalCode" HeaderText="Ship Postal Code" TextAlign="Right" Width="110" /> 

                <ej:Column Field="Verified" HeaderText="Verified" Width="100" /> 

            </Columns> 

            <ScrollSettings Height="300" Width="980" ></ScrollSettings> 

        </ej:Grid> 

 

If you still face any issue in achieving your requirement please get back to us with the following details. 

1. Essential studio versions.
2. Share the code example of Grid.
3. If possible please try to reproduce the mentioned issue in attached sample.

Please refer the below documentation. 

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

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

Regards, 

Sathyanarayanamoorthy 

[Nic Adams]

Hi Sathyanarayanamoorthy ,

Thanks for the sample - I can confirm that in your sample the header row is automatically resizing. I think this may be because your sample has a databound grid whereas I do not? I've attached a simple sample that shows the problem.

TIA

Nic

Attachment: TestSyncfusionGridAndDialog_e187aeb3.zip

[Sathyanarayanamoorthy Eswararao]

Hi Nic, 

We are able to produce the issue with the provided sample. We have logged a defect report for the issue “The header text is getting hidden when Wrap mode is set as header and width is given for column” and the fix for this issue will be included in the release Volume 2,SP1 2018 which is expected to be rolled out at the end of June 2018. Until then we suggest you to use the workaround given in the below example. 

Refer the below code example 

     

<style> 

        .e-grid.wrap .e-columnheader .e-headercelldiv { 

            margin-bottom: 2px; 

            margin-top: 0px; 

        } 

</style> 

 

 <ej:Grid runat='server' DataSourceID="UsersDS" CssClass="wrap" AllowTextWrap="true" AllowSelection="false" > 

        <TextWrapSettings WrapMode="Header" /> 

        <ClientSideEvents RecordClick="recordClick" /> 

        <EditSettings AllowEditing="false"></EditSettings> 

        <Columns> 

            <ej:Column Field="ClientName" HeaderText 

We have modified the provided sample with the mentioned changes which can be downloaded from the below location. 

Sample: https://www.syncfusion.com/downloads/support/forum/137381/ze/TestSyncfusionGridAndDialog_e187aeb31874789129.zip  

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy 

[Nic Adams]

Thank you - the work around does the trick.

Nic

[Sathyanarayanamoorthy Eswararao]

Hi Nic, 

Thanks for the update. 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy