Wijgrid : Custom Filtering

One of the most common and important features of a grid is the ability to filter. You see a grid full of data and you filter it out to see data based on the filter condition. This article focusses on how to load filtered data into wijgrid directly from the server i.e data is fetched from the server based on a filter condition and loaded in wijgrid. The filter condition can be provided using a textbox or any other input element of your choice. To accomplish our goal, we will use the wijdatasource, wijarrayreader and the wijhttpproxy APIs. You may go through the documentation, if you're not familiar with these APIs.

Building the Foundation : DataSource

First of all, we need to set up the wijhttpproxy object to connect to the server. We'll specify the url and the dataType that is returned by the server. The important thing to note here is the "name_startsWith" argument which determines the filter condition.

var proxy = new wijhttpproxy({  
   url: "http://ws.geonames.org/searchJSON",  
   dataType: "jsonp",  
   data: {  
      featureClass: "P",  
      style: "full",  
      maxRows: 12,  
      name_startsWith: 'ab'  
   },  
   key: 'geonames'  
});

Next, we need to setup the wijarrayreader object. wijarrayreader defines the mapping rule to read raw data and return it in the appropriate format.

var myReader = new wijarrayreader([{  
   name: 'label',  
   mapping: function (item) {  
   return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName  
   }  
   }, {  
   name: 'value',  
   mapping: 'name'  
   }, {  
   name: 'selected',  
   defaultValue: false  
   }  
]);

Finally, we need to setup the wijdatasource object. This is pretty easy as the major tasks have been accomplished by wijhttpproxy and wijarrayreader. We just need to set the reader and the proxy options of wijdatasource to the wijhttpproxy and the wijarrayreader objects we've defined above.

datasource = new wijdatasource({  
   reader: myReader,  
   proxy: proxy  
});

Loading Data in wijgrid

We'll set the data option of wijgrid to the wijdatasource object defined above. You may choose to define the other options of wijgrid according to your interest. Calling the load() method of wijdatasource would load the data in wijgrid.

$("#grid").wijgrid({  
   data: datasource,  
   ensureControl: true,  
   columns: [  
      { headerText: "Label" },  
      { headerText: "Value" },  
      { headerText: "Selected" }  
   ]  
});  

datasource.load();

Filtering Data

Fetching data from the server based on a condition may seem to be difficult at first, however, it really isn't. Thanks to the wijhttpproxy and wijdatasource APIs which make it so easy to implement. We simply need to set the value of the 'name_startsWith' parameter of wijhttpproxy's object to the filter condition and call the load() method of wijdatasource to load new data.

function loadFilteredData() {  
   datasource.proxy.options.data.name_startsWith = $('#testinput').val();  
   datasource.load();  
}

Conclusion

This article describes how you can load filtered data from the server. You may modify the code to fire the loadFilteredData() method as per your requirement (for eg. on keydown event of the textbox). Please take a look at the attached sample for reference. Download Sample