How to load json data in editor of datagrid column dynamical?

[ejzhang]

datagrid colume define:

Code:

{
	title:'<strong>姓名</strong>',
	field:'EmpID',
	rowspan:2,
	width:68,
	align:'center',
	formatter:function(value,row){
		return row.EmpName;
	},
	editor:{
		type:'combobox',
		options:{
			valueField:'EmpID',
			textField:'EmpName',
			url:'emp.json',
			multiple:false,
			editable:false,
			required:false
		}
	}
}

datagrid onClickRow handle:

Code:

onClickRow:function(rowIndex){
  	if (lastIndex != rowIndex && $(this).datagrid('validateRow', lastIndex)){
		var ed = $(this).datagrid('getEditor', {index:lastIndex, field:'EmpID'});
		if (ed){
			$(this).datagrid('getRows')[lastIndex]['EmpName'] = $(ed.target).combobox('getText');
		}
		$(this).datagrid('endEdit', lastIndex);
		$(this).datagrid('beginEdit', rowIndex);
		lastIndex = rowIndex;
	} else {
		$(this).datagrid('selectRow', lastIndex);
	}
}

emp.json:

Code:

[
	{"EmpID":289,"EmpName":"\u66f9\u6587\u771f"},
	{"EmpID":290,"EmpName":"\u675c\u6c38\u5f3a"},
	{"EmpID":291,"EmpName":"\u51af\u7acb\u660e"},
	{"EmpID":292,"EmpName":"\u4ed8\u6653\u94a2"},
	{"EmpID":293,"EmpName":"\u90ed\u8fde\u745e"},
	{"EmpID":295,"EmpName":"\u674e\u5b9d\u5149"},
	{"EmpID":296,"EmpName":"\u674e\u798f\u589e"},
	{"EmpID":294,"EmpName":"\u674e\u5efa"},
	{"EmpID":297,"EmpName":"\u674e\u6770\u5112"},
	{"EmpID":298,"EmpName":"\u674e\u4fca\u51ef"},
	{"EmpID":299,"EmpName":"\u674e\u5e0c\u81e3"},
	{"EmpID":301,"EmpName":"\u5218\u7115\u5947"},
	{"EmpID":300,"EmpName":"\u5218\u8f89"},
	{"EmpID":302,"EmpName":"\u8def\u5bb6\u8fdb"},
	{"EmpID":303,"EmpName":"\u9a6c\u5b50\u6d9b"},
	{"EmpID":304,"EmpName":"\u6bdb\u6811\u5cad"},
	{"EmpID":305,"EmpName":"\u7c73\u6842\u6885"},
	{"EmpID":306,"EmpName":"\u725b\u6811\u6a80"},
	{"EmpID":307,"EmpName":"\u6f58\u745e\u5b58"},
	{"EmpID":308,"EmpName":"\u4efb\u56fd\u653f"},
	{"EmpID":309,"EmpName":"\u82ae\u5efa\u8f89"},
	{"EmpID":310,"EmpName":"\u738b\u5efa\u5fe0"},
	{"EmpID":311,"EmpName":"\u738b\u514b\u65b0"},
	{"EmpID":312,"EmpName":"\u738b\u7acb\u5cf0"}
]

[ejzhang]

Why it's not work? The combobox is empty.

[ejzhang]

I want to reload json data into combobox editor of datagrid column when i click a button each times. thanks very much!

[stworthy]

Please refer to this example http://jsfiddle.net/xAnDj/.

[ejzhang]

thanks first! but i need reload different data each times, such as fetch from a background script with different argument.

[stworthy]

After get the combobox editor object, call 'reload' method to reload its new data.

Code:

$(this).datagrid('beginEdit', rowIndex);
var ed = $(this).datagrid('getEditor',{index:rowIndex,field:'EmpID'});
$(ed.target).combobox('reload', yoururl);

[ejzhang]

I cannot do it correctly, help me please! these are my code snippets as following:

Code:

var empData = new Array();

Code:

onLoadSuccess:function(data){
	if (data.rows.length > 0){
		$(this).datagrid('selectRow',0);
		var ed = $(this).datagrid('beginEdit', 0);
		if (ed){
			$(ed.target).combobox('loadData', empData);
		}
		$(this).datagrid('endEdit', 0);
	}
}

Code:

$btnSearch.click(function(){
	$.ajaxSettings.async = false;
	$.getJSON('getjson.php', {"dept": $sltDept.children('option:selected').val()}, function(data){empData = data.rows;});
	$.ajaxSettings.async = true;
	$gridAllowance.datagrid('load',{
		"dept":$sltDept.children('option:selected').val(),
		"date":$dbxDate.val()
	});
});

[stworthy]

Please try the following code.

Code:

onLoadSuccess:function(data){
	if (data.rows.length > 0){
		$(this).datagrid('selectRow',0);
		$(this).datagrid('beginEdit', 0);
		var ed = $(this).datagrid('getEditor', {index:0,field:'EmpID'});
		if (ed){
			$(ed.target).combobox('loadData', empData);
		}
		$(this).datagrid('endEdit', 0);
	}
}

[ejzhang]

I try to test that code, but nothing loaded yet!

[stworthy]

Try to call console.log(empData) before loadData for combobox to see if the empData is empty.

[ejzhang]

That's ok!

Code:

$(this).datagrid('selectRow',0);
$(this).datagrid('beginEdit',0);
var ed = $(this).datagrid('getEditor', {index:0, field:'EmpID'});
if (ed){
	console.log(empData);
	$(ed.target).combobox('loadData', empData);
}
$(this).datagrid('endEdit',0);

[ejzhang]

some errors:

[stworthy]

Don't really known why to 'beginEdit' and then 'endEdit' at once in 'onLoadSuccess' event. Please refer to this example http://jsfiddle.net/gEJmG/. When click a row to begin editing, the combobox editor is created and its data is loaded with new 'empData'.

[ejzhang]

It's okay! thanks very much stworthy!