Scrolling to pre-SelectedIndex in ListBox

[JhuttParticipant]

Below I have a ListBox being built and I pass a variable to define a pre-selected item from the list, however the ListBox doesn’t automatically display the selection in the viewable area. Any suggestions?

        // Create jqxListBox
        $('#memberlistbox').jqxListBox({
       	    theme: 'energyblue',
            filterable: true,
            source: members,
            searchMode: 'containsignorecase',
			autoItemsHeight: true,
            height: 300,
            width: 290,
            <% if selectedmember <> "" then response.write "selectedIndex:" & selectedmember & "," %>
            renderer: function (index, label, value) {
                var datarecord = memberid[index];
                var table = "<div onclick=\"QuietSwitch('_functions/subnav.asp','member=" + datarecord + "','sub_menu','');\">" + label + "</div>";
                return table;
            }
        });

So just to repeat, the ListBox loads correctly with my selectedItem selected, however the selectedItem does not appear in the viewable area. Looking for ideas to scroll the ListBox to display the currently selected item.

TIA

[JhuttParticipant]

Resolved using a manipulated ‘ensureVisible’. My Listbox displays 13 rows of options so by using logic, the selectedIndex is not in the last 6 records so I can vertically center it in the ListBox, therefore using the following:

<% if selectedmember <> "" then 
	if counter - selectedmember > 6 then
		selectedcounter = selectedmember + 6
	else
		selectedcounter = selectedmember + (counter - selectedmember)
	end if
	%>
	<script type="text/javascript">  
	$("#memberlistbox").jqxListBox('ensureVisible', <%=selectedcounter%> ); 
	</script>
<% end if %>

My ListBox now centers the pre-SelectedIndex unless it is the last 6 entries and then it adjusts it up from the bottom of the ListBox.

Hope this might help someone else in the future.
Jason

[Author]

Posts