column expand when focus on cell

8 posts, 1 answers
  1. Jose
    Jose avatar
    5 posts
    Member since:
    Nov 2014

    Posted 03 Oct Link to this post

    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

  2. Preslav
    Admin
    Preslav avatar
    229 posts

    Posted 03 Oct Link to this post

    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.
    For example, check my testing Dojo: 
    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jose
    Jose avatar
    5 posts
    Member since:
    Nov 2014

    Posted 05 Oct in reply to Preslav Link to this post

    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

  4. Preslav
    Admin
    Preslav avatar
    229 posts

    Posted 05 Oct Link to this post

    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:
    I hope this helps.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jose
    Jose avatar
    5 posts
    Member since:
    Nov 2014

    Posted 05 Oct in reply to Preslav Link to this post

    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.

     

  6. Jose
    Jose avatar
    5 posts
    Member since:
    Nov 2014

    Posted 05 Oct in reply to Jose Link to this post

    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

  7. Answer
    Preslav
    Admin
    Preslav avatar
    229 posts

    Posted 09 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Jose
    Jose avatar
    5 posts
    Member since:
    Nov 2014

    Posted 09 Oct in reply to Preslav Link to this post

    Thank You so much Preslav. It works!!!

Back to Top