Print Page - Datagrid editable

Hello

I have a datagrid with two fields, for this example lets call them A and B.

Row B is always editable so i have made it this way

<th data-options="field:'B',editor:'textbox'" width="100">B</th>

but A should only be editable when i append a new row, so i need to change A to editable from my append function

function append(){
if (endEditing()){
$('#kundeData').datagrid('appendRow',{status:'P'});
editIndex = $('#kundeData').datagrid('getRows').length-1;
$('#kundeData').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}

How do i do that?

Regards
Bakkers

Here is the solution to solve this question:

1. When appending a new row, set a 'isNewRow' property indicating this is a new added row.

Code:

$('#dg').datagrid('appendRow',{status:'P',isNewRow:true});

2. Use the 'onBeforeEdit' event to prevent from editing the 'A' field on the old rows.

Code:

$('#dg').datagrid({
	onBeforeEdit: function(index,row){
		var col = $(this).datagrid('getColumnOption','A');
		if (row.isNewRow){
			col.editor = 'textbox';
		} else {
			col.editor = null;
		}
	},
	onAfterEdit: function(index,row){
		row.isNewRow = false;
	}
})

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: bakkers on March 03, 2016, 12:33:08 AM