Width & Performance

9 posts, 0 answers
  1. Clinton Smyth
    Clinton Smyth avatar
    72 posts
    Member since:
    Apr 2007

    Posted 31 Oct 2018 Link to this post

    Hi

    1. Is there a method to dynamically set the width of a column?  I've used autoFitColumn but that's not what I need. Ideally I'd like to have the column width small (say 2-5 characters wide) and auto expand when you hover with the mouse. I don't see a .width(x) method (like kendoGrid has) but perhaps there's a way with jQuery?

    2. Do you have any performance tips? After the tree has more than 200 or so rows, which for us is very small, it becomes very slow. I'm dynamically loading the content as the user expands the tree which helps a lot but they may want to expand the whole tree. Is there a feasible way to view a tree of 4000 or 5000 rows? If TreeList can't handle that volume, do you have any work arounds you'd suggest?

     

    Thanks

    Chris

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 02 Nov 2018 Link to this post

    Hello Clinton,

    Regarding the first question, there is no built-in functionality that could be used for changing the width of the columns on hover, but you could try to handle the mouseover event and manually manipulate the DOM.

    As for the second question, the only optimization that could be used is the newly introduced client-side Paging functionality:

    Best Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Clinton Smyth
    Clinton Smyth avatar
    72 posts
    Member since:
    Apr 2007

    Posted 02 Nov 2018 in reply to Konstantin Dikov Link to this post

    Hi Konstantin

    Thanks for your reply. The mouseover shouldn't be a big deal. I tried for a while to set the width using jQuery but without success. Do you have any example code that can do this? It's surprising you have the autoFitColumn feature but no setWidth.

    I'll take a look at the paging .. I'm not sure if it will work well for our use case.

    Thanks

     

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 05 Nov 2018 Link to this post

    Hello Clinton,

    The Grid's API has "resizeColumn" method that you could use for changing the width:

    Best Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Clinton Smyth
    Clinton Smyth avatar
    72 posts
    Member since:
    Apr 2007

    Posted 14 Nov 2018 in reply to Konstantin Dikov Link to this post

    I can see this for the grid but not for the kendoTreeList. Do you have some jQuery that can do this?

    Thanks

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 16 Nov 2018 Link to this post

    Hello Clinton,

    Please excuse me for the mistake in my previous post. The resizeColumn method is available for the Grid widget and it is not available in the TreeList API. For resizing the TreeList column with the current implementation of the widget, you could manually change the "col' elements "width" values in both TABLE elements of the TreeList (the header and the data container).

    Once again, please excuse me for the mistake in the last reply.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Clinton Smyth
    Clinton Smyth avatar
    72 posts
    Member since:
    Apr 2007

    Posted 16 Nov 2018 in reply to Konstantin Dikov Link to this post

    Hi Konstantin 

    No problem about the misunderstanding. I've looked around and don't see col elements on either the kendo widget or in jQuery.

    The closest I can find on the widget is $("#jsTreeList").data("kendoTreeList").columns[3].width but this is no doubt just the config and doesn't result in any change on the screen.

    Please could you post the code that changes the width.

    Thanks

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 19 Nov 2018 Link to this post

    Hello Clinton,

    For your convenience, I have created a dojo example with a method that should resize the TreeList columns with 3 parameters: the TreeList instance, the index of the column and the new width:
    var treeList = $("#theTreeListID").data("kendoTreeList");
    resizeTreeListColumn(treeList, 3, 311);
                
    function resizeTreeListColumn(treeList, index, width){
        var colgroups = treeList.element.find("colgroup");
        colgroups.each(function(){
           $(this).find("col").eq(index).css("width", width);
        })
    }

    Hope this helps.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Clinton Smyth
    Clinton Smyth avatar
    72 posts
    Member since:
    Apr 2007

    Posted 19 Nov 2018 in reply to Konstantin Dikov Link to this post

    Great, this is what I needed (had to do a few tweaks but it's working).
Back to Top