Combogrid Editor onSelect Event Handler Failed to Retrieve Combogrid's Options

[alex_wijoyo]

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:

Code:

(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:

Code:

					<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:

Code:

			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

[stworthy]

Please try the code below to get the combogrid's options.

Code:

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);
}

[alex_wijoyo]

Thank you very much.

[alex_wijoyo]

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.

Code:

			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:

Code:

					<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.