Datagrid, ComboBox with remoteDatascoure updatebounddata issue

[DavidSimmonsParticipant]

Can you tell why when using a datagrid with ComboBox editor with a remoteDataSource if you perform updatebounddata on the grid the ComboBox datasource is destroyed or the datasource for the ComboBox is not refreshed with the datagrid’s data source. Is this by design or possibly and bug? I would think that the ComboBox’s dataSource should be refreshed at the same time….

$(jqxgrid).jqxGrid(‘updatebounddata’);

[Peter StoevKeymaster]

Hi David,

When “updatebounddata” is called, all editors are destroyed, the Grid performs data binding operation again and re-renders itself. This means that when you open the ComboBox again, the column’s createeditor callback will be called.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DavidSimmonsParticipant]

That is not what I am seeing when using remoteAutoComplete. After the refresh, when you start typing for the next lookup the ComboBox is blank and does not populate. This is with large list. I have a product list of 10000 plus. If you do not refresh they all work very fast every time.

If you are using small list were you do not need the remoteAutoComplete and you are only using the ComboBox’s dropdown arrow it will work after the refresh.

My Datasource
var ProductSearch=”;
var ProductSource = {
datatype: “json”,
datafields: [
{ name: ‘ID’ },
{ name: ‘Product’ }
],
id: ‘id’,
url: ‘../Product/ProductJSON.php’,
async: false,
data: {
featureClass: “P”,
style: “full”,
maxRows: 12
}
};

var ProductDataAdapter = new $.jqx.dataAdapter(ProductSource, {
formatData: function (data) {
data.name_startsWith = ProductSearch;
return data;
}
});

My Editor
{ text: ‘Product’, datafield: ‘Product’, width: 180, editable: true, filterable: true, filtertype: ‘textbox’, columntype: ‘combobox’,
createeditor: function (row, column, editor) {
editor.jqxComboBox({selectedIndex: 0, source: ProductDataAdapter, remoteAutoComplete: true, autoOpen: false, dropDownHeight: 250, displayMember: “Product”, valueMember: “ID”,
renderer: function (index, label, value) {
var item = ProductDataAdapter.records[index];
if (item != null) {
var label = item.Product;
return label;
}
return “”;
},
renderSelectedItem: function(index, item) {
var item = ProductDataAdapter.records[index];
if (item != null) {
var label = item.Product;
return label;
}
return “”;
},
search: function (searchString) {
ProductSearch = searchString;//**** Used for my search
ProductDataAdapter.dataBind();
}
});
editor.bind(‘select’, function (event) {
var item = event.args.item;
if (item) {
var value = item.value;
var label = item.label;
selectionID = value;/**** Used to capture the selectionID
}
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
if (newvalue == “”) return oldvalue;
}
},

[Peter StoevKeymaster]

Hi David,

As you use an external dataAdapter for populating the ComboBox, you should probably update it after updating the Grid’s data source. So you can use the ProductDataAdapter.databind() to make an update.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DavidSimmonsParticipant]

I have been testing the databind() you suggested when the user clicks the refresh button and I am not seeing any change. Does this look like the correct way to perform it? I am still getting an empty Product List in my combobox after a refresh.

refreshButton.click(function (event) {
$(‘jqxgrid’).jqxGrid(‘updatebounddata’);
ProductDataAdapter.databind();
});

var ProductSource = {
datatype: “json”,
datafields: [
{ name: ‘ID’ },
{ name: ‘Product’ }
],
id: ‘id’,
url: ‘../Product/ProductJSON.php’,
async: false,
data: {
featureClass: “P”,
style: “full”,
maxRows: 12
}
};

var ProductDataAdapter = new $.jqx.dataAdapter(ProductSource, {
formatData: function (data) {
$(“#message”).html(“Lookup: ” + lookupSearch);
data.name_startsWith = lookupSearch;
return data;
}
});

[Author]

Posts