Grid with Text Wrap

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

5 Replies

VN Vignesh Natarajan Syncfusion Team July 5, 2018 04:23 PM UTC

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 


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 



DP David Price July 8, 2018 05:34 AM UTC

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.






VN Vignesh Natarajan Syncfusion Team July 9, 2018 12:15 PM UTC

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 



DP David Price July 10, 2018 06:51 AM UTC

Hi,

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


VN Vignesh Natarajan Syncfusion Team July 11, 2018 10:56 AM UTC

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 




Regards, 
Vignesh Natarajan 



Loader.
Up arrow icon