Print Page - How to Add a Method to edatagrid

Title: How to Add a Method to edatagrid
Post by: alex_wijoyo on March 25, 2013, 03:38:30 AM

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

Title: Re: How to Add a Method to edatagrid
Post by: stworthy on March 25, 2013, 04:03:04 PM

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

Title: Re: How to Add a Method to edatagrid
Post by: alex_wijoyo on March 28, 2013, 07:41:42 PM

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.

Title: Re: How to Add a Method to edatagrid
Post by: stworthy on March 29, 2013, 06:53:27 PM

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

Title: Re: How to Add a Method to edatagrid
Post by: alex_wijoyo on March 31, 2013, 12:14:52 AM

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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: alex_wijoyo on March 25, 2013, 03:38:30 AM