How to Add a Method to edatagrid

[alex_wijoyo]

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

[stworthy]

Call 'refreshRow' or 'updateRow' methods to refresh a row'
s content.

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

[stworthy]

The simple way to extend the 'updateRowDisplay' method can be defined as:

Code:

<script>
$.extend($.fn.datagrid.methods, {
	updateRowDisplay: function(jq, rowIndex){
		return jq.each(function(){
			var opts = $(this).datagrid('options');
			var row = $(this).datagrid('getRows')[rowIndex];
			var tr = opts.finder.getTr(this, rowIndex);
			var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
			for(var i=0; i<fields.length; i++){
				var field = fields[i];
				var cell = tr.find('td[field="'+field+'"] div.datagrid-cell');
				cell.html(row[field]);
			}
			$(this).datagrid('fixRowHeight', rowIndex);
		});
	}
});	
</script>	

Now call 'updateRowDisplay' method to do this action.

Code:

$('#dg').datagrid('updateRowDisplay', rowIndex);

[alex_wijoyo]

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