Print Page - Populating a combobox editor column in a subgrid depending on another column

I have made a subgrid with following column:

(http://2.bp.blogspot.com/-CsF7vrlUAfo/VMC8lql4LuI/AAAAAAAAB6Y/10Gx2uBYcTE/s1600/t1.jpg)

Here subgrid contain Functional Competency, Competency Type, Rating, Mapped Program, trgCode and Plan Date. Now my aim is :

1. If the Competency Type is Functional - Rating Column will be editable, ie, selection from a dropdown combo containing X, Y, Z or NA. If Competency Type is General, Rating Column's editor will be disabled.
2. If the Rating Column contains Z or Functional Competency is General then the Plan Date vale can be entered, i.e. editor in Plan date column will be enable.
3. Now Plan Date combobox will be populated from an external JSON PHP source where Table selection will depend on Year and the subgrid column Mapped Program by passing row and Year as parameter.

I have already done Logic 1 and 2 and External PHP file coding is also working fine, but could not solve how to populated Plan Date combobox depending on Column Mapped Program or corresponding Hidden column trgCode.

I have used following javascript code:

Code:

<script type="text/javascript">
	$(function(){
		$('#dg1').datagrid({
			view: detailview,
			detailFormatter:function(index,row){
				return '<div style="padding:2px"><table class="ddv" ></table></div>';
			},
			onExpandRow: function(index,row){
				
				var yr = $('#year').combobox('getValue');
				var g = $('#cg').combogrid('grid');	
				var s = g.datagrid('getSelected');
				var j = encodeURIComponent($('#jobpos').combobox('getValue'));
					
				var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
				
				ddv.datagrid({
					
					method: 'get',
					url:'rating2.getSkills.php?yr='+yr+'&secode='+s.secode+'&jobpos='+j+'&tno='+row.tno,
					onClickCell: onClickCell,					
					
					fitColumns:true,
					singleSelect:true,
					rownumbers:true,
					loadMsg:'loading...',
					height:'auto',
					
					columns:[[
    				{field:'year',title:'',width:0,hidden:true},   			
    				{field:'tno',title:'',width:0,hidden:true},
    				{field:'skname',title:'Functional Competencies',width:250},
    				{field:'sktype',title:'T',width:15,hidden:false},
    				{field:'mrating_ass',title:'Rating',width:65,align:'center',
    					editor:{
    						type:'combobox',
    						options:{
    							valueField:'mrating_ass',
    							textField:'mrating_ass',
								data: [ {mrating_ass:'X', mrating_ass:'X'},
										{mrating_ass:'Y', mrating_ass:'Y'},
										{mrating_ass:'Z', mrating_ass:'Z'},
										{mrating_ass:'NA', mrating_ass:'NA'}
								],
								panelHeight:90,
								required:true
    						}
    					}
    				},
    				{field:'mapprog',title:'Associated Module',width:340},
    				{field:'trgcode',title:'',width:0,hidden:true},
    				{field:'trgdate',title:'PlanDate (MDY)',width:125,align:'center',
    					editor:{
    						type:'combobox',
    						options:{
    							valueField:'trgdate',
    							textField:'trgdate',
    							url:'rating2.getPlan.php?yr='+yr+'&trgcode='+row.trgcode,
								panelHeight:90,
								required:true
    						}
    					}
    				}
    				]],
										
					onResize:function(){
						$('#dg1').datagrid('fixDetailRowHeight',index);
					},
					onLoadSuccess:function(){
						setTimeout(function(){
							$('#dg1').datagrid('fixDetailRowHeight',index);
						},0);
					},
					onBeforeEdit: function(index,row){
						var colRating = $(this).datagrid('getColumnOption', 'mrating_ass');
						if(row.sktype == 'General') {
							colRating.editor = null;
						}
    					else {
    						colRating.editor = {
    							type:'combobox',
    							options:{
    								valueField:'mrating_ass',
    								textField:'mrating_ass',
									data: [ {mrating_ass:'X', mrating_ass:'X'},
											{mrating_ass:'Y', mrating_ass:'Y'},
											{mrating_ass:'Z', mrating_ass:'Z'},
											{mrating_ass:'NA', mrating_ass:'NA'}
									],
									panelHeight:90,
									required:true
    							}
    						};
							var colDate = $(this).datagrid('getColumnOption', 'trgdate');
    						if (row.mrating_ass == 'Z'){
								colDate.editor = 'combobox';	

// may be problem is here , calling of reload method is not correct, 
// or have to use URL in some another way to populate combobox editor

								colDate.editor.combobox('reload', 'rating2.getPlan.php?yr='+yr+'&trgcode='+row.trgcode);							
								
							}
							else {
								colDate.editor = null;
							} 
						}
	  
	 				},
	 				onAfterEdit: function(index,row){
						var colDate = $(this).datagrid('getColumnOption', 'trgdate');
   						if (row.mrating_ass == 'X' || row.mrating_ass == 'Y'){
							colDate.editor('setValue','');								
						}
	 				}
				});
				$('#dg1').datagrid('fixDetailRowHeight',index);
			}
		});	
	});
		
	
</script>

External JSON PHP file rating2.getPlan.php is as follows:

Code:

<?php
include 'lock.php';
include 'config.php';

$yr =  intval($_REQUEST['yr']) ;
$trgcode = $_REQUEST['trgcode'];

$sql = "select trgdate from trgplan where PCode='$trgcode' and year=$yr order by trgdate";
$rs = mysql_query($sql) or die('not found!');
if ($rs){
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	echo json_encode($items);
} 

?>

Anyone please help by solving how to populate plandate combobox depending on trgcode/mapprog value.

Thanks in advance.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: thecyberzone on January 22, 2015, 02:32:04 AM