I am defining the following Kendo DropDownlist in asp.net mvc:
@(Html.Kendo().DropDownList()
.Name("OrganizationName")
.DataTextField("OrganizationName")
.DataValueField("OrganizationName")
.OptionLabel("-- Select an Organization --")
.HtmlAttributes(new { style = "width: 100%;" })
.DataSource(source =>
{
source.Custom()
.ServerFiltering(false)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read(read =>
{
read.Url(@Url.HttpRouteUrl("DefaultAPI", new { controller = "OrganizationAPI", action = "GetAllOrganizations" })).Type(HttpVerbs.Get);
});
})
.Schema(schema =>
{
schema.Data("Data")
.Total("Total");
});
}))
And I am trying to reload the dropdownlist using javascript, as follows:
function RebindOrganizations() {
$('#OrganizationName').data("kendoDropDownList").dataSource.read();
}
The DropDownList is loading initially, but it throws an "undefined" in the javascript, specifically at the .data("kendoDropDownList") portion of the code. The error is:
TypeError: $(...).data(...) is undefined
Now I think it's probable that the issue arises because I'm trying to make the call upon returning from a modal window. Here is the code that actually calls my function:
function bindForm(dialog) {
$('form', dialog).submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
if (result.url != null)
$('#replacetarget').load(result.url); // Load data from the server and place the returned HTML into the matched element
else {
RebindOrganizations();
}
} else {
$('#myModalContent').html(result);
bindForm(dialog);
}
}
});
return false;
});
}
But when I click an input button with onClick="RebindOrganizations();" it works.
Anyone able to tell me what I'm doing wrong?
Thanks!
Laurie