Dynmically populating a combobox cell in a datagrid

[thecyberzone]

I have a grid as follows :



Now I want a combobox editor in date column whose value will be populated depending on the value in code column. What I have already tried is given below. I think I could not call test2bak.php correctly under onBeforeEdit event of the grid. Code is given below :

Code:

<script type="text/javascript">

$(function(){
		$('#dg').datagrid({
					method: 'get',
					url:'test1back.php',
					onClickCell: onClickCell,					
					
					fitColumns:true,
					singleSelect:true,
					rownumbers:true,
					loadMsg:'loading...',
					height:'auto',
					
					columns:[[
						{field:'name',title:'name',width:200},
    					{field:'code',title:'Code',width:100},
    					{field:'dt',title:'Date',width:100,align:'center',
	    					editor:{
	    						type:'combobox',
	    						options:{
	    							valueField:'dt',
	    							textField:'dt',
									panelHeight:90,
									required:true
	    						}
	    					}
	    				}
    				]],
    				
[color=red]    				onBeforeEdit: function(index,row){
    					var coldt = $(this).datagrid('getColumnOption', 'dt');
    					coldt.editor = {
    							options:{
									url:'test2back.php?code='+row.code,
    							}
    					}; 
    					// coldt.combobox('reload', 'test2back.php?code='+row.code);
    				}[/color]
    	});
 });   				
    				
    				

 	$.extend($.fn.datagrid.methods, {
		editCell: function(jq,param){
			return jq.each(function(){
				var opts = $(this).datagrid('options');
				var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
				for(var i=0; i<fields.length; i++){
					var col = $(this).datagrid('getColumnOption', fields[i]);
					col.editor1 = col.editor;
					if (fields[i] != param.field){
						col.editor = null;
					}
				}
				$(this).datagrid('beginEdit', param.index);
				for(var i=0; i<fields.length; i++){
					var col = $(this).datagrid('getColumnOption', fields[i]);
						col.editor = col.editor1;
				}	
			});
		}
	});

 	var editIndex = undefined;
 	
	function endEditing(dg){
		if (editIndex == undefined){return true}
		if (dg.datagrid('validateRow', editIndex)){		
			
			dg.datagrid('endEdit', editIndex);				
			editIndex = undefined;
			
//var rec = $(this).datagrid('getSelected');						
// save here 				
			return true;
		} else {
			return false;
		}
	}
	
	function onClickCell(index, field){
		if (endEditing($(this))){
			$(this).datagrid('selectRow', index)						
			.datagrid('editCell', {index:index,field:field}); 
			editIndex = index;
		}
	}
</script>

I think some incorrect reference is there in onBeforeEdit event. Anybody please help me.

test2bak.php contains :

Code:

<?php
include("config.php");
$code = intval($_REQUEST['code']);
 
$sql = "select * from test2 where code=$code";

$rs = mysql_query($sql) or die('not found!');
if ($rs){
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	$result["rows"] = $items;
	echo json_encode($result);
} else {
	echo json_encode(array('msg'=>'No section allocated with this user!'));
}
?>

Thanks in advance.

[stworthy]

Using the 'onBeginEdit' event may be more appropriate.

Code:

$('#dg').datagrid({
    onBeginEdit: function(index,row){
        var ed = $(this).datagrid('getEditor', {index:index,field:'dt'});
        if (ed){
            $(ed.target).combobox('reload','test2back.php?code='+row.code)
        }
    }
})

[thecyberzone]

I have done as follows:

Code:

$(function(){
		$('#dg').datagrid({
					method: 'get',
					url:'test1back.php',
					onClickCell: onClickCell,					
					
					fitColumns:true,
					singleSelect:true,
					rownumbers:true,
					loadMsg:'loading...',
					height:'auto',
					
					columns:[[
						{field:'name',title:'name',width:200},
    					{field:'code',title:'Code',width:100},
    					{field:'dt',title:'Date',width:100,align:'center',
	    					editor:{
	    						type:'combobox',
	    						options:{
	    							valueField:'dt',
	    							textField:'dt',
	    							url:'test2back.php',
									panelHeight:90
	    						}
	    					}
	    				}
    				]],
    				
    			    onBeginEdit: function(index,row){
    				    var ed = $(this).datagrid('getEditor', {index:index,field:'dt'});
        				if (ed){
            				$(ed.target).combobox('reload','test2back.php?code='+row.code)
        				}
    				}
    	});
    	
 });   

Still combobox in date column doesnot contain any date returned from test2back.php.

[Opan Mustopah]

i have a similiar problem with you sir. i can't set value or text to editor when i put that function inside event onBegin Edit.
how to solve this issue?

[thecyberzone]

After examining cosole.log this make me understand that somehow the returned value cannot set the value in combobox using reload function. Please let me know how to set the values in combobox here.

Or is there any other way so that the entire options of the tagrget editor is redefined again in onBeginEdit to reload the combobox container.

[stworthy]

Please check if the url 'test2back.php?code='+row.code can return the correct data. The combobox component requires the JSON array to fill its option items, otherwise you should need to use the 'loadFilter' function to convert the original data to the standard JSON format.

[thecyberzone]

Just see browser returns from url - http://10.141.4.71/sm/test2back.php?code=3 is as follows, I think it is JSON encoded.

{"rows":[{"Id":"8","code":"3","dt":"2014-10-29"},{"Id":"9","code":"3","dt":"2015-01-12"}]}

Still Combobox does not contain any value.

[thecyberzone]

I got it, problem is in backend php file.

test2back.php contains as follows :

$result["rows"] = $items;
echo json_encode($result);

it should be -

echo json_encode($items);

only.

Thanks for your help.