Window() with Partial View containing DropDownList

[Steve]

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();
    };

 

 

[Veselin Tsvetanov]

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

[Suresh]

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

 

[Veselin Tsvetanov]

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