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.

Thank you very much.

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

Dear Stworthy,
It seems this behaviour is by design. I have an event handler for onLoadSuccess and this function is called before onBeforeLoad event handler called. Can you please teach me how to override this behaviour on edatagrid? Thanks.

Dear Stworthy,
Thank you very much for your kind help.

Dear Stworthy,
Thank you for your prompt response.
The same codes used on the other function for applying changes to server and it worked (with editing property):

Code:

			function applyChanges() {
				var rows = dg.edatagrid('getRows');
				for (var i = 0; i < rows.length; i++) {
					if (rows[i].editing)
						dg.edatagrid('endEdit', i);
				}
				var insertedRows = dg.edatagrid('getChanges', 'inserted');
				var updatedRows = dg.edatagrid('getChanges', 'updated');
				var deletedRows = dg.edatagrid('getChanges', 'deleted');
				dg.edatagrid('loading');
				$.post(dg.edatagrid('options').batchUrl, {inserts: insertedRows, updates: updatedRows, deletes: deletedRows}, function(data) {
					if (data.hasOwnProperty('msg')) {
						alert(data.msg);
					}
					else {
						for (var i = 0; i < data.inserts.length; i++) {
							var newRow = data.inserts[i];
							var index = dg.edatagrid('getRowIndex', newRow.oldId);
							dg.datagrid('updateRow', {
								index: index,
								row: newRow
							});
						}
						for (var i = 0; i < data.updates.length; i++) {
							var newRow = data.updates[i];
							var index = dg.edatagrid('getRowIndex', newRow.id);
							dg.datagrid('updateRow', {
								index: index,
								row: newRow
							});
						}
						dg.edatagrid('acceptChanges');
						//handle update sucess
					}
				}, 'json')
								.fail(function() {
					alert("Failed post request!");
				})
								.always(function() {
					dg.datagrid('loaded');
				});
//				console.log(insertedRows);
//				console.log(updatedRows);
//				console.log(deletedRows);
				//here you should post these rows to server
			}

I don't used single row editing approach like original edatagrid. I use this approach instead http://www.jeasyui.com/tutorial/datagrid/datagrid12.php. And currently I am trying to migrate it to cached updates.
My modified edatagrid:

Code:

/**
 * edatagrid - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2011 stworthy [ stworthy@gmail.com ] 
 * 
 * Dependencies:
 *   datagrid
 *   messager
 * 
 */
(function($) {
	function buildGrid(target) {
		var opts = $.data(target, 'edatagrid').options;
		$(target).datagrid($.extend({}, opts, {
			onBeforeLoad: function(param) {
				$(this).datagrid('rejectChanges');
				if (opts.tree) {
					var node = $(opts.tree).tree('getSelected');
					param[opts.treeParentField] = node ? node.id : undefined;
				}
				if (opts.onBeforeLoad)
					opts.onBeforeLoad.call(target, param);
			}
		}));

		if (opts.tree) {
			$(opts.tree).tree({
				url: opts.treeUrl,
				onDrop: function(dest, source, point) {
					var targetId = $(this).tree('getNode', dest).id;
					$.ajax({
						url: opts.treeDndUrl,
						type: 'post',
						data: {
							id: source.id,
							targetId: targetId,
							point: point
						},
						dataType: 'json',
						success: function() {
							$(target).datagrid('load');
						}
					});
				}
			});
		}
	}

	$.fn.edatagrid = function(options, param) {
		if (typeof options == 'string') {
			var method = $.fn.edatagrid.methods[options];
			if (method) {
				return method(this, param);
			} else {
				return this.datagrid(options, param);
			}
		}

		options = options || {};
		return this.each(function() {
			var state = $.data(this, 'edatagrid');
			if (state) {
				$.extend(state.options, options);
			} else {
				$.data(this, 'edatagrid', {
					options: $.extend({}, $.fn.edatagrid.defaults, $.fn.edatagrid.parseOptions(this), options)
				});
			}
			buildGrid(this);
		});
	};

	$.fn.edatagrid.parseOptions = function(target) {
		return $.extend({}, $.fn.datagrid.parseOptions(target), {
		});
	};

	$.fn.edatagrid.methods = {
		options: function(jq) {
			var opts = $.data(jq[0], 'edatagrid').options;
			return opts;
		},
		updateRowDisplay: function(jq, rowIndex) {
			return jq.each(function() {
				var opts = $.data(this, 'datagrid').options;
				var rows = this.datagrid('getRows');
				var styleValue = opts.rowStyler ? opts.rowStyler.call(this, rowIndex, rows[rowIndex]) : '';

				function _update(frozen) {
					var fields = this.datagrid('getColumnFields', frozen);
					var tr = opts.finder.getTr(this, rowIndex, 'body', (frozen ? 1 : 2));
					var checked = tr.find('div.datagrid-cell-check input[type=checkbox]').is(':checked');
					tr.html(this.renderRow.call(this, this, fields, frozen, rowIndex, rows[rowIndex]));
					tr.attr('style', styleValue || '');
					if (checked) {
						tr.find('div.datagrid-cell-check input[type=checkbox]')._propAttr('checked', true);
					}
				}
				this.datagrid('fixRowHeight', rowIndex);
			});
		},
		saveRow: function(jq, index) {
			return jq.each(function() {
				var dg = $(this);
				var opts = $.data(this, 'edatagrid').options;
				var row = dg.datagrid('getRows')[index];
				var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
				row.dml = row.isNewRecord ? 'i' : 'u';
				if (opts.onBeforeSave.call(this, index) == false) {
					setTimeout(function() {
						dg.datagrid('selectRow', index);
					}, 0);
					return;
				}

				if (opts.hasOwnProperty('parentRow')) {
					row.parentRevNum = opts.parentRow.revisionNum;
				}
				if (dg.datagrid('validateRow', index)) {
					if (url) {
						dg.datagrid('loading');
						dg.datagrid('endEdit', index);
						$.post(url, row, function(data) {
							if (data.hasOwnProperty('msg')) {
								alert(data.msg);
								dg.datagrid('beginEdit', index);
							}
							else {
								data.isNewRecord = null;
								dg.datagrid('updateRow', {
									index: index,
									row: data
								});
								row = data;
								if (opts.tree) {
									var idValue = row[opts.idField || 'id'];
									var t = $(opts.tree);
									var node = t.tree('find', idValue);
									if (node) {
										node.text = row[opts.treeTextField];
										t.tree('update', node);
									} else {
										var pnode = t.tree('find', row[opts.treeParentField]);
										t.tree('append', {
											parent: (pnode ? pnode.target : null),
											data: [{
													id: idValue,
													text: row[opts.treeTextField]
												}]
										});
									}
								}
								opts.onSave.call(this, index, row);
							}
						}, 'json')
										.fail(function() {
							alert("Failed post request!");
						})
										.always(function() {
							dg.datagrid('loaded');
						});
					} else {
						alert("No post URL!");
					}
				}


			});
		},
		destroyRow: function(jq, index) {
			return jq.each(function() {
				var dg = $(this);
				var opts = $.data(this, 'edatagrid').options;
				var row = dg.datagrid('getRows')[index];
				$.messager.confirm('Confirm', 'Are you sure?', function(r) {
					if (r) {
						if (opts.hasOwnProperty('parentRow')) {
							row.parentRevNum = opts.parentRow.revisionNum;
						}
						if (row.isNewRecord) {
							dg.datagrid('cancelEdit', index);
						} else {
							if (opts.destroyUrl) {
								row.dml = 'd';
								var idValue = row[opts.idField || 'id'];
								dg.datagrid('loading');
								$.post(opts.destroyUrl, row, function(data) {
									if (data.hasOwnProperty('msg')) {
										alert(data.msg);
									}
									else {
										if (opts.tree) {
											dg.datagrid('reload');
											var t = $(opts.tree);
											var node = t.tree('find', idValue);
											if (node) {
												t.tree('remove', node.target);
											}
										} else {
											dg.datagrid('cancelEdit', index);
											dg.datagrid('deleteRow', index);
										}
										opts.onDestroy.call(this, index, row);
									}
								}, 'json')
												.fail(function() {
									alert("Failed post request!");
								})
												.always(function() {
									dg.datagrid('loaded');
								});
							} else {
								alert("No post URL!");
							}
						}
					}
				});
			});
		}
		//        editRow: function(jq, index){
		//            return jq.each(function(){
		//                });
		//        },
		//        addRow: function(jq,row){
		//            return jq.each(function(){
		//                });
		//        },
		//        cancelRow: function(jq){
		//            return jq.each(function(){
		//            });
		//        },
	};

	$.fn.edatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, {
		destroyMsg: {
			norecord: {
				title: 'Warning',
				msg: 'No record is selected.'
			},
			confirm: {
				title: 'Confirm',
				msg: 'Are you sure you want to delete?'
			}
		},
		//		destroyConfirmTitle: 'Confirm',
		//		destroyConfirmMsg: 'Are you sure you want to delete?',

		url: null, // return the datagrid data
		saveUrl: null, // return the added row
		updateUrl: null, // return the updated row
		destroyUrl: null, // return {success:true}
		batchUrl: null, // return {success:true}

		tree: null, // the tree selector
		treeUrl: null, // return tree data
		treeDndUrl: null, // to process the drag and drop operation, return {success:true}
		treeTextField: 'name',
		treeParentField: 'parentId',
		onAdd: function(index, row) {
		},
		onEdit: function(index, row) {
		},
		onBeforeSave: function(index) {
		},
		onSave: function(index, row) {
		},
		onDestroy: function(index, row) {
		}
	});
})(jQuery);

Dear All,
I have tried this but didn't work:

Code:

			function onBeforeLoad(param) {
				var rows = dg.edatagrid('getRows');
				for (var i = 0; i < rows.length; i++) {
					if (rows[i].editing)
						dg.edatagrid('endEdit', i);
				}
//				var insertedRows = dg.edatagrid('getChanges', 'inserted');
//				var updatedRows = dg.edatagrid('getChanges', 'updated');
//				var deletedRows = dg.edatagrid('getChanges', 'deleted');
				if (dg.edatagrid('getChanges').length > 0)
					return false;

The strange thing is all my changes are canceled before onBeforeLoad called. I have debugged there are no row on inserted, updated or deleted. Can you suggest a solution for this? Thanks.

Regards,

Alex Wijoyo

Dear Stworthy,
Thanks for your response. I want to achieve master detail cached modifications. So every master detail modifications are made at easyui and post at once to web application. The problem is sometimes there are values resulted from lookup. For example address and city of a customer. Using refreshRow or updateRow will cause detail contents reset. Do you have other suggestions for this? Thanks.

Dear All,
I am trying to implement a method for refreshing edatagrid row contents display without changing its state. Does the method below will achieve my intent? How do I implement it in edatagrid. TIA.

Code:

		updateRowDisplay: function(target, rowIndex) {
			var opts = $.data(target, 'datagrid').options;
			var rows = $(target).datagrid('getRows');
			var styleValue = opts.rowStyler ? opts.rowStyler.call(target, rowIndex, rows[rowIndex]) : '';

			function _update(frozen) {
				var fields = $(target).datagrid('getColumnFields', frozen);
				var tr = opts.finder.getTr(target, rowIndex, 'body', (frozen ? 1 : 2));
				var checked = tr.find('div.datagrid-cell-check input[type=checkbox]').is(':checked');
				tr.html(this.renderRow.call(this, target, fields, frozen, rowIndex, rows[rowIndex]));
				tr.attr('style', styleValue || '');
				if (checked) {
					tr.find('div.datagrid-cell-check input[type=checkbox]')._propAttr('checked', true);
				}
			}
			$(target).datagrid('fixRowHeight', rowIndex);
		},

Regards,

Alex Wijoyo

Hi, I have these two events on my detailview edatagrid for updating parent row after detail row save or destroy. I have tested that parent row internally has changed. But the parent row contents are not shown on parent Datagrid. Can anyone help me with this problem? Thanks in advance.

Code:

                            onSave: function(index, row){
                                var url=dg.edatagrid('options').url;
                                $.post(url, {searchcol:'id',searchval:row.teamId}, function(data){
                                    for(var prop in data.rows[0]) {
                                        parentRow[prop]=data.rows[0][prop];
                                    }
                                },'json');
                            },
                            onDestroy: function(index, row){
                                var url=dg.edatagrid('options').url;
                                $.post(url, {searchcol:'id',searchval:row.teamId}, function(data){
                                    for(var prop in data.rows[0]) {
                                        parentRow[prop]=data.rows[0][prop];
                                    }
                                },'json');
                            },

Regards,

Alex Wijoyo