DataGridXL » Docs

Column Settings

Dropdowns & Pickers

DataGridXL supports dropdowns, autocompletes and pickers. In DataGridXL, we use the term pickers. Use the picker option inside your column objects to bind your custom picker.

const columns = [{
  title: 'My Dropdown Column',
  source: 'dropdown_data',
  picker: myAutoComplete
}];

const grid = new DataGridXL("grid", {
  columns: columns
});

The picker augments the cell editor and does not replace it.

Picker Code Structure

Your picker must be a function that returns an object that has at least the following hooks:

// my custom picker
function customPicker(){

  return {
    onOpen: function(pickerPanelElement){

    },
    onSetValue: function(value){

    },
    onClose: function(pickerPanelElement){

    }
  };

}

Inside the hooks, this refers to the DataGridXL instance.

You can even bind keyboard controls that become active once your picker opens.

this.keys.on('arrowdown!', onArrowDown, true);
this.keys.on('arrowup!', onArrowUp, true);
this.keys.on('enter!', onEnter, false);

The exclamation mark (!) tells DataGridXL KeyboardObserver class that the key action is dominant, meaning it will override the default DataGridXL key bindings.

Normally, pressing arrowdown would make the cell cursor go down one cell, but with our autocomplete dropdown, we want to browse through our list.

Pressing escape will close the cell editor (and the corresponding picker) which will resume normal key controls.