jqxGrid:ComboBox sort order changes

[todmbMember]

The sort order for the jqxGrid:ComboBox data in the grid seems to sort on it’s own, rather than using the order of the JSON output. Is there a way to default back to the JSON data order?

I have my mySQL statement pull the data in a specific sort order, but the jqxGrid:ComboBox re-sorts it alphabetically. How I stop this? This does not happen when I use the jqxComboBox on it’s own (outside of the grid), the order in the JSON output is retained:

example (JSON order and jqxComboBox order):
displayMember:
5.9
5.10-
5.10
5.10+
VB
V1
V2
T1
T2

However when I use the jqxGrid:ComboBox , it re-sorts the data:
example (jqxGrid:ComboBox order):
displayMember:
5.10
5.10+
5.10-
5.9
T1
T2
V1
V2
VB

My code for the jqxGrid:ComboBox is the same as the jqxComboBox so I’m not sure where the change is occurring:
jqxGrid:ComboBox code:

	$(document).ready(function () {
		// grid data
		var source = 
		{
			datatype: 'json',
			datafields: [
			{ name: 'LOCATION_NAME' },
			{ name: 'CLIMBTYPE_NAME' },
			{ name: 'GRADE_NAME' }
			],
			id: 'ROUTE_ID',
			url: 'php/current.php'
		};
		var dataAdapter = new $.jqx.dataAdapter(source, {
			loadComplete: function (data) { },
			loadError: function (xhr, status, error) { }      
		});
		// grade_select combobox data
		var sourceGRADE = 
		{
			datatype: "json",
			datafields: [
			{ name: 'GRADE_ID' },
			{ name: 'GRADE_NAME' }
			],
			id: 'GRADE_ID',
			url: 'php/grade_select.php',
			async: false
		};
		var dataAdapterGRADE = new $.jqx.dataAdapter(sourceGRADE, {
			loadComplete: function (data) { },
			loadError: function (xhr, status, error) { }      
		});
		// grid output
		$("#jqxgrid").jqxGrid( {
			editable: true,
			theme: 'web',
			width: 920,
			source: dataAdapter,
			columns: [
			{ text: 'Location', datafield: 'LOCATION_NAME', columntype: 'textbox', width: 50 },
			{ text: 'Type', datafield: 'CLIMBTYPE_NAME', columntype: 'textbox', width: 75 },
			{ text: 'Grade', datafield: 'GRADE_NAME', columntype: 'combobox', width: 100, 
				initeditor: function (row, cellvalue, editor) {
					editor.jqxcombobox({ 
						selectedIndex: 0,
						source: dataAdapterGRADE,
						displayMember: "GRADE_NAME",
						valueMember: "GRADE_ID"
                	});
            	}
        	}

jqxComboBox code (that sorts per JSON data order):

            $(document).ready(function () {
                // prepare the data
                var sourceGRADE =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'GRADE_ID' },
                        { name: 'GRADE_NAME' }
                    ],
                    id: 'GRADE_ID',
                    url: 'php/grade_select.php',
                    async: false
                };
                var dataAdapterGRADE = new $.jqx.dataAdapter(sourceGRADE);

                // Create a jqxComboBox
                $("#jqxWidget").jqxComboBox({ 
                    selectedIndex: 0, 
                    source: dataAdapterGRADE, 
                    displayMember: "GRADE_NAME", 
                    valueMember: "GRADE_ID",
                    width: 100
                });

[Peter StoevKeymaster]

Hi,

The data Sorting of the ComboBox/DropDownList editors is by default. In case you wish to override that, use the “createeditor” callback to apply a new data source to the widget.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[todmbMember]

Thank you for the info. However, the change to createeditor did not change the sort order back to the JSON table order (it is still in alphabetical order), plus it made the dropdown height the full length of the source list (instead of the manageable 200px default dropdown height).

What’s even more odd, to test things, when I change the displayMember of the editor.jqxcombobox call under createeditor (or initeditor) to another field in my source, the displayMember does not change. If I remove the displayMember and the valueMember, the list does not change. I am not sure where it is pulling the source to the combobox list.

I am confused.

-Why is the combobox list still sorting alphabetically?
-Why is the source not controllable?
-Why is the combobox height now out of control (even when I put in dropDownHeight: 200)?

Thank you very much for your assistance.

Tod

[Peter StoevKeymaster]

Hi Tod,

We have a demo with Custom ComboBox and DropDownList editors. Here’s a link: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customizededitors.htm?web.

As you can see, the items are not sorted. In addition, for changing the Data Source, displayMember and valueMember, it is better to use “createditor” as it is called when the editor is created. The “initeditor” is called each time the editor is opened.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts