Thanks Jarry, it works. But insted of edatagrid if I use datagrid with row editing then the first page (number of rows defined for a page) vanishes just after the pressing any key in any column editor box.

I have used a editable datagrid with scrollview as the data contains more than 5000 rows. No whenever I am trying to edit a cell in the datagrid, just after typing first character - top 10 rows got vanished. I have changed the view from scrollview to normal, it is working fine. But whenever I am changing the view as scrollview the same thing happens. Anybody please help me, I cann't understand why this is happening.

Thanks buddy

There is no demo available for new Drawer component. Please make it available for the users. Although in documentation it is available.

There is no documentation found about Datagrid subgrid method. Please include it in the documentation.

code.reloado.com server is down. Please reload the examples to somewhere else.

code.reloado.com server is down.      please upload the responsive design layout somewhere else.

We were eagerly waiting for this version. Already it has taken a lot of time as compared to previous.

Yes, same way it is working fine in different form, but in a particular form this messager window is not closing. I am attaching the entire code, so that you can help me in this regard.

Code:

// ************** for editable datagrid ****************************
var editIndex = undefined;

$.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;
			}	
		});
	}
});

function endEditing(ddv,index){
	if (editIndex == undefined){return true}
	if (ddv.datagrid('validateRow', editIndex)){	
		ddv.datagrid('endEdit', editIndex);				
		editIndex = undefined;
		var rec = index;	
		return true;
	} else {
		return false;
	}
}

function onClickCell(index, field){
	if (endEditing($(this),index)){
		$(this).datagrid('selectRow', index)						
		.datagrid('editCell', {index:index,field:field}); 
		editIndex = index;
	}
}

	$.extend($.fn.combogrid.defaults, {
	  filter: function(q, row){
	    var opts = $(this).combogrid('options');
	    return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0;
	  }
	});
	
	$.extend($.fn.datagrid.defaults.editors,{
		label:{
			init:function(container,options){
				return $('<div></div>').appendTo(container);
			},
			getValue:function(target){
				return target.value || $(target).html();
			},
			setValue:function(target,value){
				target.value = value;
				$(target).html(value);
			},
			resize:function(target,width){
				$(target)._outerWidth(width);
			}
		}
	});
	
// ************** for editable datagrid ****************************	


function loadNeed() {

	v = $('[name=upto]:checked').val();

	var moncal = $('#dt').datetimespinner('getValue');
	
	var selmon = moncal.split('-');
	var dt1 = new Date(selmon[1],selmon[0],1);
	var y = dt1.getFullYear();
	var m = dt1.getMonth();	

	var caldt2 = (new Date(new Date(y,m,1)-1));
	var cald2 = caldt2.getFullYear()+'-'+dDigit(caldt2.getMonth()+1)+'-'+caldt2.getDate();
	
	var caldt1 = (new Date(y,m-1,1));
	var cald1 = caldt1.getFullYear()+'-'+dDigit(caldt1.getMonth()+1)+'-01';

	if(v=='mon'){
		if(m<4){
			var dt1 = (new Date(y-1,4,1));
			var d1 = dt1.getFullYear()+'-'+dDigit(dt1.getMonth())+'-01';
		}
		else {
			var dt1 = (new Date(y,4,1));
			var d1 = dt1.getFullYear()+'-'+dDigit(dt1.getMonth())+'-01';
		}
		var dt2 = (new Date(new Date(y,m,1)-1));
		var d2 = dt2.getFullYear()+'-'+dDigit(dt2.getMonth()+1)+'-'+dt2.getDate();		
	}
	else {
		if(m<4){
			var dt1 = (new Date(y-1,4,1));
			var d1 = dt1.getFullYear()+'-'+dDigit(dt1.getMonth())+'-01';
			var dt2 = (new Date(y,3,31));
			var d2 = dt2.getFullYear()+'-'+dDigit(dt2.getMonth()-1)+'-31';
		}
		else {
			var dt1 = (new Date(y,4,1));
			var d1 = dt1.getFullYear()+'-'+dDigit(dt1.getMonth())+'-01';
			var dt2 = (new Date(y+1,3,31));
			var d2 = dt2.getFullYear()+'-'+dDigit(dt2.getMonth()-1)+'-31';
		}
	}
	
	if(m<4){
		var yr = y-1;
	} else {
		var yr = y;
	}	
 
	var sec = $('#cg2').combogrid('getText');
 	// alert('getDeptNeed.php?dt1='+d1+'&dt2='+d2+'&caldt1='+cald1+'&caldt2='+cald2+'&sec='+sec+'&yr='+yr);
	$('#dg1').datagrid({
		idField: 'ID',
		method: 'get',
		url: 'getDeptNeed.php?dt1='+d1+'&dt2='+d2+'&caldt1='+cald1+'&caldt2='+cald2+'&sec='+sec+'&yr='+yr,
		onClickCell:onClickCell,
		fitColumns:true,
		singleSelect:true,
		rownumbers:true,
		autoRowHeight:true,
		editorHeight:24,
		loadMsg:'loading...',
		height:'auto',
		
        columns:[[  
          {field:'ID',width:0,hidden:true},
          {field:'TNO2',title:'T/No',width:70,align:'center'},
          {field:'NAME',title:'Name',width:200,align:'left'},
          {field:'MOBILE',title:'Mobile',width:100,align:'left',editor:'textbox'},
          {field:'DESCODE',title:'Desig',width:40,align:'center'},
          {field:'PROGNAME',title:'Module',width:300,align:'left'},
          {field:'PROGCODE',title:'ProgId',width:60,align:'center'},
          {field:'DURATION',title:'Days',width:40,align:'center'},
          {field:'ASSDATE',title:'Plan Date',width:90,align:'center'},
          {field:'STATUS',title:'Status',width:50,align:'center',
            editor:{
            	type:'textbox',
            	options:{
					readonly:true
				}
			}
          },
          {field:'OLDDATE',width:0,hidden:true}, 
          {field:'CALDATE',title:'Cal. Date',width:120,align:'center'  ,
            editor:{
              type:'combobox',
              options:{
                valueField:'ST_DT',
                textField:'ST_DT',
                panelHeight:100,
                required:true
              }
            }
          },
		  {field:'action',title:'Save',width:40,align:'center',
				formatter:function(value,row,index){
					if(row.editing) {
						return '<a href="javascript:void(0)" onclick="#"><img src="images/checkmark.png" /></a> ';
					}
					else {
						return '<a href="javascript:void(0)" onclick="#"><img src="images/save.png" /></a> '; 
					}
				}
		  }
        ]] ,
		onBeforeEdit: function(index,row){
			row.editing = true;
			$(this).datagrid('updateRow',{index:index, row:{}});
			
 			var colDate = $(this).datagrid('getColumnOption', 'CALDATE');
 			if (row.STATUS!='A') {
 				colDate.editor = {
		    					type:'combobox',
    							options:{
    								method: 'get',
    								valueField:'ST_DT',
									textField:'ST_DT',
									panelHeight:100,
									url: 'getDate.php?dt1='+cald1+'&dt2='+cald2+'&pc='+row.PROGCODE+'&yr='+yr,
									onLoadSuccess: function(data){
										 if (!data.length){
											// var ed = $(this).datagrid('getEditor', {index:index,field:'CALDATE'});
											// var combo = $(ed.target);
											// combo.combobox('disable'); 
											$(this).combobox('disable');
											if (row.CALDATE=='--') {
												$.messager.alert({title:'Information', msg:'Target is already full for this module; Please try next time.'});
											}
										}
									}
								}
							};
			}
			else {
				colDate.editor = null;
			} 
 			var colMobile = $(this).datagrid('getColumnOption', 'MOBILE');
			$(this).datagrid('fixRowHeight');
		}, 
		onAfterEdit:function(index,row){ 
			row.editing = false;
			$(this).datagrid('fixRowHeight');
			
			if(row.CALDATE!=row.OLDDATE) {
				if(row.CALDATE=='--'){
					$(this).datagrid('updateRow',{index:index, row: {ID:row.ID,OLDDATE:row.OLDDATE,STATUS:"P"}});
				} else {
				    $(this).datagrid('updateRow',{index:index, row: {ID:row.ID,OLDDATE:row.OLDDATE,STATUS:"N"}});
				}
				var moncal = $('#dt').datetimespinner('getValue');
				//var yr = moncal.substring(3,7);
				//var mn = moncal.substring(0,3);
				//alert(mn);
				//$.messager.alert('Information', 'nomi.Update.php?tno='+row.TNO2+'&pc='+row.PROGCODE+'&cdt='+row.CALDATE+'&mo='+row.MOBILE+'&yr='+yr);
				//alert("nomi.Update.php?tno="+row.TNO2+"&pc="+row.PROGCODE+"&cdt="+row.CALDATE+"&mo="+row.MOBILE+'&yr='+yr);
		      	$.get("nomi.Update.php?tno="+row.TNO2+"&pc="+row.PROGCODE+"&cdt="+row.CALDATE+"&mo="+row.MOBILE+'&yr='+yr, function(data, status){
		      	var result = eval('('+data+')');
		      	if(!result.errMsg) {
		      		if(row.CALDATE!=''){
						$.messager.show({title:'Information', msg:row.NAME+' has been nominated successfully!',timeout:2000,showType:'slide'});
					} 
				} else {
					$.messager.show({title:'Error', msg:result.errMsg,timeout:2000,showType:'slide'});
				}
			  });				
			}

		} 
	}); 
	
}

function getRowIndex(target){
	var tr = $(target).closest('tr.datagrid-row');
	return parseInt(tr.attr('datagrid-row-index'));
}


document.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Delete") {
    	var row = $('#dg1').datagrid('getSelected');
    	if (row){
			$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
			    if (r){
			        //alert("Deleting T/No. : "+row.ID);
			        $.get("delNomi.php?ID="+row.ID, function(data, status){
					    var result = eval('('+data+')');
				      	if(result.errMsg) {
							$.messager.show({title:'Message', msg:result.errMsg,timeout:3000,showType:'slide'});
						} 
						$('#dg1').datagrid('reload');	
					});
			    }
			});    		   
        }
    }
});



	

I have also tested the same code in easyui version 1.5.5.7, same thing is happening. But in another form the code is working fine. I don't know why this is happening? Is there any timeout problem?

If you put result.errMsg in single quote like  msg:'result.errMsg', then insted of displaying actual message only 'result.errMsg' is displayed, and not only that same problem exists, confirmation window is not closing, after pressing ok or cancel or close button at least three times it is closing.

I have used following routine to delete a row of datagrid by pressing DEL key, everything is working fine, row is also getting deleted, but Messager window is not closing, after pressing Close button at the top-right corner repeatedly the Messager window got closed.

Anybody please help me by solving why this is happening. I am using Easyui 1.5.3. with PHP 5.3/MySQL 5.1 in RHEL 6.0.

Code:

document.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Delete") {
    	var row = $('#dg4').datagrid('getSelected');
    	if (row){
			$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
			    if (r){
			        //alert("Deleting Record : #"+row.ID);
			        $.get("delAddl.php?ID="+row.ID, function(data, status){
					    var result = eval('('+data+')');
				      	if(result.errMsg) {
							$.messager.show({title:'Message', msg:result.errMsg,timeout:2000,showType:'slide'});
						}			        	
						$('#dg4').datagrid('reload');
						$('#prog').combogrid('clear');
						$('#st_dt').textbox('clear');
						$('#dur').textbox('clear');
						$('#name').textbox('clear');
						$('#descode').textbox('clear');
						$('#mobile').textbox('clear');						
					});
			    }
			});    		   
        }
    }
}); 

And what about css classes against panel-title f-row, are they readily available in jeasyui or have to define?

And how to disable a single row in the combobox programmatically?

I am facing same problem in case of messager.alert control, it goes out of viewport, after scrolling it becomes visible. Please help me.