Updating Selected Item by Value using Javascript

[Laurie]

I have a dropdownlist that I want to update using values saved in a modal window. I'm using the following:

 

function RebindOrganizations() {
    var ddl = $('#OrganizationName').data("kendoDropDownList");
    ddl.dataSource.read();
    if (newOrganizationName != undefined) {
        ddl.select(function (dataItem) {
            return dataItem.value === newOrganizationName;
        });
        //ddl.value(newOrganizationName);
    }
    ddl.focus();
}

and neither the ddl.select nor the ddl.value statements do the trick. My newOrganizationName value is set correctly. The ddl.dataSource.read() statement executes correctly (i.e., my new Organization is in the list).  Any ideas?

[Ivan Danchev]

Hello Laurie,

At my end the code you posted works as expected, as can be seen in the following dojo example. Make sure you are accessing the correct property in the function you pass to the DropDownList's select method:

ddl.select(function (dataItem) {
      return dataItem.value === newOrganizationName;
    });

You are accessing dataItem.value but the variable name is newOrganizationName, so you can check and verify that the value you are getting exists in the dataSource's value field:

dataSource: [
     { value: 1, name: "Organization1" },
     { value: 2, name: "Organization2" },
     { value: 3, name: "Organization3" }
   ],

Regards,
Ivan Danchev
Telerik by Progress

[Laurie]

Your code works because it is not updating the dropdownlist. I'm attaching a Controller, Model, and some Views that show what I'm trying to do, that is,

1. displays the dropdownlist from a json call (data in session),
2. allows you to open a window to add a new Organization,
3. saves that organization,
4. adds it to the dropdownlist and
5. tries to select the new organization in the dropdownlist.

It is this last step that is not working. The code

ddl.select(function (dataItem) {
    return dataItem.OrganizationName === newOrganizationName;
});

 

iterates through the dropdownlist's values but does not find the new Organization even though the dropdownlist displays that new Organization.

Any help would be appreciated.

Note: in order to run the project, you'll need to update the reference to Kendo.MVC.

[Ivan Danchev]

Hello Laurie,

Thank you for attaching a runnable sample.

In your current logic the DropDownList's select method in the RebindOrganizations handler is called before the response of the request triggered by ddl.dataSource.read() is received, thus the newly added item is not found. I added a small delay with the setTimeout method as shown below, and the newly added item was selected as expected:

if (typeof newOrganizationName != "undefined") {
    var ddl = $("#OrganizationName").data("kendoDropDownList");
    ddl.dataSource.read();
    setTimeout(function () {
        ddl.select(function (dataItem) {
            return dataItem.OrganizationName === newOrganizationName;
        });
        ddl.focus();
    }, 300)
}

Regards,
Ivan Danchev
Telerik by Progress

[Laurie]

Beautiful, Ivan! Thanks!