This is a migrated thread and some comments may be shown as answers.

Kendo MVC DropDownList - unable to reload

3 Answers 346 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Laurie
Top achievements
Rank 2
Laurie asked on 03 Jun 2015, 02:59 PM

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

3 Answers, 1 is accepted

Sort by
0
Laurie
Top achievements
Rank 2
answered on 03 Jun 2015, 03:00 PM
I should probably have named this "Unable to reload after returning from ajax call"
0
Georgi Krustev
Telerik team
answered on 05 Jun 2015, 09:44 AM
Hi,

If the $('#OrganizationName').data("kendoDropDownList") line returns "undefined", then the element is not available at the moment of the call. I would suggest you verify that the element is accessible using the $('#OrganizationName') method. If it isn't then you will need to refactor your implementation in order to satisfy this requirement.

If the problem still persists, we will need a repro demo that demonstrates the issue. Thus we will be able to review the implementation locally and advice you further.

Regards,
Georgi Krustev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Laurie
Top achievements
Rank 2
answered on 05 Jun 2015, 03:42 PM
I'll open a support ticket.
Tags
DropDownList
Asked by
Laurie
Top achievements
Rank 2
Answers by
Laurie
Top achievements
Rank 2
Georgi Krustev
Telerik team
Share this question
or