Reputation: 9298
I'm trying to update a Kendo UI dropdownlist programmatically when pressing a button.
Main dropdown:
@(Html.Kendo().DropDownList()
.Name(LayoutTemplate")
.OptionLabel("Templates")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLayoutTemplatesDropdown", LayoutTemplate");
});
}))
<button class="loadLayout" type="button">Load</button>
Second dropdownlist:
@(Html.Kendo().DropDownList()
.Name("CreateTemplateCSS")
.OptionLabel("Choose one")
.DataTextField("Text")
.DataValueField("Value")
.Template("<span class=\"glyphicon glyphicon-font\"></span> #:data.Text#")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetTemplateCSSTemplatesDropdown", "TemplateCSSTemplate")
.Data("filterTemplateCSSTemplates");
});
})
)
Javascript
function filterTemplateCSSTemplates() {
return {
layoutTemplateID: $("#LayoutTemplate").val()
};
}
$(".loadLayout").on("click", function (e) {
var layoutTemplateID = $("#LayoutTemplate").val();
if (layoutTemplateID) {
$("#CreateTemplateCSS").data("kendoDropDownList").refresh();
}
});
Goal is:
When $(".loadLayout") is clicked refresh "CreateTemplateCSS" with the "layoutTemplateID" parameter.
How can I adjust this to make it work?
Upvotes: 0
Views: 1818
Reputation: 1940
If you're trying to refresh the datasource of your dropdownlist, you should do $("#CreateTemplateCSS").data("kendoDropDownList").dataSource.read();
If you're trying to change the datasource completely then in your click function you should create a new datasource then update your dropdownlist in javascript using
$("#CreateTemplateCSS").kendoDropDownList({
dataTextField: "Text",
dataValueField: "Value",
valuePrimitive: true,
optionLabel: "Templates",
value: layoutTemplateID,
dataSource: {
data: yourDataSource
}
});
Upvotes: 1