jQuery UI Widgets › Forums › Grid › Updating data in hidden grid

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 7 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Updating data in hidden grid Posts
  • July 26, 2017 at 12:43 pm Updating data in hidden grid #95155

    Brln
    Participant

    Hi!
    We are using jqWidgets in a AngularJS v1 single-page application where we show data in different views. One of those views uses a jqxGrid. Not all views are visible all the time, so we use ng-show to hide views that should not be visible. When updating data in the application we would like to update all the views, hidden or not, so we will not have to update views afterwards when they change visibility state.
    There seems to be an issue with jqxGrid when updating a hidden grid. I’ve made an example showing the issue, see below.

    If we apply filters (1), save the state (2), hide the grid (3) and then update the date (4), we get a JavaScript error from the grid component, as well as when we load the state on a hidden grid after updating data (5).
    If we don’t hide the grid (1 -> 2 -> 4 -> 5) everything works fine.

    Are we beyond the intended use of the grid component, or could this be considered as an issue?

    <html lang="en">
<head>
    <title>State test</title>
    <link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
	
    <script type="text/javascript">
	var test = angular.module('test', ["jqwidgets"]);
	test.controller('testController', function($scope) {
			$scope.show = true;
			
			function getSource(){
				var data = generatedata(500);
				
				return {
					localdata: data,
					datafields:
					[
						{ name: 'firstname', type: 'string' },
						{ name: 'lastname', type: 'string' },
						{ name: 'productname', type: 'string' },
						{ name: 'date', type: 'date' },
						{ name: 'quantity', type: 'number' },
						{ name: 'price', type: 'number' }
					],
					datatype: "array"
				} 
			}
			
			function getColumns(){
				return [
                  {
                      text: 'First Name', datafield: 'firstname', width: 160
                  },
                  {
                      text: 'Last Name', datafield: 'lastname', filtertype: 'list',
                      width: 160
                  },
                  { text: 'Product', datafield: 'productname', width: 170 },
                  { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ];
			}

			$scope.gridOptions = {
                width: 850,
                source: getSource(),
                filterable: true,
                sortable: true,
                autoshowfiltericon: true,
                columns: getColumns()
            }
			$scope.createWidget = true;
			
			var state;
			
			$scope.button1 = function () {
				$scope.gridOptions.jqxGrid('sortby', 'productname', 'asc');
				var fnameFilterGroup = new $.jqx.filter();
				var filter_or_operator = 1;
				var filtervalue = 'Beate';
				var filtercondition = 'contains';
				var fnameFilter1 = fnameFilterGroup.createfilter('stringfilter', filtervalue, filtercondition);
				fnameFilterGroup.addfilter(filter_or_operator, fnameFilter1);
				$scope.gridOptions.jqxGrid('addfilter', 'firstname', fnameFilterGroup);
				$scope.gridOptions.jqxGrid('applyfilters');
			}
			
			$scope.button2 = function(){
				state = $scope.gridOptions.jqxGrid('savestate');
			}
			
			$scope.button3 = function(){
				$scope.show = !$scope.show;
			}
			
			$scope.button4 = function(){
				var columns = getColumns();
				$scope.gridOptions.source = getSource();
				$scope.gridOptions.apply({ columns: columns }); // We need to apply the new columns, because the columns definition might have changed.
			}
			
			$scope.button5 = function(){
				$scope.gridOptions.jqxGrid('loadstate', state);
			}
		});
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;" ng-app="test" ng-controller="testController">
	<div ng-show="show">
	<jqx-grid jqx-create="createWidget" jqx-settings="gridOptions"></jqx-grid>
	</div>
	<button ng-click="button1()">1. Apply filters</button><br/>
	<button ng-click="button2()">2. Save state</button><br/>
	<button ng-click="button3()">3. Show/Hide</button><br/>
	<button ng-click="button4()">4. Update data</button><br/>
	<button ng-click="button5()">5. Load state</button><br/>
    </div>
</body>
</html>
    July 28, 2017 at 10:57 am Updating data in hidden grid #95199

    Hristo
    Participant

    Hello Brln,

    Thank you for this feedback.
    I would suggest you follow this approach when update one or more properlies:

    var columns = getColumns();
$scope.gridOptions.source = getSource();
$scope.gridOptions.columns = columns;
$scope.gridOptions.refresh(['source', 'columns']);

    Also, I would like to suggest you as a workaround to save these changes of the settings while the Grid is hidden in one global variable and set them back when it appears again.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.