Saturday, January 4, 2014

How to open the menu of a DOJO Filtering Select widget

Just another Dojo example, nothing special, just for self-reference.

Create your dojo filtering select programmatically or declaratively. Then in your javascipt code use the Filtering Select's _startSearchFromInput or _startSearchAll method, depending on if you want the result list to show the type-ahead matches or if you want to show all values.

Here's an example of a declarative way of creating your filtering select widget for 'year' values.

<div>
	<!-- Dojo Filtering Select -->
	<select name="year" id="year" dojoType='dijit.form.FilteringSelect'>
		<option value="Year" selected="selected">YEAR</option>
	</select>							
</div>	

The 'year' values for this filtering select will be populated by ajax.  See the javascript code below.

function buildYearFilteringSelect() {
	//fetch the 'YEAR' options
	var yearFS = dijit.byId("year");
	yearFS.store.root.options.length = 0;
	var xhrArgs = {
    	    url: "AjaxGetYearJSONURL",
    	    handleAs: "json",
    	    preventCache: true,    	
    	    content: {
                "retrieveType": "YEAR"
    	    },
    	    error: function (error) { 
    		errorHandle(error); 
    	    },
    	    load: function (data) {
        	if(data.items != null && data.items.length > 0){	
        		yearFS.store.root.options[0] = new Option("YEAR", "Year");   			
        		for(var i=1;i<data.items.length;i++){
	      	   	 	yearFS.store.root.options[yearFS.store.root.options.length] = 
	      	   	 		new Option(data.items[i].value, data.items[i].value);
	      	   	}
		        yearFS.attr('value','Year');
			yearFS.attr('displayedValue','YEAR');
			//use dojo.connect to call the _startSearchAll() method when the _onConnect event is triggered on the filtering select widget
			//then call the select() and focus() methods to automatically open the filtering select's menu
   			dojo.connect(yearFS, '_onConnect', function (val) {
				  yearFS._startSearchAll();
				  document.getElementById('year').select();					
			}	
			yearFS.focus();			
        	}
    	    }
	};
	dojo.xhrGet(xhrArgs);	
}


No comments:

Post a Comment