Getting Autocomplete Combobox work in SlickGrid Custom Editor
Weirdobugy
I'm trying to create a custom autocomplete combobox editor in the latest version of the SlickGrid. The main purpose of the combobox is to show the results based on the text typed by the user and also it will include a down arrow link-button which enables users to see all results by passing a blank argument to the 'autoComplete' function. Here is the link that you can view what I'm trying to create as a custom editor in SlickGrid. (Pls. ignore the "show underlying select" button)
I was able to get the suggestions based on the user typing and also a little arrow link-button is put on the right hand side of the column field that is supposed to show all items in the [availableTags] array. When I click the arrow, it doesn't list all items basically not responding as it's supposed to. But if user types something that matches with one of the items in the list, means the widget is open, after clicking the arrow button it gets closed but not bringing the list of all items. I guess I'm doing something wrong with DOM handling. Any help would be gratefully appreciated
Here is the source code of creating the columns.
var columns = [
{id: "TestAuto", name: "Auto Complete", field: "TestAuto", minWidth:100,width:150, editor: Slick.Editors.Auto}
];Here is the custom Editor code:
$.extend(true, window, {
"Slick": {
"Editors": {
"Auto": AutoCompleteEditor,
"Text": TextEditor,
"Integer": IntegerEditor,
"Date": DateEditor,
"YesNoSelect": YesNoSelectEditor,
"Checkbox": CheckboxEditor,
"PercentComplete": PercentCompleteEditor,
"LongText": LongTextEditor,
"Combo": ComboTest
}
}
});
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function AutoCompleteEditor(args) {
var $input;
var defaultValue;
var scope = this;
var calendarOpen = false;
this.init = function () {
$input = $("<INPUT id='tags' class='editor-text' />");
$input.width($(args.container).innerWidth() - 25);
$input.appendTo(wrapper);
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-combobox-toggle" )
.click(function() {
// close if already visible
if ( $input.autocomplete( "widget" ).is( ":visible" ) ) {
$input.autocomplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
$input.autocomplete( "search", "" );
$input.focus();
});
$input.focus().select();
$input.autocomplete({
source: availableTags
});
};
this.destroy = function () {
$input.autocomplete("destroy");
};
this.focus = function () {
$input.focus();
};
this.loadValue = function (item) {
defaultValue = item[args.column.field];
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
this.serializeValue = function () {
return $input.val();
};
this.applyValue = function (item, state) {
item[args.column.field] = state;
};
this.isValueChanged = function () {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}
Vivek
Vincent Mahusay
<script>
$(document).ready(function() {
var grid;
var data = [];
var columns = [
{id:"color", name:"", field:"Color", options: "Red,Green,Blue,Black,White", editor: SelectCellEditor},
]
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false
};
function SelectCellEditor(args) {
var $select;
var defaultValue;
var scope = this;
this.init = function() {
if(args.column.options){
opt_values = args.column.options.split(',');
}else{
opt_values ="yes,no".split(',');
}
option_str = ""
for( i in opt_values ){
v = opt_values[i];
option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
}
$select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
$select.appendTo(args.container);
$select.focus();
};
this.destroy = function() {
$select.remove();
};
this.focus = function() {
$select.focus();
};
this.loadValue = function(item) {
defaultValue = item[args.column.field];
$select.val(defaultValue);
};
this.serializeValue = function() {
if(args.column.options){
return $select.val();
}else{
return ($select.val() == "yes");
}
};
this.applyValue = function(item,state) {
item[args.column.field] = state;
};
this.isValueChanged = function() {
return ($select.val() != defaultValue);
};
this.validate = function() {
return {
valid: true,
msg: null
};
};
this.init();
}
$(function () {
for (var i = 0; i < 1; i++) {
var d = (data[i] = {});
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})
});
</script>
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
</div>
</div>