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