Changing of Editor type in datagrid not working

[thecyberzone]

I have defined onBeforeEdit of an editable datagrid as follows:

Code:

					onBeforeEdit: function(index,row){
						flag = 0;
						alert("onBeforeEdit");
						var colDate = $(this).datagrid('getColumnOption', 'trgdate');
						var colRating = $(this).datagrid('getColumnOption', 'mrating_ass');
						
						if(row.sktype == 'General') {
							colRating.editor = null;
							
							alert(row.sktype); 
						    colDate.editor = {
		    					type:'combobox',
    							options:{
    								method: 'get',
    								valueField:'trgdate',
    								textField:'trgdate',
									panelHeight:135,
									url: 'rating.getPlan.php?yr='+yr+'&trgcode='+row.trgcode,
								 	onLoadSuccess: function(data){
					                if (data.length == 0) {
										// alert(data.length);
										flag = 1;
										alert('G'+flag);
										colDate.editor = 'datebox';
									}
					            }
    							}
							};
						}
    					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
    							}
    						};
							
    						if (row.mrating_ass == 'Z'){
    							colDate.editor = {
			    					type:'combobox',
	    							options:{
	    								method: 'get',
	    								valueField:'trgdate',
	    								textField:'trgdate',
										panelHeight:135,
										url: 'rating.getPlan.php?yr='+yr+'&trgcode='+row.trgcode,
									 	onLoadSuccess: function(data){
						                if (data.length == 0) {
						                	flag = 1;
											alert('Z'+flag);
											colDate.editor = 'datebox';
										}
						            }
	    							}
								};	
										
						        												
							}
							else {
								colDate.editor = null;
							}
						}
						alert(2+"-"+flag);
						if (flag == 1) {
							alert('Zero');
							colDate.editor = null;
							colDate.editor = {
			    					type:'datebox'
			    			};
						}
	  
	 				},

What is happening here, probably onLoadSuccess of colDate editor is firing with some delay, in above example, the firing sequence is as follows:

1. onBeforeEdit
2. then in If (row.sktype=='General') shows row.sktype -> General
3. Then it directly goes out of IF - ELSE and show 2 and Flag = 0
4. After it I don't know it shows G1 / Z1 in corresponding onLoadSuccess event.

So, I couldnot change the colDate editor from combobox to datebox as flag show 0, but it should be 1 when there is no data loaded in combobox editor.

[stworthy]

Please extend a new editor to achieve your functionality.

Code:

$.extend($.fn.datagrid.defaults.editors, {
    combodate: {
        init: function(container, options){
            var input = $('<span><span class="c"><input class="c"></span><span class="d"><input class="d"></span></span>').appendTo(container);
            input.find('input.c').combobox($.extend({}, options, {
                onLoadSuccess: function(data){
                    setVisible();
                    options.onLoadSuccess.call(this, data);
                }
            }));
            input.find('input.d').datebox();
            setVisible();
            return input;
            function setVisible(){
                var width = $(container).width();
                if (!input.find('input.c').combobox('getData').length){
                    input.find('span.c').hide();
                    input.find('span.d').show();
                    input.find('input.d').datebox('resize',width);
                } else {
                    input.find('span.c').show();
                    input.find('span.d').hide();
                    input.find('input.c').combobox('resize',width);
                }
            }

        },
        destroy: function(target){
            $(target).find('input.c').combobox('destroy');
            $(target).find('input.d').datebox('destroy');
        },
        getValue: function(target){
            if ($(target).find('span.c').is(':visible')){
                return $(target).find('input.c').combobox('getValue');
            } else {
                return $(target).find('input.d').datebox('getValue');
            }
        },
        setValue: function(target, value){
            $(target).find('input.c').combobox('setValue', value);
            $(target).find('input.d').datebox('setValue', value);
        },
        resize: function(target, width){
            if ($(target).find('span.c').is(':visible')){
                $(target).find('input.c').combobox('resize', width);
            } else {
                $(target).find('input.d').datebox('resize', width);
            }
        }
    }
})

Before editing a row, you can override the editor options.

Code:

onBeforeEdit: function(index,row){
    var col = $(this).datagrid('getColumnOption','productid');
    $.extend(col.editor.options, {
        url: 'products.json'
    });
}

[thecyberzone]

Brilliant! You are great. Completely new Idea for my suggestion. Definitely have to try this option.

But what you have told in onBeforeEdit event that I could not follow, should I define the column editor as combodate during column definition ? Or during loading of data, please elaborate the usage of the said example how I use that combodate?

Basically this portion I could not follow, how you are using combodate here :

Code:

Before editing a row, you can override the editor options.
Code:

onBeforeEdit: function(index,row){
    var col = $(this).datagrid('getColumnOption','productid');
    $.extend(col.editor.options, {
        url: 'products.json'
    });
}

Please let me know what will be the column definition of trgdate and how it will be populated from remote server from onBeforeEdit event. I have tried as follows, but combobox is not appearing, only datebox coming where if I select anydate only current date appears. My code for trgdate column is as follows :

Code:

{field:'trgdate',title:'PlanDate',width:100,align:'center',editor:'combodate'},

and call for loading remote data under onBeforeEdit is as follows:

Code:

						var col = $(this).datagrid('getColumnOption','trgdate');
					    $.extend(col.editor.options, {
					        url: 'rating.getPlan.php?yr='+yr+'&trgcode='+row.trgcode
					    });

Still only datebox appears, no combobox is there. And in datebox changing of date has no effect, only current date appears.