column expand when focus on cell

[Jose]

Hi,

Suppose If I have given fixed width for one column and overflow text will be hidden with ellipsis. I wanted to expand column to show full text when I focus on any cell of that particular column and when focus out it will back to old state(width). Could anyone please help me on this?

Thanks in Advance

[Preslav]

Hello Jose,

For the time being, the Grid does not provide this functionality out of the box.

To achieve a similar behavior, you could handle the change event of the Grid. In the event handler, save the current cell width and index in global variables. After that, use the autoFitColumn method to expand the column. On the next change event use these variables to restore the original width.

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-change
• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-autoFitColumn

For example, check my testing Dojo: 

• https://dojo.telerik.com/ODuBU

Regards,
Preslav
Progress Telerik

[Jose]

Hello Preslav,

Thank you so much for you suggestion. It helps me to implement the functionality.

Also I was trying to add some slide animation when it expand or collapse column using css property transition width for col element like transition:width .8s ease. Animation working fine on collapse but not on expand.

Do you have any suggestion on this.

Thanks again for your great help!

Regards,

Jose Abraham

[Preslav]

Hello Jose,

This might be achieved by using the resize function from my last reply and the "scrollWidth" property of the selected cell instead of the autoFitColumn method.

For example, check the modified Dojo:

• https://dojo.telerik.com/ODuBU/3

I hope this helps.


Regards,
Preslav
Progress Telerik

[Jose]

Hi Preslav,

scrollWidth property gives me only selected cell width expansion. and when I try to click any other cell in the same index it is not effecting because of if condition. So when I remove if condition and clicked same index cells, its keep on increasing.

Could you please see on this. Actually first post example suits my requirement and only thing is animation required like recent example.

Thank you very much for quick response.

 

[Jose]

Hello Preslav,

Is there any way to get autoFitColumn width? if yes, I think we can use resizeOldCol width as same autoFitColumn width and achieve the requirement.

Thanks again.

Jose Abraham

[Preslav]

Hi Jose,

I was not able to find a way to get the width from the autoFitColumn method. A possible approach, in this case, might be looping through the rows and saving the max cell scrollWidth and using it for the resizeOldCol function. For example:

for(var i = 0; i<rows.length; i++){
             var row = rows[i];
             var width = row.cells[cellIndex].scrollWidth;

             if(width>max){
               max = width;
             }
           }
           resizeOldCol(cellIndex, max);

Check the modified Dojo here: https://dojo.telerik.com/ODuBU/7 

Regards,
Preslav
Progress Telerik

[Jose]

Thank You so much Preslav. It works!!!