jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →

Author

Posts

November 22, 2013 at 1:16 pm in reply to: Grid 3.0.4 potential bug with sorting on databinding Grid 3.0.4 potential bug with sorting on databinding #33155

reblutus

Blocked

I was wondering if anyone can make follow up on this thread. Other teams in our company has issues with this as well. Please see my last post. Thank you

November 19, 2013 at 3:00 pm in reply to: Grid 3.0.4 potential bug with sorting on databinding Grid 3.0.4 potential bug with sorting on databinding #32947

reblutus

Blocked

I removed the comment on line 69 so the grid source is updated with the new dataAdapter instance like you suggested. I also removed the parameter “cells” to line 70. Result: the sort is lost and further more, the filters are also lost.

There must be something I miss. Does you grid widget support this behaviour or not?

Behaviour being:
Reload a grid data without loosing any sorting or filter a user has manually applied.

Extract from your API: “Passing “cells” will refresh only the cells values when the new rows count is equal to the previous rows count.”

What does this means? That seems to be exactly what I want to do: refresh the cells – (I presumed: without loosing filter/sort) – my rows count is equal.

Thank you

November 18, 2013 at 2:23 pm in reply to: Grid 3.0.4 potential bug with sorting on databinding Grid 3.0.4 potential bug with sorting on databinding #32875

reblutus

Blocked

Ok I’m sorry about that. I fixed my code so the events are registered before the grid call. They are now called successfully. But I still get my issue or loosing my sort on data reload (the reason for this thread).

WITH CODE BELOW, follow repro steps:
(doc ready: register the initialized event, init the grid with new data – no updatebounddata)
– notice the device id column is sorted and the header is showing that.
– press reload button (and use updatebounddata and cells parameter in the hope of not loosing the filters and sorting)
– data is reloaded but the device id column has lost its sorting though the header indicate it still has a sorting.

Other experiments shows that when the filtering is used, it is kept with the use of updatebounddata + cells param. Additionally when I reassign the new data adapter to the grid like you suggested, I loose all filtering and sorting.

code:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Grid Bug Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
	
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<!-- JQX js -->
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnumberinput.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.grouping.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatetimeinput.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcalendar.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdragdrop.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtabs.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtooltip.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxradiobutton.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.export.js"></script>
</head>
<body>
	
<script type="text/javascript">
	
	// Ajax Call to Get the Calendar Data
	/////////////////////////////////////////////////////////////
	var bGridInit = false;
	var data = {"stores":[{"id":33,"city":"Montreal","deviceId":"LHGH-SB1-000009"}, {"id":34,"city":"Gatineau","deviceId":"LHGH-SB1-000001"}, {"id":35,"city":"Toronto","deviceId":"LHGH-SB1-000011"}]};
	
	var storeGridSource = {
		datatype: "json",
		datafields: [  
			{ name: 'id',         type: 'number'},
			{ name: 'city',         type: 'string'},
			{ name: 'deviceId',     type: 'string'}
		],
		id: 'id'
		,sortcolumn: "deviceId"
		,sortdirection:"asc"
	};
	var storeGridDataAdapter;
		
	var getStoresDataSuccessCB = function(data) {
		var storesData = data['stores'];
		
		storeGridSource.localdata = storesData;		
		storeGridDataAdapter = new $.jqx.dataAdapter(storeGridSource);
		
		if(bGridInit){
			//$("#storesGrid").jqxGrid({source:storeGridDataAdapter});	
			$("#storesGrid").jqxGrid('updatebounddata', 'cells');		
		}else{
			initGrid();
		}
	}
	
	function initGrid(){
		$("#storesGrid")
		.on("click", function(event){
			console.log(event);
		})
		.on("initialized", function(event){
			bGridInit = true;
			console.log(event);
		})		
		.on("bindingcomplete", function(event){			
			console.log(event);
		})
		.jqxGrid({
			source:storeGridDataAdapter,
			altrows: true,
			columns: [
				{ text: 'id', datafield: 'id', width:200, editable: false },
				{ text: 'Device ID', datafield: 'deviceId', width:200, editable: false },
				{ text: 'City', datafield: 'city', width:150, editable: false }
			],
			width: "100%",
			autoheight: true,
			groupable: false,
			editable: true,
			editmode:"click",
			sortable: true,
			showsortcolumnbackground: true,
			showfilterrow: true,
			filterable: true,
			selectionmode: 'none'
			,showstatusbar:true
			,statusbarheight:30
			,renderstatusbar: function($statusbar){
				var $container = $('<div class="statusBar"></div>');
				var $statusDiv = $('<div id="status" class="left"></div>');
				var $reloadButton = $('<button type="button" class="btn"><i class="icon-download-alt"></i> Reload</button>')
				.jqxButton({})
				.on("click", function(){getStoresDataSuccessCB(data);});
				$container.append($reloadButton);
				$container.append($statusDiv);
				$statusbar.append($container);
			}
		});
	}
	$(function(){		
		getStoresDataSuccessCB(data);
	});
</script>
<div id="storesGrid"></div>
</body></html>

If you can provide me with a working example of a grid initialize with a data with a sorting and then reload the same data while the sorting is kept, would be awesome. Thank you

November 15, 2013 at 8:35 pm in reply to: Grid 3.0.4 potential bug with sorting on databinding Grid 3.0.4 potential bug with sorting on databinding #32735

reblutus

Blocked

Have you looked at my second scenario posted on this thread? I do not use updatebounddata any more (at least not until the grid is initialized)

Thank you to look at my post #32663

November 15, 2013 at 1:46 pm in reply to: Grid 3.0.4 potential bug with sorting on databinding Grid 3.0.4 potential bug with sorting on databinding #32720

reblutus

Blocked

Why in my previous post the initialized and bindingcomplete events are not registered (or triggered) as they should?

Thank you

November 14, 2013 at 7:15 pm in reply to: Grid 3.0.4 potential bug with sorting on databinding Grid 3.0.4 potential bug with sorting on databinding #32663

reblutus

Blocked

Si i need to init the grid only when I have the data available and use updatebounddata when I want to refresh the grid. So I did that, but that does not either. As it is now the events initialized and bondingcomplete are never registered (or fired not sure). What do I do wrong?

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Grid Bug Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
	
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<!-- JQX js -->
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnumberinput.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.grouping.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatetimeinput.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcalendar.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdragdrop.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtabs.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtooltip.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxradiobutton.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.export.js"></script>
</head>
<body>
	
<script type="text/javascript">
	
	// Ajax Call to Get the Calendar Data
	/////////////////////////////////////////////////////////////
	var bGridInit = false;
	var data = {"stores":[{"id":33,"city":"Montreal","deviceId":"LHGH-SB1-000009"}, {"id":34,"city":"Gatineau","deviceId":"LHGH-SB1-000001"}, {"id":35,"city":"Toronto","deviceId":"LHGH-SB1-000011"}]};
	
	var storeGridSource = {
		datatype: "json",
		datafields: [  
			{ name: 'id',         type: 'number'},
			{ name: 'city',         type: 'string'},
			{ name: 'deviceId',     type: 'string'}
		],
		id: 'id'
		,sortcolumn: "deviceId"
		,sortdirection:"asc"
	};
	var storeGridDataAdapter;
		
	var getStoresDataSuccessCB = function(data) {
		var storesData = data['stores'];
		
		storeGridSource.localdata = storesData;		
		storeGridDataAdapter = new $.jqx.dataAdapter(storeGridSource);
		$("#storesGrid").jqxGrid({source:storeGridDataAdapter});	
		
		if(bGridInit){
			$("#storesGrid").jqxGrid('updatebounddata', 'cells');		
		}else
			initGrid();
		}
	}
	
	function initGrid(){
		$("#storesGrid").jqxGrid({
			source:storeGridDataAdapter,
			altrows: true,
			columns: [
				{ text: 'id', datafield: 'id', width:200, editable: false },
				{ text: 'Device ID', datafield: 'deviceId', width:200, editable: false },
				{ text: 'City', datafield: 'city', width:150, editable: false }
			],
			width: "100%",
			autoheight: true,
			groupable: false,
			editable: true,
			editmode:"click",
			sortable: true,
			showsortcolumnbackground: true,
			showfilterrow: true,
			filterable: true,
			selectionmode: 'none'
			,showstatusbar:true
			,statusbarheight:30
			,renderstatusbar: function($statusbar){
				var $container = $('<div class="statusBar"></div>');
				var $statusDiv = $('<div id="status" class="left"></div>');
				var $reloadButton = $('<button type="button" class="btn"><i class="icon-download-alt"></i> Reload</button>')
				.jqxButton({})
				.on("click", function(){getStoresDataSuccessCB(data);});
				$container.append($reloadButton);
				$container.append($statusDiv);
				$statusbar.append($container);
			}
			
		})
		.on("click", function(event){
			console.log(event);
		})
		.on("initialized", function(event){
			bGridInit = true;
			console.log(event);
		})		
		.on("bindingcomplete", function(event){			
			console.log(event);
		});
	}
	// Page Loading
	/////////////////////////////////////////////////////////////
	$(function(){
		// Init JQX Widgets
		//////////////////////////////////////////////////////////////////
		//storeGridDataAdapter = new $.jqx.dataAdapter(storeGridSource);
		
		
		
		// Call initial fetching of the data
		//getStoresData(); 
		
		getStoresDataSuccessCB(data);
	});
</script>
<div id="storesGrid"></div>
</body></html>

November 12, 2013 at 4:53 pm in reply to: Grid 3.0.4 potential bug with window resize Grid 3.0.4 potential bug with window resize #32514

reblutus

Blocked

Ok thank you, that fixes the bug.

You could implement a tolerance for that.

Thank you

November 12, 2013 at 3:35 pm in reply to: Grid 3.0.4 potential bug with window resize Grid 3.0.4 potential bug with window resize #32504

reblutus

Blocked

Here it is. I point directly to your library 3.0.4. Paste that code in a new file.html and open in a browser with the window larger than ~867px you will see the grid’s content. Now reduce the window and you will see the content disapear as soon as the content is too large for the grid. Normally a horizontal scrollbar appear to allow scrolling of the content, but the content is now gone!

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Grid Bug Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
	
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<!-- JQX js -->
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnumberinput.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.grouping.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatetimeinput.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcalendar.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdragdrop.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtabs.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtooltip.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxradiobutton.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
	
		<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.export.js"></script>
	</head>
<body style="" screen_capture_injected="true">
	
<script type="text/javascript">
	
	// Ajax Call to Get the Calendar Data
	/////////////////////////////////////////////////////////////
	var existingStatusDataAdapter;
	var pendingChanges;                     // Storage for local changes before we send them to the server
	var editedCells = {};                   // Map of edited cell identifiers, used to display them in red italic
	var checksHeader = null;                // The checkbox in the column header
	var updatingChecksHeader = false;       // Flag for code edition of the header checkbox, it will not propagate changes to the rows when true
	var doingMassCheking = false;
	var totalChecksCount = 0;               // Total rows checked, including currently filtered out ones
	
	var resetPendingChanges = function() {
		pendingChanges = {};
		pendingChanges["stationId"] = {};
		pendingChanges["calendarId"] = {};
		editedCells = {};
		$("#storesGrid").jqxGrid('refresh');
		$("#storesGrid").jqxGrid("clearselection")
		$("#saveDiv").hide();
	}
		
	var existingZonesSource = {
		datatype: "json",
		datafields: [   { name: 'name',         type: 'string'}]
	};
	var existingZonesDataAdapter;
	var availableStationsSource = {
		datatype: "json",
		datafields: [   { name: 'name',         type: 'string'},
						{ name: 'id',           type: 'long'}],
		id: 'id'
	};
	var availableStationsDataAdapter;
	var availableStationsValues = { 
		value: 'id',
		name: 'name' 
	}
	var availableCalendarsSource = {
		datatype: "json",
		datafields: [   { name: 'name',         type: 'string'},
						{ name: 'id',           type: 'long'}],
		id: 'id'
	};
	var availableCalendarsDataAdapter;
	var availableCalendarsValues = {
		value: 'id',
		name: 'name'
	}
	var existingStatusSource = {
		datatype: "json",
		datafields: [   { name: 'name',         type: 'string'},
						{ name: 'id',           type: 'long'}],
		id: 'id'
	};
	var existingStatusDataAdapter;
	var existingStatusValues = {
		value: 'id',
		name: 'name'
	}
	
	var storeGridSource = {
		datatype: "json",
		datafields: [   
			{ name: 'selected',     type: 'bool'},
			{ name: 'address1',     type: 'string'},
			{ name: 'address2',     type: 'string'},
			{ name: 'city',         type: 'string'},
			{ name: 'province',     type: 'string'},
			{ name: 'storeNumber',  type: 'string'},
			{ name: 'phoneNumber',  type: 'string'},
			{ name: 'zoneName',     type: 'string'},
			{ name: 'deviceId',     type: 'string'},
			{ name: 'outputId',     type: 'int'},
			{ name: 'stationId',    type: 'int'},
			{ name: 'calendarId',   type: 'int'},
			{ name: 'statusId',     type: 'int'},
			{ name: 'station',      value: 'stationId',  values: availableStationsValues },
			{ name: 'calendar',     value: 'calendarId', values: availableCalendarsValues },                    
			{ name: 'status',       value: 'statusId',   values: existingStatusValues }
		],
		id: 'outputId'
	};
	var storeGridDataAdapter;
		
	var getStoresDataSuccessCB = function(data) {
		var storesData = injectSelected(data['stores']);
		var stationsData = data['availableStations'];
		var calendarsData = data['availableCalendars'];
		var zonesData = data['existingZones'];
		var statusData = data['existingStatus'];
		
		
		existingZonesSource.localdata = zonesData;
		existingZonesDataAdapter.dataBind();// = new $.jqx.dataAdapter(existingZonesSource);
		availableStationsSource.localdata = stationsData;
		availableStationsDataAdapter.dataBind();// = new $.jqx.dataAdapter(availableStationsSource);
	    availableStationsValues.source = availableStationsDataAdapter.records;
		availableCalendarsSource.localdata = calendarsData;
		availableCalendarsDataAdapter.dataBind();// = new $.jqx.dataAdapter(availableCalendarsSource);
	    availableCalendarsValues.source = availableCalendarsDataAdapter.records;
		existingStatusSource.localdata = statusData;
		existingStatusDataAdapter.dataBind();// = new $.jqx.dataAdapter(existingStatusSource);
	    existingStatusValues.source = existingStatusDataAdapter.records;	
		storeGridSource.localdata = storesData;		
		storeGridDataAdapter = new $.jqx.dataAdapter(storeGridSource);
		
		$("#storesGrid").jqxGrid('updatebounddata', 'cells');		
		resetPendingChanges();
		//refreshSelectedCheckbox(0);
	}
	
	
	
	// Grid Rendering
	//////////////////////////////////////////////////////////////
	function changeCursor(el, cursor) {
		el.style.cursor = cursor;
	};
	
	var cellclass = function (row, datafield, value, rowdata) {
		if(Object.keys(editedCells).length)
			$("#saveDiv" ).show();
		else
			$("#saveDiv" ).hide();
		if((datafield + rowdata.outputId) in editedCells) {
			return "editedCell";
		}
	}
   
	
function injectSelected(data){
	for(index in data){
		data[index]["selected"] = false;
	}
	return data;
}
	// Page Loading
	/////////////////////////////////////////////////////////////
	$(function(){
		// Init JQX Widgets
		//////////////////////////////////////////////////////////////////
		existingZonesDataAdapter = new $.jqx.dataAdapter(existingZonesSource);
		availableStationsDataAdapter = new $.jqx.dataAdapter(availableStationsSource);
		availableCalendarsDataAdapter = new $.jqx.dataAdapter(availableCalendarsSource);
		existingStatusDataAdapter = new $.jqx.dataAdapter(existingStatusSource);
		storeGridDataAdapter = new $.jqx.dataAdapter(storeGridSource);
		
		$("#storesGrid").jqxGrid({
			source:storeGridDataAdapter,
			altrows: true,
			columns: [
				{ text: '', menu: false, sortable: false, filterable: false, datafield: 'selected', columntype: 'checkbox', width: 40, resizable: false, pinned:true,
					renderer: function () {
						return '<div style="margin-left: 10px; margin-top: 5px;"></div>';
					},
					rendered: function (element) {
						$(element).jqxCheckBox({ width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
						checksHeader = $(element);
						$(element).on('change', function (event) {
							if(!updatingChecksHeader){
								var rows = $("#storesGrid").jqxGrid('getrows');
								var checked = event.args.checked;
								doingMassCheking = true;
								$("#storesGrid").jqxGrid('beginupdate');
								for (var i = 0; i < rows.length; i++) {
									$("#storesGrid").jqxGrid('setcellvaluebyid', rows[i].outputId, 'selected', checked);
									rows[i].selected = checked;
								}								
								$("#storesGrid").jqxGrid('endupdate');
								doingMassCheking = false;
								//refreshSelectedCheckbox(0);
							}
						});
						return true;
					}
				},
				{ text: 'Store Number', datafield: 'storeNumber', width:100, editable: false },
				{ text: 'Address', datafield: 'address1', editable: false },
				{ text: 'City', datafield: 'city', width:150, editable: false },
				{ text: 'Province', datafield: 'province', width:100, editable: false  },
				{ text: 'Identification', datafield: 'outputId', editable: false, width:0, hidden:true },
				{ text: 'Zone', datafield: 'zoneName', editable: false, width:0, hidden:true},
				{ text: 'Music Station', datafield: 'stationId', width:200, displayfield: 'station', editable:false },
				{ text: 'Calendar', datafield: 'calendarId', width:200, displayfield: 'calendar', editable:false	}
			],
			width: "100%",
			height: "100%",
			groupable: false,
			editable: true,
			editmode:"click",
			sortable: true,
			showsortcolumnbackground: true,
			showfilterrow: true,
			filterable: true,
			selectionmode: 'none',
			enabletooltips: true,
			rowdetails: true,
			columnsresize: true,
			initrowdetails: function (index, parentElement, gridElement, datarecord) {
				var tabsdiv = null;
				tabsdiv = $($(parentElement).children()[0]);
				if (tabsdiv != null) {
					var address = datarecord.address1;
					if(datarecord.address2 != null) {
						address += '<br>' + datarecord.address2;
					}
					
					storeInfoDiv = tabsdiv.find('.storeInformation');
					var storeInfoContainer = $('<div>' +
					address + '<br>' +
					datarecord.city + '<br>' +
					datarecord.province + '<br>' +
					datarecord.phoneNumber + '<br>' +
					'DeviceId: ' + datarecord.deviceId + '<br>' +
					'</div>');
					$(storeInfoDiv).append(storeInfoContainer);
				}
			},
			rowdetailstemplate: {
				rowdetails: "<div><div class='storeInformation'></div></div>",
				rowdetailsheight: 100
			}
			,showstatusbar:true
			,statusbarheight:"30"
			,renderstatusbar: function($statusbar){
				var $container = $('<div class="statusBar"></div>');
				var $statusDiv = $('<div id="status" class="left"></div>');
				var $massEditButton = $('<button id="massEditButton" type="button" class="btn"><i class="icon-pencil"></i> Edit</button>');
				$massEditButton
				.jqxButton({disabled: true})
				.on("click", function(){showMassEditWindow();});
				$container.append($massEditButton);
				var $exportToButton = $('<button type="button" class="btn"><i class="icon-download-alt"></i> Export</button>')
				.jqxButton({})
				.on("click", function(){exportTo($(this).closest(".jqx-grid"));});
				$container.append($exportToButton);
				$container.append($statusDiv);
				$statusbar.append($container);
			}
			
		})
		.on("groupschanged", function(){
			if($(this).jqxGrid("getrootgroupscount") > 0){
				$("[role='columnheader']").find(".jqx-checkbox").remove();
			}
		})
		.on("bindingcomplete", function(){
			$(this).jqxGrid("localizestrings",{groupsheaderstring: "Drag a column here to group this column"});
		})
		.on("filter", function (event) {/*refreshSelectedCheckbox(0);*/})
		.on('cellvaluechanged', function (event) {
			if(!updatingChecksHeader){
				onGridCellEdit(event);
			}
		});
		
		// Call initial fetching of the data
		//getStoresData(); 
		var data = {"stores":[{"address1":"3, rue Sainte-Catherine Est","address2":null,"city":"Gatineau","province":"QC","storeNumber":"6555","phoneNumber":"(514) 844-1679","statusId":0,"outputId":1,"deviceId":"LHGH-SB1-000001","zoneName":"Restaurant","stationId":1,"calendarId":1}],"availableStations":[{"name":"Subway URBAIN","id":1},{"name":"Subway RURAL","id":2}],"availableCalendars":[{"name":"automne","id":1},{"name":"reblut","id":2}],"existingZones":[{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"}],"existingStatus":[{"name":"New","id":0},{"name":"ReadyToPrint","id":1},{"name":"Ok","id":2},{"name":"Warning","id":3},{"name":"Critical","id":4},{"name":"Printed","id":5}]}
		getStoresDataSuccessCB(data);
	});
</script>
<div id="storesGrid"></div>		
</body></html>

November 12, 2013 at 2:49 pm in reply to: Grid 3.0.4 potential bug with window resize Grid 3.0.4 potential bug with window resize #32500

reblutus

Blocked

Please provide me an example with a grid that when the window resize to smaller width an horizontal scroll bar appears. For this some columns will need to be fixed width. During that time I will prepare for you a page with the bug present.

Thank you

November 12, 2013 at 2:38 pm in reply to: Grid 3.0.4 potential bug with window resize Grid 3.0.4 potential bug with window resize #32497

reblutus

Blocked

What else would you need, I posted the whole grid?

Further more, I also tested with all columns with fixed width and I still get the same bug with 3.0.4: as soon as I reduce the windows width small than the total of the columns width (plus a ~40 px) the grid stops displaying the content rows. So having a column with no width set doesn’t affect, the bug persist.

November 7, 2013 at 7:04 pm in reply to: Firefox issue Firefox issue #32200

reblutus

Blocked

I am using firefox 25.0 with jqxDateTimeInput v 3.0.3. I cleared my cache.

But you are right in the demo section: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatetimeinput/index.htm

… you are using the 3.0.4 version. Pretty confusing… And INDEED the numbers works in Firefox on this page! So maybe there was a bug in 3.0.3 so I’ll upgrade to 3.0.4 to see.

…a few minutes later….

Yep indeed in works fine in 3.0.4!!! Firefox is taking number again in the dateTimeInput

Thank you

October 2, 2013 at 7:35 pm in reply to: Another issue with the horizontal scrollbar Another issue with the horizontal scrollbar #30092

reblutus

Blocked

You are right. If I add:

$("*").css({"box-sizing": "border-box"})

Then the scrollbar disapears. the problem is indeed elsewhere.

October 2, 2013 at 7:24 pm in reply to: Another issue with the horizontal scrollbar Another issue with the horizontal scrollbar #30089

reblutus

Blocked

Thank’s for help on this. As I continue to work on this I took your example:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm

Then open the console and typed:

$("html, body").css({overflow:"auto", margin:0, padding:0});

This is to remove the overflow:hidden style that prevent scrollbar to appear when needed and to reset the default margins and paddings.

Then I typed:

$("#jqxgrid").jqxGrid({height:"100%"});

You will see a vertical scrollbar appear. Note that the grid does not have an horizontal scrollbar and doesn’t seems to be the source of the problem.

October 2, 2013 at 6:57 pm in reply to: Bug in grid status bar width Bug in grid status bar width #30085

reblutus

Blocked

here you can find an example showing the problem mentionned above:


<script>
// prepare the data
var data = new Array();
var firstNames =
[
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 1000; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    data[i] = row;
}
var source =
{
    localdata: data,
    datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }    
});
$(function(){
	$("#jqxGrid").jqxGrid(
	{
		source: dataAdapter,
		width:600,
		height:"100%",
		columns: [
			{ text: 'First Name', datafield: 'firstname', width: 100 },
			{ text: 'Last Name', datafield: 'lastname', width: 100 },
			{ text: 'Product', datafield: 'productname', width: 180 },
			{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
			{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
			{ text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
		],
		showstatusbar:true,
		statusbarheight:28,
		renderstatusbar: function($statusbar){
			var $button = $('<button type="button" style="float:right;">My right button</button>');
			$button.jqxButton();            
			$statusbar.append($button);					
		}
	});
});
</script>
<style>
html, body{
	margin:0;
	padding:0;
}
html, body, #jqxGrid{
	height:100%;
}
</style>
</head>
<body>
<div id="jqxGrid"></div>
</body>

As you can see the status bar is larger than the grid’s width, thus making right adjusted elements to be partly or fully hidden.

October 2, 2013 at 3:59 pm in reply to: Another issue with the horizontal scrollbar Another issue with the horizontal scrollbar #30072

reblutus

Blocked

Please provide me with an example with a grid that takes 100% in height of the page and with columns that are large enough so the horizontal scrollbar appears.

I haven’t found any examples in your demos that the grid takes the full height of the page.

Author

Posts

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →