I'm trying to dynamically populate the dropdown list on the grid filter popup. A sample of my approach so far.
This seems to be working to update the list just fine. However, the height of the dropdown is getting messed up after subsequent updates. The first time it opens, a scrollbar is correctly shown. Each time thereafter, the height is 'auto' and no longer shows a scrollbar. I believe I've isolated the cause down to the popup deliberately calculating height on first open but never again after.
Changing the .one() call to a .bind() fixes the scrolling issue but I'd like a solution that doesn't involve manually tweaking internal Kendo UI code. Is there a better workaround that will force the popup to recalculate its height on open?
filterMenuInit: function(e){
if(e.field === "City"){
e.container.data("kendoPopup").bind("open", function() {
var ddl = e.container.find("input").data("kendoDropDownList");
var ds = ddl.dataSource.data();
ds.push('Another City');
ddl.setDataSource(new kendo.data.DataSource({
data: ds
}));
});
}
}This seems to be working to update the list just fine. However, the height of the dropdown is getting messed up after subsequent updates. The first time it opens, a scrollbar is correctly shown. Each time thereafter, the height is 'auto' and no longer shows a scrollbar. I believe I've isolated the cause down to the popup deliberately calculating height on first open but never again after.
Changing the .one() call to a .bind() fixes the scrolling issue but I'd like a solution that doesn't involve manually tweaking internal Kendo UI code. Is there a better workaround that will force the popup to recalculate its height on open?
3 Answers, 1 is accepted
0
Scott
Top achievements
Rank 1
Rank 1
answered on 23 Feb 2015, 09:26 PM
So it looks like the _height() method is accessible, even though I wasn't seeing it in the Chrome dev tools when I examined the dropdownlist object. I added the following hack to the filtermenuinit handler and it seems to have done the job.
If anyone knows a more legit way to handle this it would be much appreciated.
ddl.bind('open', function () {
ddl['_height'](ds.length);
});If anyone knows a more legit way to handle this it would be much appreciated.
0
Hi Scott,
A simpler approach would be to use the add or insert methods of the DropDownList's DataSource, as shown here. Keep in mind that since this happens in the popup's open event, the "test" item will be added as many times as the menu is opened.
Regards,
Alexander Popov
Telerik
A simpler approach would be to use the add or insert methods of the DropDownList's DataSource, as shown here. Keep in mind that since this happens in the popup's open event, the "test" item will be added as many times as the menu is opened.
Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 1
Rank 1
answered on 27 Feb 2015, 10:05 PM
Using add certainly works to get additional items into the list, but my example was a bit oversimplified for what I'm actually doing in my project. Things can be added to and removed from my list, so simply recreating the datasource seemed to be the easiest way to handle that.
Adding things to the list wasn't so much my problem though as handling dropdown height afterwards. The dropdown in your example still manifests the auto-sizing issue which I described. The first time the dropdown is opened, it gets a height of 200 set and a scrollbar correctly shows to handle the overflow. The second time it's opened, the height is set to 'auto' and there's no scrollbar. For really long lists it gets to be a problem.
The hack I did to force the height recalculation on each open fixed that. I was mainly curious if there was a supported way of accomplishing the same thing without having to resort to calling internal methods (Ex. _height()).
Adding things to the list wasn't so much my problem though as handling dropdown height afterwards. The dropdown in your example still manifests the auto-sizing issue which I described. The first time the dropdown is opened, it gets a height of 200 set and a scrollbar correctly shows to handle the overflow. The second time it's opened, the height is set to 'auto' and there's no scrollbar. For really long lists it gets to be a problem.
The hack I did to force the height recalculation on each open fixed that. I was mainly curious if there was a supported way of accomplishing the same thing without having to resort to calling internal methods (Ex. _height()).