Dropdown width does not scale when using %

I am extending this one, since there is another issue that seems related to above and also applies to ComboBox and DropdownList controls. The issue is extremely narrow dropdown widths when replacing content via ajax. I am adding this issue here because it also only happens when overriding Kendo's default width and using %s. In other words, when testing the same markup, specifying a fixed width seems to work fine. My problem is this is a fluid design so that is not acceptable. 

Similar in concept to this thread, I load my content via ajax so needing to remove all the artifacts of the Kendo controls is key. I believe I am already doing that based on the info linked in that thread and also by inspecting the DOM ensuring everything is removed. But it would seem I am missing something because the dropdown widths are correct on the first render. It is only subsequent content loads that are jacked. Providing a demo of this specific behavior is a bit more complicated to do.

Any help here?

Thanks,
Mike 

Hi Mike,

Actually the ComboBox and DropDownList are able to change their width if it is set in percent, and this is visible in your jsFiddle demo as well.

However, this behavior is not supported out-of-the-box due to another reason, namely, the dropdown width is calculated only once, when it is opened for the first time. You can use the open event to adjust the width every time.

I am afraid I did not undestand your second question, please clarify.

All the best,
Dimo
the Telerik team

Dimo, I am not sure I understand what you are saying. You first say that the controls do support this behavior and is evident in my demo and then you next say it is not supported out of the box?? I assume you mean the control input itself does scale and can be seen in the demo. And that is true - no issue there. It is the dropdown list/menu that is the issue which is what I think you are addressing in your second statement.

So I will need to do the calc myself, correct? I assume I would just snag the width then of the wrapper and set the list DIV, on the open event?

As for my second issue, refer to the thread I linked. The concept is the same where there are some residual issues when loading the content dynamically with AJAX, in a one-page application, after certain Kendo controls have been previously loaded (due to the fact Kendo loads stuff directly to the BODY and possibly elsewhere). 

So again, when the widths are declared in %s, the dropdown list/menu gets calculated to something like 45px in my case (when the control wrapper is over 200px), when I remove the previous form content and replace with new content containing Keno dropdowns and combos. And the issue only presents when both are true: width is in % and after the initial content load. In other words, fixed widths behave as expected and the first load with % width has the list portion calculating correctly.

Let me know if that doesn't make it clearer. It would be a quite a few steps to get a working demo of this scenario so hopefully you can get an idea from this. Since all of this works the first time but not after a reload/replace of the content, I am assuming it is similar to the issue in the thread I linked and there is some proper way of disposing or removing the initial dropdown/combo I am missing, to get the new control's list to calc right.

Thanks,
Mike

Hello Michael,

What I meant to say is that the widget (input) wrappers on the page are able to resize, but the behavior is not supported, because the dropdowns do not resize automatically. You can try calculating the dropdowns' widths each time they are opened.

Regarding the second issue, I will appreciate a runnable example which I can inspect locally. Thanks.

All the best,
Dimo
the Telerik team

Understood on the first issue, thanks.

With the second issue, before I spend a bit of time trying to demo the behavior, I am looking for general guidance first. Does Telerik Kendo have any recommended approaches to disposing or removing these control types in the ajax loading/replacing scenario, like you did in the thread I linked about the DatePicker? There are some residual artifacts clearly being left over, so some guidance on properly removing the controls and their artifacts would be good.  

This is a generic inquiry. I guess that is what I am looking for at the moment, as a place to start.

Thanks,
Mike

Hello Mike,

In general, there are two things to be done when disposing elements on the page:

+ detach the event handlers that are hooked up to these elements (if any)
+ remove the nodes from the DOM

Greetings,
Dimo
the Telerik team

OK, I guess that was a tad bit more general than I was expecting. I am aware of that to the extent I am already trying to do that as best as I have been able to discover. The problem is I didn't explicitly $.add and $.on the stuff (as that is Kendo code), so using $.remove and $.off requires me knowing what to put into the selector.

That has been my question - what to put into the selector. Similar to the issue discussed in that linked thread, it turned out for the DatePicker to require several removes with one (shared calendar) actually being moved to the BODY. So my question is generic but still specific to these two control types. I am looking for something like the answer Kendo provided in that linked thread, where specific recommendations were given for disposing the DatePicker, complete with what to use in the selectors.

Thanks,
Mike

Hi Mike,

The DatePicker attaches event handlers to its textbox (input.k-input) and button (span.k-select). Note that if you want to detach these, it must be done before the Ajax request, before these elements have been replaced by the new content.

You can also use the universal selector with widgetWrapperElement.find("*"), which is slower, but can be used for simple widgets with few DOM elements.

Finally, bear in mind that widgets such as the DatePicker, NumericTextBox and Upload attach a reset handler to their parent <form>, if such exists. You can remove these bindings as well, unless you have other Kendo UI widgets that live on the page before and after the Ajax request.

Greetings,
Dimo
the Telerik team

OK, hear me out. I feel I am going around in circles. I linked that previous thread for an easy context which I feel hasn't been looked at all and causing a lot of churn as a result. Worst than that, you guys are on a totally different timezone which means every one of these misunderstandings is another 24 hours wasted before I will get another response.

To be clear, I don't care about the DatePicker. There is already a thread which I referenced about how to handle and dispose that. I was looking for something similar to that insight, but about the DropdownList and ComboBox (which is the forum this thread is located). You didn't even mention anything about either of those two controls in your general list of controls to consider regarding the reset. So in other words, nothing about the only two controls I am having an issue with. These two are unique and what I need will be unique to them, because they are the only two with dynamic width dropdown lists/menus. Not even the DatePicker resembles this scenario.

So again, to be clear, I am looking for specific disposing/removing/replacing instructions about the DropdownList and ComboBox, only. Additionally, I do have other Kendo controls (like the Tabstrip) that I do need to be careful navigating around and is not being replaced between AJAX calls, so I can't do complete replace functions that are going to destroy the tabstrip.

Please let me know if you can provide specific insights regarding these two controls and their dropdown menus, and disposing/removing/replacing them via AJAX calls.

Mike

Hello Mike,

Sorry about the confusion with the DatePicker.

The ComboBox attaches event handlers to exactly the same elements - input.k-input and span.k-select.

The DropDownList attaches event handlers to the two wrapper elements - span.k-dropdown and span.k-dropdown-wrap.

Both widgets use a popup dropdown in the <body> that can be referenced for DOM removal with



Greetings,
Dimo
the Telerik team

UPDATE: It appears I was already doing most of those removes, etc, based on the info from the DatePicker thread.

However, my remove/replace content issue appears to be resolved now using the latest internal build (503). So that is cool! Now my dropdown lists default to the control width when dropped down, even after subsequent form content replacements.

Thanks!
Mike