Print Page - Dynmically populating a combobox cell in a datagrid

Title: Dynmically populating a combobox cell in a datagrid
Post by: thecyberzone on January 30, 2015, 11:14:24 PM

I have a grid as follows :

(http://1.bp.blogspot.com/-EosRNpwhr8U/VMxxOBGxPNI/AAAAAAAAB7A/v27E9dCKhdg/s1600/a1.jpg)

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.

Title: Re: Dynmically populating a combobox cell in a datagrid
Post by: stworthy on January 31, 2015, 01:24:56 AM

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

Title: Re: Dynmically populating a combobox cell in a datagrid
Post by: thecyberzone on January 31, 2015, 01:43:23 AM

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.

Title: Re: Dynmically populating a combobox cell in a datagrid
Post by: Opan Mustopah on January 31, 2015, 01:52:03 AM

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?

Title: Re: Dynmically populating a combobox cell in a datagrid
Post by: thecyberzone on January 31, 2015, 02:07:41 AM

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.

Title: Re: Dynmically populating a combobox cell in a datagrid
Post by: stworthy on January 31, 2015, 02:39:40 AM

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.

Title: Re: Dynmically populating a combobox cell in a datagrid
Post by: thecyberzone on January 31, 2015, 02:44:19 AM

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.

Title: Re: Dynmically populating a combobox cell in a datagrid
Post by: thecyberzone on January 31, 2015, 02:47:37 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: thecyberzone on January 30, 2015, 11:14:24 PM