Kendo UI Grid Resizable gone after hiding detail expand column

9 posts, 0 answers
  1. Roy
    Roy avatar
    5 posts
    Member since:
    Aug 2011

    Posted 21 Dec 2016 Link to this post

    After hiding the Detail expand column the columns are no longer resizable, they do not even show the resize mouse over.

    This is all it takes to break it:

     dataBound: function(e){                       
                      $("#grid").find(".k-hierarchy-cell, .k-hierarchy-col").hide();

    }

    If instead of hiding the columns I set their width to 1px it will work. I was hoping for a better solution to hiding the column and still allow the columns to be resized

    here is the hacky working solution

                    var cssObj = {};
                    cssObj.width = "0.5px";
                      var columns = $("#grid").find(".k-hierarchy-cell, .k-hierarchy-col");
                    columns.css(cssObj);
                    columns.children().hide();

     

    here is a dojo representing the problem.

     

    http://dojo.telerik.com/@Delta/azaYU

     

  2. Dan
    Dan avatar
    12 posts
    Member since:
    Feb 2016

    Posted 21 Dec 2016 in reply to Roy Link to this post

    Hello Roy,

    If I understand correctly, you just want to hide the hierarchy column.

    I commented out the dataInit portion and it seems to work how you want it to.

    Here is the edited dojo:  http://dojo.telerik.com/Ifoye

    Dan

  3. Roy
    Roy avatar
    5 posts
    Member since:
    Aug 2011

    Posted 21 Dec 2016 in reply to Dan Link to this post

    So in my live environment I am still using the detail information but I am opening it with a different approach. So simply disabling the detail information is not going to solve my problem. The dojo is just the bare minimum of what we are doing in order to replicate the issue.
  4. Dan
    Dan avatar
    12 posts
    Member since:
    Feb 2016

    Posted 21 Dec 2016 in reply to Roy Link to this post

    Could you create a more elaborate example of how you expand the detail row programatically?

    It seems to me that there is another issue with your example and expanding columns.

    If you click on Expand First Row button in this example

    http://dojo.telerik.com/Ifoye/2

    You can see that the row resizes unfavorably.

  5. Roy
    Roy avatar
    5 posts
    Member since:
    Aug 2011

    Posted 21 Dec 2016 in reply to Dan Link to this post

    Can you explain how this is relevant? My actual implementation works fine and everything looks good. the only problem is that the Resizable column option has disappeared because of hiding the detail column.

    But I am doing the exact same things that your dojo is doing. the problem with this dojo is the width being hard coded in the template. remove that and it works... kinda. But again I do not think this is related to the issue.

  6. Dan
    Dan avatar
    12 posts
    Member since:
    Feb 2016

    Posted 21 Dec 2016 in reply to Roy Link to this post

    It might not be relevant to your issue.

    What I was saying in my last post is that if you use the implementation in your posted dojo:
    http://dojo.telerik.com/@Delta/azaYU
    Expanding a column will resize the content in a strange way (see attachment).
    Thus, leading me to believe that either handled this or you are not using detail row.

    Anyway, I noticed that there is a k-resize-handle div which basically shows the little resize icon. When you hover between the columns, an event seems to set the left amount and display style (from none to block) of it. Removing the detail column seems to affect this event, making it compute the wrong left value.

    I don't think hiding the detail column but still using the detail row is a supported feature by kendo which is why you'd have to use this hacky solution. But I'm not a kendo developer, just trying to help.

    Dan

  7. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 23 Dec 2016 Link to this post

    Hello Roy,

    I can suggest instead hiding the column to remove it, this will not break the resizing of the columns. Also, you can leave the last column without a width so it can take the empty space:

    http://dojo.telerik.com/iWITe

    I noticed that there are additional specifications of the application which are not present here.

    If removing it is not an option, could you please send an example closer to the desired end results, so we can make a suggestion considering all of the requirements?

    Regards,
    Stefan
    Telerik by Progress
    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.
  8. tamar eldad
    tamar eldad avatar
    3 posts
    Member since:
    May 2010

    Posted 13 Jun 2017 in reply to Stefan Link to this post

    Hi Stefan,

    Your fix does not enable dynamic expand/collapse of rows.

    I need to:

    1. hide the expand arrow and column
    2. dynamically expand/collapse rows when needed (similar to $('#grid').data('kendoGrid').expandRow(...))
    3. allow column resizing

    How can I achieve this?

    Thanks

  9. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 14 Jun 2017 Link to this post

    Hello Tamar,

    This is expected because, behind the scene, the expandRow method is just programmatically clicking the expand icon for the passed row. And when the icons are removed, the method will not work as expected.

    In this scenario I can suggest the workaround provided in the thread:

    http://dojo.telerik.com/iWITe/8

    Regards,
    Stefan
    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.
Back to Top