zconlen

Dojo Combobox Performance

Discussion created by zconlen on Jul 2, 2013
Latest reply on Jul 3, 2013 by zconlen
Hi,
Looking for suggestions to make a combobox perform better. The problem is that I have a large dataset (appx 75k values) which I'm populating into the combobox. This is done via a query of a sql table. Then the query results are processed by adding them to an array which is used as the data store (itemFileReadStore).

The main problem is that it is quite slow when user starts typing a value or tries to pick a value from the dropdown list. Like several seconds delay. Not too surprising, given the size of the data store...

So, are there ways to improve performance with the itemFileReadStore? Is there a better data store to use? JsonRest? I do have the pagesize attribute of the combobox set to 20, which helps a bit....

The app is at jsapi 2.8.

Here is code which programatically creates combobox

function createAssetSearch() {
  //create label for search input
  var assetSearchLabel = dojo.create("div", {innerHTML:"Asset Search", style: { display: "inline", padding: "5px", position: "relative", top: "3px"}});
  var assetSelect = new dijit.form.ComboBox({
    name: 'assetSelect',
    pageSize: 20,
    maxHeight: 300,
    id: 'assetFilterSelect',
    fetchProperties: { sort: [{attribute:"name",descending: false}] },
    onMouseEnter: function() {clearDefaultValue(this.value);},
    onChange: function() {zoomSetup(this.value);}, //needs to be a reference to a function, not a direct function call
    value: 'ex. 198802' 
  }, dojo.doc.createElement('div'));
 
  dojo.byId('webmap-toolbar-center').appendChild(assetSearchLabel);
  dojo.byId('webmap-toolbar-center').appendChild(assetSelect.domNode); //need to pad item so it is not right next to
  //execute funtion which populates asset dropdown dijit
  queryAssets();
}


and the function to populate it

function populateAssetList(results) {
  //Populate the dropdown list box with unique values
  var asset, values = [];
  var features = results.features;
  dojo.forEach (features, function(feature) {
    asset = feature.attributes.ASSETNUMBER;
    layer = feature.attributes.LAYER
    values.push({name:asset,layer:layer});
  });
        
  var dataItems = {
    identifier: 'name',
    label: 'name',
    items: values
  };
  store = new dojo.data.ItemFileReadStore({data:dataItems});  
  dijit.byId("assetFilterSelect").store = store; 
}

Outcomes