Kendo Window not rendering dropdown list

10 posts, 0 answers
  1. Atul
    Atul avatar
    13 posts
    Member since:
    Mar 2012

    Posted 19 Mar 2014 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 19 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. Atul
    Atul avatar
    13 posts
    Member since:
    Mar 2012

    Posted 20 Mar 2014 in reply to Dimo Link to this post

    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 
  4. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 20 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  5. Atul
    Atul avatar
    13 posts
    Member since:
    Mar 2012

    Posted 20 Mar 2014 in reply to Dimo Link to this post

    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.
  6. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 20 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  7. Dan
    Dan avatar
    169 posts
    Member since:
    Nov 2017

    Posted 06 Mar 2018 in reply to Dimo Link to this post

    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?

  8. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 07 Mar 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Dan
    Dan avatar
    169 posts
    Member since:
    Nov 2017

    Posted 07 Mar 2018 in reply to Dimo Link to this post

    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

  10. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 07 Mar 2018 Link to this post

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

    Regards,
    Dimo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top