jQWidgets Forums

This topic contains 12 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 6 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Grid 3.0.4 potential bug with sorting on databinding Posts

November 13, 2013 at 8:31 pm Grid 3.0.4 potential bug with sorting on databinding #32594

Blocked

I’ll paste my scenario below. So I have this case when the grid first load, I apply on bindingcomplete a sort on a column. From time to time the user will be able to press a reload button which will reload the data from an ajax call. Since I want the user to keep its sorting and filtering as they were, I use the marvelous (“updatebounddata”, “cells”). I realized there is a bug with the sorting. Here is my repro steps:

– load the page (code pasted below) and notice the sorting of the column as been applied.
– press the reload button

RESULT: notice the sorting has been lost. Additionally, the sort arrow in the column header is still indicating that a sorting has been applied.

– now add a filter like “ea” to the city column. You will get two rows sorted as it should.
– remove the filter. Notice the sorting is back!

EXPECTED: when the user press the reload button, the sort should be kept as indicated by the grid.

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 style="" screen_capture_injected="true">
	
<script type="text/javascript">
	
	// Ajax Call to Get the Calendar Data
	/////////////////////////////////////////////////////////////
	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('updatebounddata', 'cells');		
	}
	
	// Page Loading
	/////////////////////////////////////////////////////////////
	$(function(){
		// Init JQX Widgets
		//////////////////////////////////////////////////////////////////
		storeGridDataAdapter = new $.jqx.dataAdapter(storeGridSource);
		
		$("#storesGrid").jqxGrid({
			source:storeGridDataAdapter,
			altrows: true,
			columns: [
				{ 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("bindingcomplete", function(){
			$(this).jqxGrid('sortby', 'deviceId', 'asc');
		});
		
		// Call initial fetching of the data
		//getStoresData(); 
		
		getStoresDataSuccessCB(data);
	});
</script>
<div id="storesGrid"></div>		
</body></html>

Thank you

November 13, 2013 at 10:08 pm Grid 3.0.4 potential bug with sorting on databinding #32595

Peter Stoev

Keymaster

Hi reblutus,

When you initialize the Grid from a new jqxDataAdapter, you need to set the Grid’s source property to point to your new jqxDataAdapter instance. “updatebounddata” with parameters should be called only on certain scenarios when you perform server sort or server filtering

Best Regards,
Peter Stoev

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

November 14, 2013 at 7:15 pm 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 15, 2013 at 6:05 am Grid 3.0.4 potential bug with sorting on databinding #32680

Peter Stoev

Keymaster

Hi reblutus,

If you have sorting or filtering applied, use “updatebounddata” without parameters so it would make a full refresh. I understand that you have seen passing parameters to “updatebounddata”, but that should be done only in very specific cases.

Best Regards,
Peter Stoev

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

November 15, 2013 at 1:46 pm 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 15, 2013 at 2:45 pm Grid 3.0.4 potential bug with sorting on databinding #32723

Peter Stoev

Keymaster

Hi reblutus,

At the point you bind to “initialized”, the Grid is already initialized. “bindingcomplete” is raised when the binding is completed and as I already wrote, “updatebounddata” is used incorrectly in that code as it should be without parameters in your scenario.

Best Regards,
Peter Stoev

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

November 15, 2013 at 8:35 pm 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 16, 2013 at 11:20 am Grid 3.0.4 potential bug with sorting on databinding #32760

Peter Stoev

Keymaster

Hi reblutus,

The events are not raised because when you bind to “bindingcomplete” and “initialized”, the Grid is already bound and initialized.

Best Regards,
Peter Stoev

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

November 18, 2013 at 2:23 pm 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 18, 2013 at 3:12 pm Grid 3.0.4 potential bug with sorting on databinding #32876

Peter Stoev

Keymaster

Hi reblutus,

“updatebounddata”, without parameters will Re-Bind the Grid with the New Data and will Re-Apply the Sorting (if there is a Sort Column)

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 19, 2013 at 3:00 pm 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 22, 2013 at 1:16 pm 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 22, 2013 at 1:32 pm Grid 3.0.4 potential bug with sorting on databinding #33156

Peter Stoev

Keymaster

Hi reblutus,

In case your company is licensed you may send your support questions to support@jqwidgets.com.
At present, I do not have anything more to say about this topic. You may update the Grid’s data in multiple ways – by setting the “source” property to new dataAdapter or by calling “updatebounddata”. You can even sort or filter the Grid through the API as shown in the Sorting and Filtering demos. I suppose that you can use a combination of all these APIs to resolve your application scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.