Cell Editing Query

[SiddharthParticipant]

Hi All,

I am using jqxGrid in my application. I have a custom column named “Change Percentage” for which I have written my own “cellsrenderer”, “createeditor”, “initeditor” and “geteditorvalue”.

I have another text column called “Notes” in the grid. For this column I have attached a “change” event in the “createeditor” of this column to set the underlying cells value using setcellvaluebyid method. Apart from that I have not written any of the others like for “Change Percentage” column

The issue is that when I edit “Notes” column in the grid and while the cell is in edit mode I click on Save Button to save the data. The “geteditorvalue” of the “Change Percentage” column gets called and the cellvalue passed in is the value I typed into the “Notes” column I was editing.

Am I missing something here ?

Regards,
Siddharth

[DimitarParticipant]

Hello Siddharth,

Could you, please, provide us with your source code to make the scenario more clear?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[SiddharthParticipant]

Hi Dimitar,

Please find the important pieces of code snippets, let me know if you need any clarification:

function prepareEfficiencyGrid(selDate) {	
	 
	var efficiencyData = {
		datatype : "json",
		data : {
			"selectedDate" : selDate,
			"selectedSiteId" : selectedSiteId
		},
		datafields : [ {
			name : 'schedDate',
			type : 'date'
		}, {
			name : 'averageEfficiency',
			type : 'string'
		}, {
			name : 'changePercentage',
			type : 'string'
		}, {
			name : 'dailyEfficiency',
			type : 'string'
		}, {
			name : 'note',
			type : 'string'
		} ],
		url : './efficiency/getEfficiency'
	};

	var dataAdapter = new $.jqx.dataAdapter(efficiencyData);

	var saveRowRenderer = function(row, columnfield, value, defaulthtml,
			columnproperties) {	
		 
		var returnString = '<button id="' + row + '" ';
		return returnString
				+ 'onClick="" class="btn btn-padding"><span class="btn-icon-save"></span></button>';
	};

	var percentageRenderer = function(row, columnfield, value, defaulthtml,
			columnproperties) {
		if (value < 0) {
			return '<span style="margin: 4px; float: '
					+ columnproperties.cellsalign + '; color: #ff0000;">'
					+ value + '</span>';
		} else {
			return '<span style="margin: 4px; float: '
					+ columnproperties.cellsalign + '; color: #000000;">'
					+ value + '</span>';
		}
	};

	var changePercentageRenderer = function(row, columnfield, value, defaulthtml,
			columnproperties) {

		var signCombo;
		var valueCombo;
		var inputCtrl;
		var containerDiv = $('<div></div>');
		var signList = ["+","-"];
		
		signCombo = $(defaulthtml).find("#displaysigncombo" + row);
		valueCombo = $(defaulthtml).find("#displayvaluecombo" + row);
		inputCtrl = $(defaulthtml).find("#displayinputctrl" + row);
		
		if(signCombo.length == 0 && valueCombo.length == 0 && inputCtrl.length == 0){
		
			signCombo = $('<div id="displaysigncombo' + row + '" class="float-left width-59  padding-3"></div>');
			valueCombo = $('<div id = "displayvaluecombo' + row + '" class="float-right width-59  padding-3"></div>');	
			
			if (value < 0) {
			
				inputCtrl = $('<input id="displayinputctrl' + row +'" value="' + value * -1 + '" class="float-right width-59  padding-3" style="color:red" />');			
				
			}
			var userParentDiv = $('<div id="colChangePercent" class="customwidth" ></div>');
			userParentDiv.append(signCombo);
			userParentDiv.append(inputCtrl);
			userParentDiv.append(valueCombo);
			
			if (value < 0) {
				
				valueCombo.hide();
				inputCtrl.show();			
				inputCtrl.jqxInput({height: '25px' , width: '59px'});			
				
			} else {

				valueCombo.show();
				inputCtrl.hide();
				
				if(efficiencyCap){
					
					changePercent = new Array();
					var j = 0;
					for(var i=0; i <= efficiencyCap * 2; i++){
					
						changePercent[i] = { value:  j, label: j  };
						j += 0.5;
					}		
					
				}
				
				percentSource.localdata = changePercent;
				
				percentAdapter = new $.jqx.dataAdapter(percentSource, {

			         autoBind: true

			     });
				
				valueCombo.jqxDropDownList({autoDropDownHeight: true, displayMember: 'label', 
					valueMember: 'value', source: percentAdapter, width: '59px', height: '25px', placeHolder: "Select"});
				
				
			}
		
			signCombo.jqxDropDownList({ autoDropDownHeight: true, source: signList, height: '25px', width: '59px',placeHolder: "Select"});
			
			containerDiv.append(userParentDiv);
			
			if(value < 0){
				
				inputCtrl.val(value * -1);
					
			}
			else{
				
				valueCombo.jqxDropDownList("selectItem",value * 1);			
			}	
			
			if(value < 0){
				signCombo.jqxDropDownList("selectItem","-");
			}
			else if(value >= 0){
				signCombo.jqxDropDownList("selectItem","+");
			}
			return containerDiv.html();
		}
		else{
			
			if(value < 0){
				
				inputCtrl.val(value * -1);
					
			}
			else{
				
				valueCombo.jqxDropDownList("selectItem",value * 1);			
			}	
			
			if(value < 0){
				signCombo.jqxDropDownList("selectItem","-");
			}
			else if(value >= 0){
				signCombo.jqxDropDownList("selectItem","+");
			}
			
			return defaulthtml;
		}		

	}

	var createNotesGridEditor =function(row, cellValue, editor, cellText, width,
			height) {

		
		
		editor.jqxInput().on("change",function(event){
		
			
			if(args){
			var index = args.rowindex;
			$("#efficiencyTable").jqxGrid('setcellvaluebyid',
					index, "note",
					$(event.target).val());
			}
		});
	}
	
	var createGridEditor = function(row, cellValue, editor, cellText, width,
			height) {

		var outerdiv = $("<div class='customwidth'></div>").prependTo(editor);
		var txt = $(
				"<input id='editinput"
						+ row
						+ "' class='float-right width-59 padding-3' style='color:red' />")
				.prependTo(outerdiv);
		var selPercent = $(
				"<div id='editselectpercent" + row
						+ "' class='float-right width-59 padding-3' > </div>")
				.prependTo(outerdiv);
		var sel = $(
				"<div id='editselect" + row
						+ "' class='float-left width-59 padding-3'></div>")
				.prependTo(outerdiv);

		txt.jqxInput({
			height : '25px',
			width : '59px'
		});
		
		if(efficiencyCap){
			
			changePercent = new Array();
			var j = 0;
			for(var i=0; i <= efficiencyCap * 2; i++){
			
				changePercent[i] = { value:  j, label: j  };
				j += 0.5;
			}		
			
		}
		
		percentSource.localdata = changePercent;
		
		percentAdapter = new $.jqx.dataAdapter(percentSource, {

	         autoBind: true

	     });
		
		selPercent.jqxDropDownList({
			source : percentAdapter,
			displayMember: 'label', 
			valueMember: 'value', 
			height : '25px',
			width : '59px',
			autoDropDownHeight : true,
			placeHolder: "Select"
		});
		sel.jqxDropDownList({
			source : changeSelect,
			height : '25px',
			width : '59px',
			autoDropDownHeight : true,
			placeHolder: "Select"
		});

		$("#editselect" + row).on("change", function(event) {
			var args = event.args;
			if (args) {
				// index represents the item's index.
				var index = args.index;
				var item = args.item;
				// get item's label and value.
				var label = item.label;
				var value = item.value;

				if (value == "-") {

					$("#editinput" + event.target.id.slice(-1)).show();
					$("#editselectpercent" + event.target.id.slice(-1)).hide();

				} else {

					$("#editinput" + event.target.id.slice(-1)).hide();
					$("#editselectpercent" + event.target.id.slice(-1)).show();

				}
				
				var num = $("#editinput" + event.target.id.slice(-1)).jqxInput().val();
				var sign = $("#editselect" + event.target.id.slice(-1)).jqxDropDownList().val();
				var nump = $("#editselectpercent" + event.target.id.slice(-1)).jqxDropDownList().val();
				var send = 0;
				if (sign == "+") {
					send = nump;
				} else {
					send = num;
				}
				
				$("#efficiencyTable").jqxGrid('setcellvaluebyid',
						event.target.id.slice(-1), "changePercentage",
						sign + send);
				
				$("#efficiencyTable").jqxGrid('setcellvaluebyid',
						event.target.id.slice(-1), "dailyEfficiency",
						calculateDailyEfficiency(event.target.id.slice(-1), sign + send));

			}
		});
			
		$("#editinput" + row).on("change", function(event) {
				
					
										
					var num = $("#editinput" + event.target.id.slice(-1)).jqxInput().val();
					var sign = $("#editselect" + event.target.id.slice(-1)).jqxDropDownList().val();
					var nump = $("#editselectpercent" + event.target.id.slice(-1)).jqxDropDownList().val();
					var send = 0;
					if (sign == "+") {
						send = nump;
					} else {
						send = num;
					}
					
					$("#efficiencyTable").jqxGrid('setcellvaluebyid',
							event.target.id.slice(-1), "changePercentage",
							sign + send);
					
					$("#efficiencyTable").jqxGrid('setcellvaluebyid',
							event.target.id.slice(-1), "dailyEfficiency",
							calculateDailyEfficiency(event.target.id.slice(-1), sign + send));
					 
				
		});
		$("#editselectpercent" + row).on("change", function(event) {
					var args = event.args;
					if (args) {
						// index represents the item's index.
						var index = args.index;
						var item = args.item;
						// get item's label and value.
						var label = item.label;
						var value = item.value;

						
						var num = $("#editinput" + event.target.id.slice(-1)).jqxInput().val();
						var sign = $("#editselect" + event.target.id.slice(-1)).jqxDropDownList().val();
						var nump = $("#editselectpercent" + event.target.id.slice(-1)).jqxDropDownList().val();
						var send = 0;
						if (sign == "+") {
							send = nump;
						} else {
							send = num;
						}
						
						$("#efficiencyTable").jqxGrid('setcellvaluebyid',
								event.target.id.slice(-1), "changePercentage",
								sign + send);
						
						$("#efficiencyTable").jqxGrid('setcellvaluebyid',
								event.target.id.slice(-1), "dailyEfficiency",
								calculateDailyEfficiency(event.target.id.slice(-1), sign + send));

					}
		});
		
	}

	var initGridEditor = function(row, cellvalue, editor, celltext, pressedkey) {

		
		
		if (cellvalue < 0) {

			$("#editinput" + row).jqxInput().show();
			$("#editinput" + row).jqxInput().val(cellvalue * -1);
			$("#editselect" + row).jqxDropDownList().val("-");
			$("#editselectpercent" + row).jqxDropDownList().hide();

		} else {

			$("#editinput" + row).jqxInput().hide();
			$("#editselect" + row).jqxDropDownList().val("+");
			$("#editselectpercent" + row).jqxDropDownList();
			$("#editselectpercent" + row).jqxDropDownList().show();
			$("#editselectpercent" + row).jqxDropDownList().val(cellvalue * 1);

		}
	}

	var getGridEditor = function(row, cellvalue, editor) {
		
		try{
		var num = $("#editinput" + row).jqxInput().val();
		var sign = $("#editselect" + row).jqxDropDownList().val();
		var nump = $("#editselectpercent" + row).jqxDropDownList().val();
		var send = 0;
		if (sign == "+") {
			send = nump;
		} else {
			send = num;
		}
		return sign + send;
		}
		catch(e){
			
		}
		
		var data = $('#efficiencyTable').jqxGrid('getrowdata', row);

		return data.changePercentage;
	}
	
	var scope = $('#EfficiencyPrivilege').val();
	
	if(scope == 2 ){
		
		// initialize jqxGrid
		$("#efficiencyTable").jqxGrid({
			width : 1020,
			height : 470,
			source : dataAdapter,
			editable : true,
			enabletooltips : false,
			selectionmode : 'singlecell',
			editmode : 'click',
			columnsresize : true,
			columns : [ {
				text : 'Day of Week',
				datafield : 'schedDate',
				width : 110,
				cellsformat : 'dddd',
				editable : false
			}, {
				text : 'Average Efficiency (OPUS)',
				datafield : 'averageEfficiency',
				width : 180,
				editable : false
			}, {
				text : 'Change	%',
				datafield : 'changePercentage',
				columntype : 'custom',
				cellsrenderer : changePercentageRenderer,
				createeditor : createGridEditor,
				initeditor : initGridEditor,
				geteditorvalue : getGridEditor,
				width : 170
			}, {
				text : 'Daily Efficiency',
				datafield : 'dailyEfficiency',
				width : 110,
				cellsformat : 'd3',
				editable : false
			}, {
				text : 'Notes',
				datafield : 'note',
				width : 425,
				createeditor: createNotesGridEditor
			}, {
				text : '',
				cellsalign : 'center',
				cellsrenderer : saveRowRenderer,
				width : 25,
				editable : false
			} ]
			
		});
		
		
	
		
	}
	else{
		
		
		// initialize jqxGrid
		$("#efficiencyTable").jqxGrid({
			width : 1050,
			height : 470,
			source : dataAdapter,
			editable : true,
			enabletooltips : false,
			selectionmode : 'singlecell',
			editmode : 'click',
			columnsresize : true,
			columns : [ {
				text : 'Day of Week',
				datafield : 'schedDate',
				width : 110,
				cellsformat : 'dddd',
				editable : false
			}, {
				text : 'Average Efficiency (OPUS)',
				datafield : 'averageEfficiency',
				width : 180,
				editable : false
			}, {
				text : 'Change	%',
				datafield : 'changePercentage',
				columntype : 'custom',
				cellsrenderer : changePercentageRenderer,
				createeditor : createGridEditor,
				initeditor : initGridEditor,
				geteditorvalue : getGridEditor,
				width : 170
			}, {
				text : 'Daily Efficiency',
				datafield : 'dailyEfficiency',
				width : 110,
				cellsformat : 'd3',
				editable : false
			}, {
				text : 'Notes',
				datafield : 'note',
				width : 450,
				createeditor: createNotesGridEditor
			} ]
			
		});
		
	}
	
}

$(document).ready(
		function() {
			if (typeof selectedSiteId === "undefined") {
				// alert("Please select a site");
			} else {
				prepareEfficiencyGrid($.datepicker.formatDate('yy/mm/dd',
						new Date()));
			}

			$("#datasave").on('click', function() {
				
				if (typeof selectedSiteId === "undefined") {
					alert("Please select a site");
				} else {
					saveDailyEfficiencyData();
				}
			});

			$('#efficiencyTable').on(
					'cellendedit',
					function(event) {
						var column = args.datafield;
						var row = args.rowindex;
						var value = args.value;
						var oldvalue = args.oldvalue;
						if ('changePercentage' == column) {
							$("#efficiencyTable").jqxGrid('setcellvaluebyid',
									row, "dailyEfficiency",
									calculateDailyEfficiency(row, value));
						}
					});
			
			$("#efficiencyTable").on("cellclick", function (event) 
					{
					    var column = args.column;
					    var rowindex = args.rowindex;
					    var columnindex = args.columnindex;
					    if(columnindex == 5 ){
						    
					    	$("#efficiencyTable").jqxGrid('endcelledit', rowindex, 'changePercentage', false);
					    	$("#efficiencyTable").jqxGrid('endcelledit', rowindex, 'note', false);

					    	rowSave(rowindex);
					    	
					    }
					    
					});  
			$('#efficiencyTable').on('cellvaluechanged', function (event) {
		        var args = event.args;
		        var columnDataField = args.datafield;
		        var rowIndex = args.rowindex;
		        if(!isInArray(editedEfficiencyRows,rowIndex)){
		        	   editedEfficiencyRows.push(rowIndex);
		        }		     
			});
		});

Thanks & Regards,
Siddharth Seth

[DimitarParticipant]

Hello Siddharth Seth,

If you wish to implement a custom editor, the correct way to return its selected value to the cell is via geteditorvalue. An example implementation can be seen in the demo Custom Column Editor.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts