getItemByValue and bindingComplete

[mrallarisParticipant]

Hello – I have a dropdownbox that is populated by a local json data source. When the page loads I want to auto-select an item in the dropdownlist. I have tried several methods with varying degrees of failure. I should also mention that the page is in a tab widget and is called in the initWidgets function.

If I leave out the whole “binding” thing then my code runs fine and the dropdownlist populates but does not pre-select. In this scenario if I put an alert prior to my pre-select code then the selection works perfectly. This has led me to believe that my selection code is running before the dropdownlist is populated.

If I call my pre-select code in the bindingComplete method then the getItemByValue method seems to throw an error (although no error message is seen) and the dropdownlist does not populate. I noticed that if I put an alert in the bindingComplete method it gets called before the dropdownlist appears on the screen. I thought bindingComplete should raised after the dropdownlist exists?

Here are some code snippets …

In my main page I initiate the tabs as follows:

		
		function populatePartCat()
		{
			var item = $("#category_text").jqxDropDownList('getItemByValue', 'FG');
			$("#category_text").jqxDropDownList('selectItem', item);
		}

	$(document).ready(function () {

$(".category_text").on('bindingComplete', function (event) { populatePartCat(); });

var partCatSource = {
	localData: partCatList,
	dataType:  "json",
	dataFields: [
		{ name: 'label' },
		{ name: 'value' }
	],
};
var partCatAdapter = new $.jqx.dataAdapter(partCatSource);
$(".category_text").jqxDropDownList({theme: 'ui-smoothness', placeHolder: 'Select ...', source: partCatAdapter, displayMember: 'label', valueMember: 'value', width: 220, height: 16 });

		var initWidgets = function (tab) {
	                switch (tab) {
			    case 0:
				initPartPanel();
				initDrawingPanel();
				populatePartData();
				break;
	                    case 1:
				initQuotePanel();
                        	initLaborTable();
				initCostTable();
				populateQuoteData();
				break;
	                    case 2:
                        	initBOMEstimateTable();
				break;
	                    case 3:
                        	initBOMActualTable();
				break;
			}
		}
	});

Initially I had my selection code in the populatePartData() function which is called when the tab is initialized but this was being called before the dropdownlist was populated so I moved it to bindingComplete.

I could really use your help here. Thanks!!

Matt

[Peter StoevKeymaster]

Hi mrallaris,

I suppose you have multiple DropdownLists on your page as you select them by CSS Class. Is that right? If that is so, then you should have unique jqxDataAdapter instance bound to each DropdownList. Yes, bindingComplete is raised when the dataAdapter’s data is loaded and the DropDownList’s rendering and binding is completed. At least that happens in our samples. Please, provide a jsfiddle.net example which illustrates your scenario.

Best Regards,
Peter Stoev

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

[Author]

Posts