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

Resize Grid columns too see the whole text

Hi Support:

I have the following grid definition.  Some columns have value that are greater than the column visible width.

How can I see the whole content of a cell.  I tried resizing the column and clicking the column header, etc with any luck.


<ej-grid id="grid" datasource="Model.Products"
         allow-scrolling="true"
         grid-lines="Horizontal"
         allow-selection="false"
         allow-resize-to-fit="true"
         allow-paging="true"
         enable-row-hover="false"
         is-responsive="false"
         databound="databound" width=@("auto")>
    <e-scroll-settings frozen-columns="1"></e-scroll-settings>
    <e-columns>

        <e-column field="Name" header-text="Name"></e-column>
        <e-column field="Desc" header-text="Description"></e-column>
        <e-column field="Qty" header-text="Qty"></e-column>
        <e-column field="Brand" header-text="Brand"></e-column>
       <e-column field="Model" header-text="Model"></e-column>
       
    </e-columns>


Thanks in advanced

David


3 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 8, 2017 09:05 AM UTC

Hi David, 

Thanks for contacting syncfusion support. 

We have checked your query and Syncfusion Grid has the solution for “the content overflows its column width and to set the content fit into the cell”. In our Grid, we have the property known as “allow-text-wrap” which displays the text to be fit into the cell and  you can view the whole content of the cell. You can also set the different modes of autowrap using wrap-mode property of e-text-wrap-settings. By using this, you can also set wrapMode for Header, Content and Both.  Please refer to the Documentation and code example:- 

<ej-grid id="FlatGrid" allow-paging="true" allow-text-wrap="true" datasource="ViewBag.DataSource"> 
  <e-text-wrap-settings wrap-mode="Both"></e-text-wrap-settings> 
    <e-columns> 
        <e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70"></e-column> 
        <e-column field="CustomerID" header-text="Customer ID" width="80" ></e-column> 
        <e-column field="EmployeeID" header-text="Employee ID" width="80 ></e-column> 
        <e-column field="ShipCity" header-text="Ship City" width="80"></e-column> 
    </e-columns> 
</ej-grid> 



Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 





DS dsapo July 10, 2017 08:38 PM UTC

Thanks Farveen for the help.

Regards,

David




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 12, 2017 04:51 PM UTC

Hi David, 
  
Thanks for your update. We are happy to hear that your reported problem was resolved. 
  
Please get back to us if you need any further assistance. 
  
Regards, 
Farveen sulthana T. 


Loader.
Live Chat Icon For mobile
Up arrow icon