Kendo Window not rendering dropdown list

[Atul]

Hi All,


I have created partial view which contain multiple dropdown list and I am rendering this partial view on different Window. 

When I opened this partial view on "xyz" window it will work as expected, but when I opened same partial view on another window (abc) all dropdownlist converted into textbox control.

Any thoughts?

Thanks-
Atul K

[Dimo]

Hi Atul,

If you load the same partial view multiple times on the same page, you need to use different IDs and Name()'s for all elements and Kendo UI widgets, otherwise you will end up with duplicate IDs on the page and the HTML markup will become invalid.

Regards,
Dimo
Telerik

 

 

[Atul]

Hi Dimo, thanks for your reply.

Here I am rendering partial view on different Windows and I am closed the window before opening another window.

and you suggested use different IDs for all elements, so how can assign different ID's for all elements from Partial view?

Thanks-
Atul 

[Dimo]

Hi Atul,

Closing a Window does not remove it from the DOM. If you will not be needing a particular Window again, you can destroy() it in its deactivate event. In this way you will not have to use different IDs for the content in the new instances.

http://docs.telerik.com/kendo-ui/getting-started/web/window/overview#destroying-a-kendo-ui-window

http://docs.telerik.com/kendo-ui/api/web/window#events-deactivate

Applying unique Names to the Kendo UI widgets inside the Window is a general development task, which involves using string variables and is not directly related to Kendo UI. Imagine you have a plain textbox (<input type="text" id="MyTextBox" />) inside a partial view, which will be loaded multiple times on a page. How will you apply different IDs to each textbox instance?

Regards,
Dimo
Telerik

 

 

[Atul]

Thanks Demo,

This elucidation is work for me. I have removed all elements from Window on deactivate event of window.

 deactivate: function () {
                $(this.element).empty();
            }

Please correct me if this approve is not correct or do you have any other better approach to resolved my issue.

Thanks-
Atul K.

[Dimo]

Hi Atul,

Before removing DOM content, which contains Kendo UI widgets, it is highly recommended to call kendo.destroy().

http://docs.telerik.com/kendo-ui/api/framework/kendo#methods-destroy

Regards,
Dimo
Telerik

 

 

[Dan]

Hi Dimo,

I have a similar problem. The window is loading its content like:

Html.Kendo().Window().LoadContentFrom(actionName, controllerName)

And every time I want to open the window I do

window.refresh();
window.center(true).open();

And for closing I do this

 

$("#window").data("kendoWindow").close();

Also the partial view contains the kendo dropdownlist.

When I wrote the code at the first run the dropdownlist was working correctly. I had opened the window several times and I had the dropdownlist correctly.

At one point the VS was stuck and I had to kill the process, and after that the dropdownlist in the window was not working anymore correctly. 

After I discovered that it does not work I tried another browser and surprisingly for the first time the dropdownlist in window worked but the second time in the same browser it did not.

Now I have the question: When you say use kendo.destroy you mean to use it only on window or also on any kendo widget inside the window? What is the protocol for such a case?

[Dimo]

Hi Dan,

kendo.destroy() needs to be executed for the Window's content container (the widget's element), but only if you remove the content manually, as in the above snippet by Atul.

https://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element

When you call the refresh() method of the Window, the widget calls kendo.destroy() internally in its content() method...

https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.window.js#L1352

... which is called when the partial view is loaded:

https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.window.js#L754

You code looks OK. Please make sure that there is no duplicate Window initialization somewhere in the JavaScript.

https://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

If you need further assistance, please send an isolated runnable demo, so that I can inspect it.

Regards,
Dimo
Progress Telerik

[Dan]

Hi Dimo,

Thank you for the clarifications. After further investigation I found out that I had the same id on two dropdownlist. On the page I had a grid and two windows: one for add and one for edit. At first I added the dropdownlist on the add window and it worked. But then I just copied and paste in the edit the same dropdownlist. After that only the edit window was working.

So I have to be more careful with the copy and paste :D

[Dimo]

Thanks for the follow-up, Dan, I am glad you discovered the culprit.

Regards,
Dimo
Progress Telerik

[ramesh]

Hi Team,

I got the same issue, ASP.Net core Dropdownlist is rendering as textbox in partial view. I have the unique id for the dropdown. There is no destroy event for .net core control. Any fix for this issue?

Regards,

Ramesh A

[Momchil]

Hello Ramesh,

Is this issue separate from the one in the support ticket that you opened on September 13th?

In case it is, please send a code snippet including your configuration so that I can investigate the problem.

Best Regards,
Momchil
Progress Telerik

 

[ramesh]

This is the same issue, Please ignore it. Thanks