Y.DataTable.EditorOptions.autocomplete Class
Popup Cell Editor "autocomplete"
This View configuration is used to setup a textbox-type popup cell editor that has an Autocomplete plugin attached to the INPUT[text] node.
Basic Usage
// Column definition
{ key:'state', editor:"autocomplete",
editorConfig:{
autocompleteConfig:{
source: myStateArray,
alwaysShowList: true
}
}
}
Standard Configuration
This editor creates a simple INPUT[text] control internally within the popup Editor View container positioned directly over the TD element and uses Y.Plugin.AutoComplete to setup the autocomplete capability. The user configures the AC via the "autocompleteConfig" setting.
Typical use case is to define an "on:select" listener within the autocompleteConfig object that sets the editor "value" based upon the data's criteria.
The configuration {Object} for this cell editor View is predefined as;
Y.DataTable.EditorOptions.autocomplete = {
BaseViewClass: Y.DataTable.BaseCellPopupEditor,
name: 'autocomplete',
templateObject: {
html: '<input type="text" title="inline cell editor" class="<%= this.classInput %>" />'
},
inputKeys: true,
// Set listeners to this View's instance ....
after: {
//---------
// After the cell editor View is instantiated,
// get the INPUT node and plugin the AutoComplete to it
//---------
editorCreated : function(o){
var inputNode = o.inputNode,
acConfig = this.get('autocompleteConfig') || {},
editor = this;
// If input node exists and autocomplete-plugin is available, plug the sucker in!
if(inputNode && Y.Plugin.AutoComplete) {
acConfig = Y.merge(acConfig,{
alwaysShowList: true,
render: true
});
inputNode.plug(Y.Plugin.AutoComplete, acConfig);
// add this View class as a static prop on the ac plugin
inputNode.ac.editor = editor;
}
}
}
};
PLEASE NOTE: All other attributes from the BaseViewClass
apply and can be included within the
editorConfig
object.