Grid with Text Wrap

[David Price]

Hello,

I have AllowTextWrap = true 

so when my page loads it looks like this

I then make the Employee.0 column smaller  and the column height enlarges

I now make the column width back to how it was and I'm expecting the column height to go back to how it was. But it remains very large

How can I make the column height dynamically go back to how it was? Since it stays very large.

Attachment: Test2.aspx_3d6f5eed.zip

[Vignesh Natarajan]

Hi David, 

Thanks for using Syncfusion products. 

According to your query you are facing issue while resizing the Employee.0 column. We have prepared a sample similar to your screenshot. We are not able to reproduce the reported issue at our end.  

When one column is resized, adjacent column width is also adjusted to match with total Grid width. So we suspect that while resizing the Employee.0 column some other column hidden inside the scrollbar might have more content. So row height is increased.         

Kindly download the sample from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/138498/7z/SyncfusionASPNETApplication18-448167681  

Note: we are not able to download your attachment. On clicking the attachment we are redirected to Syncfusion Home page. 

If the issue still occur, please get back to us with following details 

1.       Share the full grid rendering code. 

2.       Share the screenshot for script error in console window (if any). 

3.       Share the exact replication procedure of the issue. 

4.       If possible try to reproduce the reported issue in provided sample 

5.       Share the essential studio version (XX.X.X.XX). 

Regards, 

Vignesh Natarajan 

[David Price]

Hello,

Using your example please make these changes to the Grid

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

         <ScrollSettings  FrozenColumns="1" /> 

         <Columns>

          <ej:Column Field="OrderID" Width="180" AllowEditing="false"   HeaderText="OrderID"    />

          <ej:Column Field="CustomerID" Width="180" AllowEditing="false"    HeaderText="CustomerID"    />

          <ej:Column Field="EmployeeID" Width="180" AllowEditing="false"    HeaderText="EmployeeID"    />

          <ej:Column Field="Employee.0" Width="200" AllowEditing="false"   HeaderText="Employee.0"    />

          <ej:Column Field="Freight" Width="180" AllowEditing="false"   HeaderText="Freight"    />

          <ej:Column Field="OrderDate" Width="180" AllowEditing="false"   HeaderText="OrderDate"    />

         </Columns>

        </ej:Grid>

On load, the page looks like this

Now I make the Employee.0 column smaller. As you can see the column height grows

And now wider and I expect the column height to go back to how it was?

As you can see the column height is fixed and will only grow wider and will not automatically go back smaller.

[Vignesh Natarajan]

Hi David 

We can reproduce the mentioned issue in our sample. So, we have confirmed that the issue “Text wrapped column is not properly resized” is a defect and we have logged a defect report. The fix for this issue will be included in our upcoming release 2018 Volume 2 Service Pack 1  which is expected to be rolled out in the month of July 2018. 

 

Till then we appreciate your patience. 

Regards, 

Vignesh Natarajan 

[David Price]

Hi,

This is like the third bug I have found in your Grid control. Is there a workaround?

[Vignesh Natarajan]

Hi David, 

Sorry for the inconvenience caused. 

As per your request we have prepared a workaround for the issue “Text wrapped column is not properly resized when frozenRows is enabled” using rowHeightRefresh() method and Resized event of the Grid.  

Refer the below code snippet 

  <ej:Grid ID="OrdersGrid"  AllowTextWrap="true" AllowScrolling="true" AllowResizing="true" runat="server"> 

.               .              .                .             .  

        

         </Columns>  

         <ClientSideEvents Resized="resize" />         

        </ej:Grid> 

 

                

    </div> 

    <script type="text/javascript"> 

        function resize(args) { 

           var g = $("#MainContent_OrdersGrid").ejGrid("instance"); 

            $(g.getRows()[0]).height(0); 

            $(g.getRows()[1]).height(0); 

            g.rowHeightRefresh(); 

        } 

    </script> 

 

As informed earlier, The issue “Text wrapped column is not properly resized when frozenRows is enabled” will be fixed and fix will be included in our upcoming release 2018 Volume 2 Service pack 1 which is expected to be rolled out by the month of July 2018 

Refer our help documentation for your reference 

https://help.syncfusion.com/api/js/ejgrid#methods:getrows  

https://help.syncfusion.com/api/js/ejgrid#methods:rowheightrefresh  

https://help.syncfusion.com/api/js/ejgrid#events:resized   

Regards, 

Vignesh Natarajan