Dear All,
I made a js library for extending a combogrid into a datagrid editor based on
http://www.jeasyui.com/forum/index.php?topic=478.0.
Library jquery.combogrid.js:
(function($) {
$.extend($.fn.datagrid.defaults.editors, {
combogrid: {
init: function(container, options) {
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.combogrid(options);
return input;
},
destroy: function(target) {
$(target).combogrid('destroy');
},
getValue: function(target) {
return $(target).combogrid('getValue');
},
setValue: function(target, value) {
$(target).combogrid('setValue', value);
},
resize: function(target, width) {
$(target).combogrid('resize', width);
}
}
});
})(jQuery);
Combogrid editor declaration:
<th data-options="field:'pickWarehouseCode',width:200,sortable:'true',
formatter:function(value,row){
return row.Gudang;
},
editor:{
type:'combogrid',
options:{
panelWidth:260,
idField:'Kode',
textField:'Gudang',
required:true,
columns:[[
{field:'Kode',title:'Kode',width:60},
{field:'Gudang',title:'Gudang',width:200}
]],
onSelect: onSelectGrid,
filter: function(q,row){
var opts = $(this).combogrid('options');
return row[opts.textField].toUpperCase().indexOf(q.toUpperCase()) >= 0;
},
data: gudangList
}
}">Pick WH</th>
Handler for combogrid.onSelect event:
function onSelect(record) {
var cb = $(this);
var index = getRowIndex(cb);
var row = dg.edatagrid('getRows')[index];
var field = cb.combobox('options').textField;
row[field] = record[field];
}
function onSelectGrid(record) {
var cb = $(this);
var index = getRowIndex(cb);
var row = dg.edatagrid('getRows')[index];
var field = cb.combogrid('options').textField;
row[field] = record[field];
}
The problem is my onSelectGrid function failed to retrieve the combogrid's options. The error message is:
TypeError: $.data(...) is undefined.
var opts=$.data(jq[0],"combogrid").options;.
I have included my working combobox.onSelect event handler. Thank you.
Regards,
Alex Wijoyo