Width & Performance

[Clinton Smyth]

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

 

[Konstantin Dikov]

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:

• https://demos.telerik.com/kendo-ui/treelist/client-side-paging

Best Regards,
Konstantin Dikov
Progress Telerik

[Clinton Smyth]

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

 

[Konstantin Dikov]

Hello Clinton,

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

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/resizecolumn

Best Regards,
Konstantin Dikov
Progress Telerik

[Clinton Smyth]

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

Thanks

[Konstantin Dikov]

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

[Clinton Smyth]

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

[Konstantin Dikov]

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:

• https://dojo.telerik.com/oKAmiDUl/2

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

[Clinton Smyth]

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