Drop down list in grid calls backend 3 times to get data for every row

[ajcsParticipant]

I have the following code that puts a drop down list in a grid column. The drop down list uses the ClassesDataAdapter which uses the ClassesDataSource.

Every time I create the drop down list it calls the backend to load the data 3 times.

Why is it calling 3 times?
Why is it calling again for the next row when I create the drop down list again?

I am expecting only one call in total to the backend url /Attributes/GetAttributeClasses

var ClassesDataSource =
{
dataType: “json”,
root: “Data”,
dataFields: [
{ name: ‘Id’, type: ‘number’ },
{ name: ‘Description’, type: ‘string’ }
],
id: ‘Id’,

url: ‘/Attributes/GetAttributeClasses’
}

var ClassesDataAdapter = new $.jqx.dataAdapter(ClassesDataSource,
{
loadError: function (jqXHR, status, error) {
alert(“There was an error please contact support”);
},
}
);

Then in the grid I have this column to create a drop down list:

text: ‘Class’,
dataField: ‘Class.Description’,
columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {

// This statement causes the /Attributes/GetAttributeClasses backend to be called 3 times
editor.jqxDropDownList({
autoDropDownHeight: true,
source: ClassesDataAdapter,
valueMember: ‘Id’,
displayMember: ‘Description’
});

[ajcsParticipant]

If I change columntype from ‘dropdownlist’ to ‘template’ then it only calls the backend to load data once per creation of the drop down list.

It still should only be once in total.

[ajcsParticipant]

If I don’t have a grid at all but just put two drop down lists on a page sharing the same adapter/source it calls the back end twice to load the data. This can’t be right. Is there a property on the data source that needs setting to tell it to load once?

[ajcsParticipant]

Well I have found a way round this and that is to load the data source first with dataBind and then put the adapter.records into a variable. Then use the variable for all drop down list data sources.

This also solved the problem in the grid that I could never set the drop down list initial value – probably because the data was never loaded.

So is this the solution that I should be using?

// Need ClassesDataSource to have async: false
ClassesDataAdapter.dataBind();
var ClassesData = ClassesDataAdapter.records;

Then use ClassesData as the data source on the drop down lists – now the data is only loaded once from the back end

[HristoParticipant]

Hello ajcs,

This is a possible option to fetch the data via the DataAdapter and after that set to the jqxGrid.
It will be better to provide us with a simplified example that demonstrates your issue.
Also, you could check for any error message in the console.
If you bind the data correctly it should show everything normally.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts