Datagrid problem on adding row multiple times

[iLLuSia]

Hello,

I have a datagrid:

Code:

$('#dg').datagrid({
	columns: [[
		{field: 'func', title: '', sortable: false, 
			formatter: function(value, row, index) {
				var s = '<button class="icon-add" onclick="addDatagridRow('+index+')" style="width:16px; height:16px; border:0"></button>';
				return s;
			}
		},
	//...

And the function to add a row. It's supposed to add one right below the row, that has been clicked.

Code:

function addDatagridRow(index) {
	var row = $('#dg).datagrid('getRows')[index];
	$('#dg).datagrid('insertRow', {index:index+1, row:{setup: row.setup, setupid: row.setupid}});
}

When I add one row, everything is fine. But when I add another, the indexes aren't correct anymore. It looks like the value was fixed when the datagrid was initialized.

For example I have 3 rows with indexes:
1, 2, 3
And I add a row in the middle, the indexes are:
1, 2, 3, 3
The last row, although being in the 4th position, the formatter returns the value it has been initialized with.

I'm sorry, I don't know how to better explain this. Is there a way to update the formatter, or the column? Or am I doing something wrong? Thank you in advance for any help.

[jarry]

Please follow these steps to solve this issue.
1. Define the formatter function as:

Code:

formatter: function(value, row, index) {
	var s = '<button class="icon-add" onclick="addDatagridRow(event)" style="width:16px; height:16px; border:0"></button>';
	return s;
}

2. Retrieve the 'index' value before insert a row.

Code:

function addDatagridRow(event) {
	var index = $(event.target).closest('.datagrid-row').attr('datagrid-row-index');
	index = parseInt(index, 10);
	var row = $('#dg).datagrid('getRows')[index];
	$('#dg).datagrid('insertRow', {index:index+1, row:{setup: row.setup, setupid: row.setupid}});
}

[iLLuSia]

Thank you very much. This works perfectly.