[SiddharthParticipant]

Hi All,

Its an off for us here today, but had a small update to share.
When I remove references to jqxradiobutton I am able to compile and the application works.
The other jqxwidget components I am using are:
1. jqxExpander.
2. jqxGrid.
3. jqxButton.

I also tried jqxCalendar as mentioned by Prashant and get the same error as in the case of jqxradiobutton.
Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

Team,

I am getting the same issue as Prashant but with another component, namely, angular_jqxradiobutton.ts, file.

I will try and create an example to demonstrate the issue and update shortly…

Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

Hi All,

Greetings!
So, This is what we ended up doing to get around all the scrolling:
1. Add a handler to the treegrid for focusin and focus event and call preventDefault().
2. Make the editable column’s columntype as template and implement cellsrenderer, creategrideditor, initgrideditor and geteditorvalue for the column.
3. In the creategrideditor attach an event handler to the underlying dom element’s focusin and focus events and again here call preventDefault() on the event object.

This seems to prevent all the scrolling when you tab across a row of editable cells. To demonstrate I modified the above fiddle to the below:
https://jsfiddle.net/nCx5c/101/

In this fiddle if you click around to get log and scrollbars then scroll down to make the grid partially visible. Then tab back and forth between the cells of the first two columns there is no automatic scrolling, but if you tab between the cells of the third and fourth column there is going to be scrolling to make the entire grid visible.

Hope this helps, I arrived at this through studying various resources on the web.

Also, couple of days ago I noticed that with jqxGrid the scrolling issue does not happen if we use the multiplecellsadvanced selection mode, which is not available for other widgets I think.

Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

Hi,
I am able to recreate the issue in one of the API examples itself, the one about endcelledit event of treegrids, please find the fiddle link below:
https://jsfiddle.net/jqwidgets/nCx5c/

To recreate, edit cells to generate logs below till there is a scroll bar in the results view, scroll to the bottom of the result and click on a non-editable cell you can see a distinct wobbling on IE11 and on editing a cell & clicking anywhere the result section scrolls to the top. How can I prevent this scrolling. Checked in other browsers with the following outcome:

1. Firefox 40.0.3 no issue but scrolling was happening with ver 35.0
2. Chrome 45+ issue is there scrolling to top as well but no wobbling.

Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

Hi All,

We are facing the same issue with TreeGrids, DataTables and Grids in our projects as well but with IE11. I will try to create a fiddle to be more specific and clear. But the gist of it is, whenever the tree grid or table or grid is not fully visible and I end editing of a cell the browser window scrolls to make the entire grid or table visible. After this if there is no scrolling anymore till I don’t manually scroll to make the control partially visible.

Will update with a fiddle soon.

Thanks & Regards,
SiD

[SiddharthParticipant]

Hi Dimitar,

I finally figured it out and got it working. If you set the saveOnBlur to false, it solves the issue with the row selection as well.
I made the following changes to your fiddle:

1. Set the saveOnBlur in the editSettings of the DataTable to false.
2. Uncommented the call to beginCellEdit in the rowClick event handler.

and now I am able to check uncheck all rows with any page size and the ok button works on first click.
Solution fiddle at:

http://jsfiddle.net/Siddharth_Seth/812j1wct/

Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

Hi Dimitar,

Thanks for the solution provided but I have run into another issue with it. In the fiddle you provided the Ok button works the first time around and resolves the original issue. But now I cannot check uncheck rows which have to be navigated after scrolling.
The steps to recreate the issue in your fiddle:

1. Click on “Open Window”.
2. Change page size to 20.
3. Scroll to the bottom of the Window.
4. Try to check the bottom most rows.

Please have a look and let me know if you need more information.

Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

https://jsfiddle.net/Siddharth_Seth/mLcu0o91/2/

[SiddharthParticipant]

Hi Dimitar,

Sorry, kind of made a mess in the fiddle there, but now its all fixed up and updated.
Placed the jqxDataTable in the content of the window as opposed to the header. I intended to from the start.

I have been using JQWidgets in my projects for over an year (recently renewed the license ) now and am familiar with the API.
What I am trying to do is have a checkbox column and allow the user to edit the value with a single click.
Hope that explains the extra bit of code in the fiddle. Everything works well till I change the page size and scrollbars appear.

To recreate click ‘Open Window’ at the top next change the page size so to say 15 or 20, scrollbars should appear. Click a checkbox in the DataTable.
Click the button that says ‘Ok’. This should cause an alert window to show followed by the window being closed. This happens on the second click rather than the first.

Please let me know if more information is required.

Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

https://jsfiddle.net/0qw6pc4v/

[SiddharthParticipant]

[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

[Author]

Posts