Row Selection

[jacobezParticipant]

I am unable to have the grid remember selected rows after a sort. I would select certain rows, and the grid will remember the rows positions, rather than the spesific rows.

My Grid:

		var source =
		{
			datatype: "json",
			datafields:
			[
				{ name: 'idequipment', type: 'int'},
				{ name: 'supplier', 	type: 'string' },
				{ name: 'pcode', 		type: 'string' },
				{ name: 'name', 		type: 'string' },
				{ name: 'desc', 		type: 'string' },
				{ name: 'rating1', 	type: 'string' },
				{ name: 'rating2', 	type: 'string' },
				{ name: 'rating3', 	type: 'string' },
				{ name: 'list', 		type: 'float' },
				{ name: 'discount', 	type: 'float' },
				{ name: 'wire', 		type: 'int' },
				{ name: 'size', 		type: 'int' },
				{ name: 'esort', 		type: 'int' },
				{ name: 'seek', 		type: 'string' }
			],
			cache: false,
			async: false,
			sortcolumn: 'esort',
			sortdirection: 'asc',
			url: 'php/getequipmentlist.php',
			filter: function()
			{
				$("#equipmentgrid").jqxGrid('updatebounddata', 'filter');
			},
			sort: function()
			{
				$("#equipmentgrid").jqxGrid('updatebounddata', 'sort');
			},
			root: 'Rows',
			beforeprocessing: function(data)
			{
				if (data != null)
				{
					source.totalrecords = data[0].TotalRows;
				}
			}
		};

		var dataadapter = new $.jqx.dataAdapter(source,
		{
			loadError: function(xhr, status, error)
			{
				alert(error);
			}
		});
		var InitialColumnFilter = function()
		{
			var filtergroup = new $.jqx.filter();
			var filter = filtergroup.createfilter('stringfilter', 'Choose', 'equal');
			filtergroup.addfilter(0, filter);
			return filtergroup;
		}();

		$("#equipmentgrid").jqxGrid(
		{
			source: dataadapter,
			width: '99%',
			//height: '90%',
			altrows: true,
			filterable: true,
			showfilterrow: true,
			sortable: true,
			columnsresize: true,
			autoheight: true,
			//pageable: true,
			virtualmode: true,
			selectionmode: 'checkbox',
			//selectionmode: 'multiplerowsextended',
			theme: JQXTheme,
			//autosavestate: true,
			//autoloadstate: true,
			rendergridrows: function(obj)
			{
				return obj.data;
			},
			localization:
			{
				currencysymbol: "R",
				currencysymbolposition: "before"
			},
			showtoolbar: true,
			rendertoolbar: function (toolbar)
			{
				var me = this;
				var container = $("<div style='margin: 5px;'></div>");
				var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'> </span>");
				var input = $("<div id='supplierLTB'></div>");
				toolbar.append(container);
				container.append(span);
				container.append(input);
				var SLsource =
				{
					datatype: "json",
					type: "POST",
					datafields:
						[
							{ name: 'supplier' },
							{ name: 'supplierfullname' }
						],
					url: "php/getsupplierlist.php",
					async: false,
					data:
					{
						DBHost: VHost,
						DBase: VDBase,
						User: VUser,
						Pass: Vpass
					}
				};
				var SLdataAdapter = new $.jqx.dataAdapter(SLsource);
				$("#supplierLTB").jqxComboBox(
							{
								source: SLdataAdapter,
								valueMember: 'supplier',
								displayMember: 'supplierfullname',
								placeHolder: "Supplier",
								autoDropDownHeight: true,
								minLength: 1,
								autoComplete : true,
								theme: JQXTheme
							});

				input.on('select', function (event)
				{
					var args = event.args;
					if (args)
					{
						var value = args.item.value;

						var filtergroup = new $.jqx.filter();
						var filter = filtergroup.createfilter('stringfilter', value, 'equal');
						filtergroup.addfilter(0, filter);
						$("#equipmentgrid").jqxGrid('addfilter', 'supplier', filtergroup);
						$("#equipmentgrid").jqxGrid('applyfilters');
					}
				});
			},

			columns:
				[
					{ text: 'Seek', 		datafield: 'seek', 			cellsalign: 'left', 	align: 'centre', width: '5%'  },
					{ text: 'Supplier', 	datafield: 'supplier',		cellsalign: 'left', 	align: 'centre', width: '8%',filter: InitialColumnFilter },
					{ text: 'Rating 1', 	datafield: 'rating1', 		cellsalign: 'left', 	align: 'centre', width: '6%'  },
					{ text: 'Rating 2', 	datafield: 'rating2', 		cellsalign: 'left', 	align: 'centre', width: '6%'  },
					{ text: 'Rating 3', 	datafield: 'rating3', 		cellsalign: 'left', 	align: 'centre', width: '6%'  },
					{ text: 'Product Code', datafield: 'pcode', 		cellsalign: 'left', 	align: 'centre', width: '11%'  },
					{ text: 'Name', 		datafield: 'name', 			cellsalign: 'left', 	align: 'centre', width: '22%' },
					{ text: 'Description', 	datafield: 'description', 	cellsalign: 'left', 	align: 'centre', width: '14%' },
					{ text: 'List', 		datafield: 'list', 			cellsalign: 'right',	align: 'centre', width: '6%', 	cellsformat: 'c2' },
					{ text: 'Discount', 	datafield: 'discount', 		cellsalign: 'right', 	align: 'centre', width: '6%', 	cellsformat: 'p' },
					{ text: 'Sort', 		datafield: 'esort', 		cellsalign: 'right', 	align: 'centre', width: '6%' }
				]
		});

[jacobezParticipant]

To add, I would like it to act like the demo at:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/paging.htm?arctic

[NadezhdaParticipant]

Hello jacobez,

You can use ‘pagechanged’ and ‘pagesizechanged’ events to achieve this functionality. ‘pagechanged’ event is triggered when the current page is changed and ‘pagesizechanged’ event is triggered when the page size is changed.

Best Regards,
Nadezhda

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

[jacobezParticipant]

Just to clarify, It’s not the paging functionality I need, rather the ability for the grid to remember the row that was selected and not only it’s position.
I’m beginning to suspect it’s not possible since the grid data is reloaded after sort or filter requests.

[NadezhdaParticipant]

Hi jacobez,

Please, try the following example which shows disabled Grid Paging feature and selected row is not lost after sorting function.

<!DOCTYPE html>
<html lang="en">
<head>
    <title'></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/orders.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: false,
                autoheight: true,
                columnsresize: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
                  { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
                ]
            });
        });
    </script>
</head>
<body>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

[Author]

Posts