Print Page - Dynamicaly loading of combobox column of a subgrid depending on another combobox

I have a subgrid as follows :

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:'rating.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:'',width:0,hidden:true},
    				{field:'mrating_ass',title:'Rating',width:60,
    					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:360},
    				{field:'trgdate',title:'Plan Date',width:120,editor:'datebox'}
    				]],
										
					onResize:function(){
						$('#dg1').datagrid('fixDetailRowHeight',index);
					},
					onLoadSuccess:function(){
						setTimeout(function(){
							$('#dg1').datagrid('fixDetailRowHeight',index);
						},0);
					}
				});
				$('#dg1').datagrid('fixDetailRowHeight',index);
			}
		});	
	});
</script>

Now in the above example mrating_ass column contains 4 types of value - X, Y, Z and NA. Now if I select Z value from this combobox I want to populate content of trgdate column from a table corresponding to mapprog column, i.e., mapprog will be sent as parameter to loading url (PHP file) of combobox editor of trgdate column and all rows (only dates) containing mapprog value will be returned to populate dropdown combobox so that I can choose a date from it.

Anybody please help by by giving an idea illustrating how can I solve this problem.

I have already solved this by using onBeforeEdit method of column definitions as follows:

Code:

					onBeforeEdit: function(index,row){

/*         				var col = $(this).datagrid('getColumnOption', 'trgdate');
        				if (row.mrating_ass == 'Z'){
            				col.editor = 'datebox';
        				} else {
            				col.editor = null;
        				}
*/

						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 = 'datebox';								
							}
							else {
								colDate.editor = null;
							}
						}
	  
	 				},

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: thecyberzone on January 07, 2015, 09:43:12 PM