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
  1. Home
  2. Forum
  3. jQuery
  4. How can cell fit the text?

How can cell fit the text?

Hi.

In the next image we can see that the third cell is not fitting the text. How can cell fit the text?


I'll be awating for your reply, thank you in advance.

Best regards,
Luis Carlos Díaz.



5 Replies
MS Mani Sankar Durai Syncfusion Team June 7, 2017 12:29 PM UTC

Hi Luis, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we can achieve your requirement using clipMode property of columns in grid. 
Please refer the below code example. 
   
    <script type="text/javascript"> 
        $(function () { 
                     $("#Grid").ejGrid({                        
                     ... 
                columns: [ 
                                  ... 
                         { field: "ShipCity", headerText: "ShipCity", width: 20, clipMode: ej.Grid.ClipMode.Ellipsis, textAlign: ej.TextAlign.Right }, 
                ] 
            }); 
        }); 
    </script> 
 
In the above code example we have cutoff the particular column using clipMode property of columns in grid by setting as ellipsis. 

We have also prepared a sample that can be downloaded from the below link. 

Also please refer the documentation and API link regarding this. 


Note: If the cell value contains a long text that is not fit into the grid column cell, the clipMode property is used. Using this the cell value will be displayed with ellipsis or with clipped content when the text overflows inside a column cell. 
 
If you not satisfy with clipMode property you can use allowTextWrap property in grid which helps to wrap the text when the cell content overflows. 
Refer the documentation link. 
 
Please let us know if you need assistance. 

Regards, 
Manisankar Durai. 


LC Luis Carlos replied to Mani Sankar Durai June 7, 2017 12:53 PM UTC

Hi Luis, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we can achieve your requirement using clipMode property of columns in grid. 
Please refer the below code example. 
   
    <script type="text/javascript"> 
        $(function () { 
                     $("#Grid").ejGrid({                        
                     ... 
                columns: [ 
                                  ... 
                         { field: "ShipCity", headerText: "ShipCity", width: 20, clipMode: ej.Grid.ClipMode.Ellipsis, textAlign: ej.TextAlign.Right }, 
                ] 
            }); 
        }); 
    </script> 
 
In the above code example we have cutoff the particular column using clipMode property of columns in grid by setting as ellipsis. 

We have also prepared a sample that can be downloaded from the below link. 

Also please refer the documentation and API link regarding this. 


Note: If the cell value contains a long text that is not fit into the grid column cell, the clipMode property is used. Using this the cell value will be displayed with ellipsis or with clipped content when the text overflows inside a column cell. 
 
If you not satisfy with clipMode property you can use allowTextWrap property in grid which helps to wrap the text when the cell content overflows. 
Refer the documentation link. 
 
Please let us know if you need assistance. 

Regards, 
Manisankar Durai. 


Hi again.

I've recently test your answer,  I've used clipMode "Ellipsis" and "EllipsisWithTooltip", however, as you can see in the next image, it doesn't show any tooltip in order to see the entire cell value.   



Anyway, In my point of view "allowTextWrap" works perfectly. Thank you very much, I really appreciate your help.

Best regards, 
Luis Carlos Díaz.

TS Thavasianand Sankaranarayanan Syncfusion Team June 8, 2017 12:53 PM UTC

Hi Luis, 

Thanks for the update. 

We have analyzed your query and we suspect that you want use the ellipsis clipMode with tooltip. So, we suggest you to enable the tooltip property of that column then only we can have the tooltip in clipMode. 

Refer the below code example. 


<script type="text/javascript">  
        $(function () {  
                     $("#Grid").ejGrid({                         
                     ...  
                columns: [  
                                  ...  
                         { field: "ShipCity", headerText: "ShipCity", width: 20, tooltip: "{{:value}}” , clipMode: ej.Grid.ClipMode.EllipsisWithTooltip,textAlign: ej.TextAlign.Right },  
                ]  
            });  
        });  
    </script>  



We have prepared a JsPlayground sample in the following link. 


Refer the help documentation. 


If you still face the same issue then please get back to us. 

Regards, 
Thavasianand S. 


LC Luis Carlos June 8, 2017 03:04 PM UTC

Thank you!! it was helpful!

TS Thavasianand Sankaranarayanan Syncfusion Team June 9, 2017 04:22 AM UTC

Hi Luis, 

We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  

Regards, 
Thavasianand S. 


Loader.
Up arrow icon