ComboBox not populating on the first try

[RedantJParticipant]

Hey guys!

I have an odd problem. In the grid that I’m currently working on, I have a detailsrow. In the detailsrow is an Edit button. Clicking on the Edit button brings up a pop-up Edit screen. All data populates as expected on the pop-up Edit screen except for one: Rooms (jqxDropDown). When you select a different row on the grid, and click on that row’s Edit button, all data including Rooms populates. Do I have code in initrowdetails that needs to be moved somewhere else? Or do I have another problem?

var initrowdetails = function (index, parentElement, gridElement, datarecord) {
	var tabsdiv = null;
	var information = null;
	tabsdiv = $($(parentElement).children()[0]);
	if (tabsdiv != null) {
		information = tabsdiv.find('.information');
		var title = tabsdiv.find('.title');
		title.text(datarecord.MakeModel);
		var container = $('<div style="margin: 5px;"></div>');
		container.appendTo($(information));
		var leftcolumn = $('<div style="float: left; width: 40%;"></div>');
		var rightcolumn = $('<div style="float: left; width: 20%;"></div>');
		container.append(leftcolumn);
		container.append(rightcolumn);
		var school = "<div class='jqx-rc-all' style='margin: 10px;'><b>Location</b> " + datarecord.SchoolID + "</div>";
		var rm = "<div class='jqx-rc-all' style='margin: 10px;'><b>Room</b> " + datarecord.rmSchool + "</div>";
		var blah = "<div class='jqx-rc-all' style='margin: 10px;'><b>Maint Start</b> " + datarecord.blah + "</div>";
		var foo = "<div class='jqx-rc-all' style='margin: 10px;'><b>Maint End</b> " + datarecord.foo + "</div>";
		var editButton = $("<button style='margin-left: 5px;'>Edit</button>");
		$(leftcolumn).append(school);
		$(leftcolumn).append(rm);
		$(rightcolumn).append(blah);
		$(rightcolumn).append(foo);
		container.append(editButton);
		editButton.jqxButton();
		editButton.click(function(event) {
			editrow = index;
			var offset = $("#jqxgrid").offset();
			$("#popupEdit").jqxWindow({ theme: 'orange', position: { x: parseInt(offset.left) + 60, y: parseInt (offset.top) + 60 } });
			$("#popupEdit").jqxWindow('setTitle',datarecord.MakeModel + " / " + datarecord.description);
			$("#popupEdit").jqxWindow('open');
			// ----------------------------------
			var nameSchool = datarecord.SchoolID;
			$("#schoolName").jqxComboBox({ theme: 'orange', source: adapterSchools, displayMember: "label", valueMember: "value", width: 250, height: 25});
			$("#schoolName").jqxComboBox('val', nameSchool);
			// ----------------------------------
			$("#roomName").jqxComboBox({ theme: 'orange', displayMember: 'RoomIdent', valueMember: 'SchoolIdent'});
			sourceRooms.data = {SchoolIdent: SchoolID};
			adapterRooms = new $.jqx.dataAdapter(sourceRooms, {
				beforeLoadComplete: function (records) {
					var filteredRecords = new Array();
					for (var i = 0; i < records.length; i++) {
						if (records[i].SchoolIdent == nameSchool)
							filteredRecords.push(records[i]);
					}
					return filteredRecords;
				}
			});
			$("#roomName").jqxComboBox({ source: adapterRooms});
			// Bind Schools to Rooms
			$("#schoolName").bind('select',function(event) {
				if (event.args) {
					$("#roomName").jqxComboBox({selectedIndex: -1});
					var value = event.args.item.value;
					sourceRooms.data = {SchoolIdent: value};
					adapterRooms = new $.jqx.dataAdapter(sourceRooms, {
						beforeLoadComplete: function (records) {
							var filteredRecords = new Array();
							for (var i = 0; i < records.length; i++) {
								if (records[i].SchoolIdent == value)
									filteredRecords.push(records[i]);
							}
							return filteredRecords;
						}
					});
					$("#roomName").jqxComboBox({ source: adapterRooms});
				}
			});
			//********************************************************************************************************************************
			nameRoom = datarecord.rmSchool
			var items = $("#roomName").jqxComboBox('getItems');
			for (var i = 0; i < items.length; i++) {
				var itemX = items[i];
				if (itemX.label === nameRoom) {
					// We found a match!
					var indexX = itemX.index
                                        // This shows up every time
					alert ("Match! " + itemX.label + " | " + nameRoom + " | " + itemX.index)
                                        // This works every time, except for the first time
					$("#roomName").jqxComboBox('selectIndex',indexX);
				}
			}
			//**********************************************************************************************************************************
		});

[RedantJParticipant]

Some changes made:

I’ve removed all code between the asterisks, and I’ve went with the “placeHoler” property thus:

$("#roomName").jqxComboBox({ theme: 'orange', displayMember: 'RoomIdent', valueMember: 'SchoolIdent', placeHolder: nameRoom});
sourceRooms.data = {SchoolIdent: SchoolID};
adapterRooms = new $.jqx.dataAdapter(sourceRooms, {
	beforeLoadComplete: function (records) {
		var filteredRecords = new Array();
		for (var i = 0; i < records.length; i++) {
			if (records[i].SchoolIdent == nameSchool)
				filteredRecords.push(records[i]);
		}
		return filteredRecords;
	}
});

This will be my work-around solution unless I’ve been told otherwise

[Author]

Posts