This is a migrated thread and some comments may be shown as answers.

Width & Performance

8 Answers 63 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Clinton Smyth
Top achievements
Rank 1
Clinton Smyth asked on 31 Oct 2018, 11:36 PM

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

 

8 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 02 Nov 2018, 08:12 AM
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.
0
Clinton Smyth
Top achievements
Rank 1
answered on 02 Nov 2018, 06:27 PM

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

 

0
Konstantin Dikov
Telerik team
answered on 05 Nov 2018, 07:49 AM
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.
0
Clinton Smyth
Top achievements
Rank 1
answered on 14 Nov 2018, 07:40 PM

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

Thanks

0
Konstantin Dikov
Telerik team
answered on 16 Nov 2018, 12:45 PM
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.
0
Clinton Smyth
Top achievements
Rank 1
answered on 16 Nov 2018, 10:35 PM

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

0
Konstantin Dikov
Telerik team
answered on 19 Nov 2018, 03:19 PM
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.
0
Clinton Smyth
Top achievements
Rank 1
answered on 19 Nov 2018, 10:43 PM
Great, this is what I needed (had to do a few tweaks but it's working).
Tags
TreeList
Asked by
Clinton Smyth
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Clinton Smyth
Top achievements
Rank 1
Share this question
or