How can cell fit the text?

[Luis Carlos]

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.

[Mani Sankar Durai]

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. 

Link: http://jsplayground.syncfusion.com/eevcqqce 

Also please refer the documentation and API link regarding this. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-clipmode 

Documentation link: https://help.syncfusion.com/js/grid/cell#clipmode 

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. 

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

UG documentation link: https://help.syncfusion.com/js/grid/cell#auto-wrap 

 

Please let us know if you need assistance. 

Regards, 

Manisankar Durai. 

[Luis Carlos]

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. 

Link: http://jsplayground.syncfusion.com/eevcqqce 

Also please refer the documentation and API link regarding this. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-clipmode 

Documentation link: https://help.syncfusion.com/js/grid/cell#clipmode 

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. 

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

UG documentation link: https://help.syncfusion.com/js/grid/cell#auto-wrap 

 

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.

[Thavasianand Sankaranarayanan]

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. 

JsPlayground sample: http://jsplayground.syncfusion.com/vsy1srns 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-tooltip  

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

Regards, 

Thavasianand S. 

[Luis Carlos]

Thank you!! it was helpful!

[Thavasianand Sankaranarayanan]

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.