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.
Unfortunately, activation email could not send to your email. Please try again.

How can cell fit the text?

Thread ID:

Created:

Updated:

Platform:

Replies:

130826 Jun 6,2017 04:01 AM Jun 9,2017 12:22 AM JavaScript 5
loading
Tags: ejGrid
Luis Carlos
Asked On June 6, 2017 04:01 AM

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 [Syncfusion]
Replied On June 7, 2017 08:29 AM

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. 


Luis Carlos
Replied On June 7, 2017 08:53 AM

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.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 8, 2017 08:53 AM

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. 


Luis Carlos
Replied On June 8, 2017 11:04 AM

Thank you!! it was helpful!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 9, 2017 12:22 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;