Title: Combogrid Editor onSelect Event Handler Failed to Retrieve Combogrid's Options
Post by: alex_wijoyo on April 05, 2013, 11:18:45 PM
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 (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
Title: Re: Combogrid Editor onSelect Event Handler Failed to Retrieve Combogrid's Options
Post by: stworthy on April 08, 2013, 08:03:48 PM
Please try the code below to get the combogrid's options. function onSelectGrid(index,record) {
var dg = $('#tt');
var gridOpts = dg.edatagrid('options');
var ed = dg.edatagrid('getEditor',{index:gridOpts.editIndex,field:'pickWarehouseCode'});
var comboOpts = $(ed.target).combogrid('options');
console.log(comboOpts.textField);
}
Title: Re: Combogrid Editor onSelect Event Handler Failed to Retrieve Combogrid's Options
Post by: alex_wijoyo on April 09, 2013, 12:57:02 AM
Thank you very much.
Title: Re: Combogrid Editor onSelect Event Handler Failed to Retrieve Combogrid's Options
Post by: alex_wijoyo on April 19, 2013, 09:51:16 PM
Dear All, Since I use my own version of edatagrid. I can't used the solution proposed by stworthy. So based on an assumption that only one combogrid show its panel at a time, I store the last combogrid showing its panel to a global variable and remove it on hiding. I also use this approach for doing incremental search on combogrid Here's my solution. function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
var cbg=null;
function onSelectGrid(index,record) {
if(cbg) {
var cb = cbg;
var opts=cb.combogrid('options');
var index = getRowIndex(cb);
var row = dg.edatagrid('getRows')[index];
var field = opts.textField;
row[field] = record[field];
}
}
function onShowPanel() {
cbg = $(this);
}
function onHidePanel() {
cbg = null;
}
function onComboGridChange(newValue, oldValue){
if(cbg) {
var opts = cbg.combogrid('options');
grid=cbg.combogrid('grid');
newValue=cbg.combogrid('getText');
var oldData=opts.data;
var newData
if(newValue.length==0){
newData=oldData;
}
else {
newData=new Array();
var row;
newValue=newValue.toUpperCase();
for(var i=0;i<oldData.length;i++) {
row=oldData[i];
for(var j in row) {
if(row[j].toUpperCase().indexOf(newValue) >= 0)
newData.push(row);
}
}
}
grid.datagrid('loadData',newData);
}
}
My combogrid column 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,
mode:'local',
columns:[[
{field:'Kode',title:'Kode',width:60},
{field:'Gudang',title:'Gudang',width:200}
]],
onSelect: onSelectGrid,
onShowPanel: onShowPanel,
onHidePanel: onHidePanel,
onChange: onComboGridChange,
data: gudangList
}
}">Pick WH</th>
And this approach works. Hope this post helps others that work with the combogrid as a datagrid editor. Thanks.
|