Sort order not working for 'localdata' - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Sort order not working for localdata

This topic contains 2 replies, has 2 voices, and was last updated by aravindtrue 12 years, 4 months ago.

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

Author

Sort order not working for ‘localdata’ Posts

December 4, 2012 at 10:45 am Sort order not working for ‘localdata’ #11873

Member

Hi,

For some reason, I am loading the plugin into two half, please have a look at the below code. The sort is not working, but When I comment the ‘localdata’ and uncomment the ‘url’, it works perfect. I am not getting the problem, why it is not working for ‘localdata’.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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.edit.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/jqxnumberinput.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/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
		var theme = getTheme();
		var url = "../sampledata/beverages.txt";
		$("#jqxgrid").jqxGrid({
			width: '100%',
			theme: theme,
			pagesize: 200,
			pagesizeoptions: ['10', '50', '100', '200'],
			sortable: true,
			filterable: true,
			autoshowfiltericon: true,
			pageable: true,
			columnsresize: true,
			altrows: true,
			selectionmode: 'singlerow',
			editable: true,
			editmode: 'dblclick'
		});
		var source = {
			datatype: "json",
			datafields: [
			  { name: 'name' },
			  { name: 'type' },
			  { name: 'calories', map: 'calories>old', type: 'integer'},
			  { name: 'totalfat' },
			  { name: 'protein' },
			],
			localdata: [{"id": "1",
					"name": "Hot Chocolate",
					"type": "Chocolate Beverage",
					"calories": "370",
					"totalfat": "16g",
					"protein": "14g"
					}, {
					"id": "2",
					"name": "Peppermint Hot Chocolate",
					"type": "Chocolate Beverage",
					"calories": "440",
					"totalfat": "16g",
					"protein": "13g"
					}, {
					"id": "3",
					"name": "Salted Caramel Hot Chocolate",
					"type": "Chocolate Beverage",
					"calories": "450",
					"totalfat": "16g",
					"protein": "13g"
			}],
			/*url: url,*/
			sortcolumn: 'name',
			sortdirection: 'asc'
			};
			var dataAdapter = new $.jqx.dataAdapter(source);
			$("#jqxgrid").jqxGrid({
				source: dataAdapter,
				selectedrowindex: 0,
				columns: [
				  { text: 'Name', datafield: 'name'},
				  { text: 'Beverage Type', datafield: 'type'},
				  { text: 'Calories', datafield: 'calories', cellsformat: 'c2',
                                   columntype: 'numberinput' },
		                  { text: 'Total Fat', datafield: 'totalfat' },
				  { text: 'Protein', datafield: 'protein' }
				]
			});

        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; width:80%;">
		<div id="jqxgrid"></div>
    </div>
</body>
</html>

Please help me on this.

Regards,

Aravind M S

December 4, 2012 at 11:50 am Sort order not working for ‘localdata’ #11884

Peter Stoev

Keymaster

Hi Aravind.

The posted code works fine with jQWidgets 2.5.5 on my side. The first column is sorted by default as you specified in the source object’s initialization and the sorting for the other columns works, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 4, 2012 at 4:27 pm Sort order not working for ‘localdata’ #11891

aravindtrue

Member

Thanks a lot. I’ll update the jQwidgets version.

Regards,
Aravind

Author

Posts

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

You must be logged in to reply to this topic.