Window() with Partial View containing DropDownList

4 posts, 0 answers
  1. Steve
    Steve avatar
    21 posts
    Member since:
    Feb 2015

    Posted 07 Mar 2017 Link to this post

    I'm trying to create a Kendo Window that will present the user with a Kendo DropDownList and then cascade that selection to a Kendo ListView. I'm confused by when and where I need to use ToHtmlString() and Render(). I also want to handle the DropDownList and ListView events.

    Main razor page (sorry, couldn't get code formatter to make this look better):

    @(Html.Kendo().Window()
        .Name("myModal")
        .Title("Select Answer")
        .Content(Html.Partial("_MyPartial").ToHtmlString())
        .Draggable()
        .Resizable()
        .Width(600)
        .Visible(false)
        .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    )  // I've tried with and without .Render() here

    Javascript to call window:

     $("#myModal").data("kendoWindow").open();  // works fine

    Then _MyPartial:

    <div>
        <h5>Categories:</h5>
        @(Html.Kendo().DropDownList()
              .Name("categories")
              .HtmlAttributes(new { style = "width:100%" })
              .OptionLabel("Select a category...")
              .DataTextField("Text")
              .DataValueField("Value")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCategories", "Home");
                  });
              })
              .Events(e => e.Change("onCategoryChange"))
              .ToHtmlString()  // Without this, it doesn't recognize onCategoryChange, with it html is displayed in window
        )
        
        <h5>Click to select a question</h5>
        @(Html.Kendo().ListView<MyViewModel>()
              .Name("questions")
              .TagName("div")
              .ClientTemplateId("questionTemplate")
              .DataSource(dataSource =>
              {
                  dataSource.Read(read =>
                  {
                      read.Action("GetQuestions", "Home").Data("filterQuestions");
                  }).ServerOperation(true);
              })
              .Pageable()
              .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single))
              .Events(events => events.Change("onQuestionChange"))
              .AutoBind(false)
              .ToHtmlString()
        )
    </div>

    Javascript to handle events on this partial page. I have tried placing this code on the partial and on the main razor page.

    function filterQuestions() {
            return {
                questionId: $("#categories").data("kendoDropDownList").dataItem().Value
        };

    function onCategoryChange() {
           $("#questions").data("kendoListView").dataSource.read();
        };

    function onQuestionChange() {

            var selected = $.map(this.select(), function (item) {
                return $(item).text();
            });
            $("#Question").val(selected);
            $("#questionBankModal").data("kendoWindow").close();
            $("#btnQuestion").show();
        };

     

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1221 posts

    Posted 09 Mar 2017 Link to this post

    Hi Steve,

    Attached you will find a simple MVC project, based on the snippets sent. You will notice, that I have changed the Window initialization in the following way:
    @{Html.Kendo().Window()
        .Name("myModal")
        .Title("Select Answer")
        .Content(@<text>
                    @{Html.RenderPartial("_MyPartial");}
            </text>)
      .Draggable()
      .Resizable()
      .Width(600)
      .Visible(false)
      .Actions(actions => actions.Pin().Minimize().Maximize().Close())
      .Render();
    }

    I have also removed the ToHtmlString() cal from the other widgets. The sample properly works and the ListView items correctly cascade from the DropDownList selection.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Suresh
    Suresh avatar
    6 posts
    Member since:
    May 2020

    Posted 18 Jul in reply to Veselin Tsvetanov Link to this post

    Hello - 

    Can you please explain why the dropdown's or other controls are not loading in Kendo Window if we set the Deferred(). 

    @(Html.Kendo().DropDownList()
            .Name("categories")
            .HtmlAttributes(new { style = "width:100%" })
            .OptionLabel("Select a category...")
            .DataTextField("Text")
            .DataValueField("Value")
            .BindTo(new List<SelectListItem>() {
                new SelectListItem() {
                    Text = "Black",
                    Value = "1"
                },
                new SelectListItem() {
                    Text = "Orange",
                    Value = "2"
                },
                new SelectListItem() {
                    Text = "Grey",
                    Value = "3"
                }
            }).Deferred()
            .Events(e => e.Change("onCategoryChange"))
        )

     

    Thanks

    Suresh

     

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1221 posts

    Posted 21 Jul Link to this post

    Hi Suresh,

    The DropDownList should load properly in a Window content event if its initialization has been deferred. The important parts are:

    - Always keep the Deferred() configuration method as a last call in the HTML helper:

    @(Html.Kendo().DropDownList()
        .Name("categories")
        ...
        .Events(e => e.Change("onCategoryChange"))
        .Deferred()
    )

    - Do not forget to include the deferred scripts after the HTML helper has been defined in the view:

        ...
        .Events(e => e.Change("onCategoryChange"))
        .Deferred()
    )
    
    ...
    
    @(Html.Kendo().DeferredScripts())

    Attached you will find a small MVC sample implementing the above snippets.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

Back to Top