Refreshing a DropDownList’s datasource

[dpdragnevMember]

Hi,

What is the proper way of refreshing the datasource of a dropdownlist?

Here is my scenario: I have a DropDownList

var sourceASG =
{
datatype: ‘json’,
datafields:
[
{ name: ‘Key’, type: ‘number’ },
{ name: ‘Value’, type: ‘string’ }
],
id: ‘Key’,
url: ‘/Common/GetGroups/’ + $(‘#ContactsUserId’).val()
}
var dataAdapterASG = new $.jqx.dataAdapter(sourceASG);

$(“#lstGroups”).jqxDropDownList({
source: dataAdapterASG,
width: ‘200px’,
height: ’30px’,
displayMember: ‘Value’,
valueMember: ‘Key’,
selectedIndex: -1,
theme: theme,
placeHolder: “Any Group”
});

Later on the user has the ability to add a new group by invoking a server method via ajax. At this point I would like to reload the data in the list and to select the new item.

What is the best way to do this? I tried calling dataAdapterASG.dataBind(), but this did not have any effect.

Thanks,

Daniel

[Peter StoevKeymaster]

Hi,

Calling the “dataBind” method will make a new Ajax call so I think this should work. Another think which you may try is to set the “source” property to point to a new jqxDataAdapter instance.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpdragnevMember]

Thank you Peter,

Creating a new instance of the dataAdapter and passing it as source worked. My next question is: how do I select an item based on the value? I tried:

var item = $(“#lstGroups”).jqxDropDownList(‘getItemByValue’, someValue);
$(“#lstGroups”).jqxDropDownList(‘selectItem’, item);

but item is always undefined. I could probably traverse all the items and find the index of the item I need and then set the selectedIndex of the dropdownlist, but that seems a little too verbose. Is the code shown above correct? Is there another method to accomplish this?

EDIT: Actually, the code above works for any of the original items, but not for the newly added item even though the item is listed in the list of items.

Thanks for your help.

[Peter StoevKeymaster]

Hi Daniel,

Do you use jQWidgets 2.8.3?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpdragnevMember]

Yes, 2.8.3 with jQuery 1.9.1

[Peter StoevKeymaster]

Hi Daniel,

Ok, could you please send us a sample which demonstrates your issue?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpdragnevMember]

I have tracked the issue to this code:

$(‘#btnAddNewGroup’).click(function (e) {
$.ajax({
type: “POST”,
url: “/Contacts/AddNewGroup”,
data: {
model: JSON.stringify(new objGroup())
}
}).done(function (result) {

if (result.Success == true) {
//clean up
$(‘#NewGroupPopup’).jqxWindow(‘close’);
$(“#NewGroupForm td > input[type=text]”).val(”);

//refresh the list box and display the new group
dataAdapterASG.dataBind();

//select the last item on the list
var item = $(“#lstGroups”).jqxDropDownList(‘getItemByValue’, result.Object.GroupId);
$(“#lstGroups”).jqxDropDownList(‘selectItem’, item);
}
else {
error = true;
$(“.status-message”).text(result.ErrorMessage);
}
}); //ajax call
});

Here I am calling a server side method to add the new group to the database after which I am calling the dataBind method. The problem is at the bolded line of code. At this point the new item is not yet available to be selected, however as soon as the code runs to the end, the item is listed in the dropdownlist.

Is it a question of timing? Maybe I am try to access the refreshed data too early in the cycle?

Everything else works perfectly. The getItemByValue method works as advertised for the other items except for the new one.

Thank you

[Peter StoevKeymaster]

Hi,

if you use Async Ajax, then you should consider that an item is added or removed in the widget only after the Ajax success callback is called.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpdragnevMember]

Peter,

I tried moving the code to the success event, but I am getting the same result. Can you think of anything else? Meanwhile, I will keep testing.

Thank you,

[Peter StoevKeymaster]

Hi Daniel,

I mean that, if dataAdapterASG.dataBind uses Async Ajax call, then there is a good chance the (“#lstGroups”).jqxDropDownList(‘getItemByValue’, result.Object.GroupId); to be called before the loading operation has completed. Could you add a loadComplete callback to the DataAdapter and add your DropDownList selection logic there?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpdragnevMember]

Got you, that makes sense now. I will do that and will report back the result.

Thank you.

[Author]

Posts