HowTo: Filter via code in Wijmo Grid for LightSwitch HTML

Generally, ComponentOne Studio for LightSwitch HTML is used to automate the generation of JavaScript code for custom controls and integrate them seamlessly with the LightSwitch design-time environment to provide both ready-made screens and control-level extensibility. But, sometimes, you need to perform operations like filtering, sorting in code. In this blog, I describe how you can apply a filter or clear all the filters via code in Wijmo Grid for LightSwitch HTML. You can easily allow end users to perform filtering using 'showFilter' property and may refer to the online demo implementing the same. However, you may require to display filtered data based on some input from end user in custom event instead of Render event. In this case, you need to access the specific column and set its filter related properties i.e. filterValue and filterOperator. Here is the code which you may use:

var cols = $("#grid1″).wijgrid("columns");  
cols[2].options.filterOperator = "Equals";  
cols[2].options.filterValue = 23;  
$("#grid1").wijgrid("ensureControl", true);

Make sure that you have added an id to the table element so that you can refer to it elsewhere like:

var table = $("</pre>  
<table id="grid1"></table>  
<pre>");  

Moreover, you may also add a button to clear all the filters that are applied by end user or via code and can use the following code snippet in its handler:

$("#grid1″).wijgrid("columns").forEach(function (col) {  
      col.options.filterValue = null;  
      col.options.filterOperator = "NoFilter";  
  });  

  $("#grid1").data().wijmoWijgrid.options.filtering(this, { column: {} });  

Similarly, you can also apply sorting in code like this:

    var cols = $("#grid1").wijgrid("columns");  
    cols[2].options.sortDirection = "ascending";  
    $("#grid1").wijgrid("ensureControl", true);