Recently we had a question from one of our customers which we believe might have been applicable to quite a few of you.

Below is the question:

Filters: I want to set to pre-filters on two columns, when grid launches for first time...so I did as below

var onCreationComplete=function(event){

var grid = event.target;                  

grid.setFilterValue("Start_time",flexiciousNmsp.DateRange.DATE_RANGE_LAST_24_HOU RS);

          grid.setFilterValue("RecordType",'Launch'.toString());

}

Two issue here :

•  

  • First issue.. it sent two different queries to database server, one for "Start_time" and other "Start_time" + "RecordType" ..so overall load time doubled..

  • Second issue... For "RecordType"  filter value 'Launch', is split up into l+a+u+n+c+h, below is url

So the resolution to the first one is simple. The setFilterValue  has a third parameter  which is a boolean value of true or false,  this value basically instructs the grid  whether or not to run the filter.  so when you have multiple parameters to set just call this method with default parameters and once you're done setting all the parameters just call the processFilter method.

The second issue is a little complicated.  the value that you pass into the setFilterValue method  is dependent on the type of filter control you have.  for text input filter control  you can pass in a text value and be okay with it,  however for  a multi select  you need to pass in  an array  so what you would have here is

          grid.setFilterValue("RecordType",['Launch']);

Another caveat is to make sure that you call this  after you've built the grid  or have  provided a data provider  to the multi select.  please make sure that you called grid.validateNow()  Prior to calling set filter value.

In the most recent version of the HTML tree grid  we have introduced the PDF export. In addition to this we included the FileSaver library (https://github.com/eligrey/FileSaver.js/)  which makes it a lot easier for the browser to download file.

Prior to the introduction of this library we had multiple mechanisms for our exported files to be downloaded to the client.  A majority of our export code basically built a string and then  creates a file with that string.  This holds true for Excel html/xml word and text exports.  The PDF export is an exception in that it creates a binary file and uses file saver to save the file.  But for the most part the mechanism used is to build a string and to save it to a file.

There is a flag on the export options called enableLocalFilePersistence. this flag is defaulted to true.  When this flag is true and FileSaver exists  then our product uses FileSaver  to persist a file to disk . The advantage of FileSaver is that it doesn't require Flash  and it doesn't require any custom button used to download the file.  so if you include the following script tag  in your  HTML you should automatically get file saver because PDF scripts include the file saver scripts.

<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/thirdparty/jspdf-combined.js"></script>

If you don't include the above script, the prior version of the download mechanism that used Downloadify library will be used to download the file. The limitation with this is that  it uses the flash player and has its custom UI to download a file which looks like this. But the advantage is that it opens up a browse window that allows our customers to choose where to save the file.  

For those of our customers who want to use the older version just make sure you don’t have the following script tag included.

<script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/thirdparty/jspdf-combined.js"></script>.

Finally there's one more mechanism  that doesn't rely on any client-side library.  this is the server echo method  and we talk about this  in an older blog post here http://blog.htmltreegrid.com/post/Excel-Word-and-Html-Export-and-the-Echo-URL.aspx

This should actually no longer be used, Because it affords no major advantages  over the  FileSaver method.  many of our customers are older versions of the product are probably using this.  if you're one of them please consider using the file saver method.  all you have to do is to set enableLocalFilePersistence  back to true  and include  the file saver library  either directly from the file saver location  or by importing JS PDF library

 <script type="text/javascript" src="http://htmltreegrid.com/demo/external/js/thirdparty/jspdf-combined.js"></script>

On a recent occasion a customer asked us the following question

• For 'TextInput' filters, even before I finish typing, it triggers filter..it should wait at least for me to finish my typing?

  • '<column filterControl="TextInput" filterOperation="Contains" filterTriggerEvent="enterKeyUpOrFocusOut" dataField="record" width="350" headerText="Record"/>'

• Is there any way to combine multiple filters in one server request or in other words TreeGrid wait for me to complete all my filter setting and then it do server call like filtering on 'n' columns take 'n' server round trip.

The good thing to know is all of the above is certainly possible. When you define a filter on a column one of the properties that is exposed by the column is that what action triggers the filter on that column. The property is called filterTriggerEvent, and the three values that this property can take are as follows

1. enterKeyUp

2. change

3. none

The Enter key up should be fairly self explanatory in that the filter is run when the user is done typing and hits the Enter key.

The change is a little interesting in that some of our filter controls Implement what's called an  Idelaychange  interface. What this does is when the control dispatches a change event it waits for a certain configurable  predefined interval and then issues delayedChange. So what happens in this scenario is after the user stops typing and pauses for a certain predefined interval the delay change is dispatched. and the filters run in response to the delayed change.

And the final option is the none.  what this basically means is that the filter should be run only via an external button click.  in the default toolbar we include a run filter button That you do this for you. alternatively you can always trigger a filter be a calling processFilter  method on the grid.

'               <column dataField="userId" headerWordWrap="true" headerText="User ID Filter will happen when you hit enter -" filterTriggerEvent="enterKeyUp" filterControl="TextInput"/>' +

      '              <column dataField="id" headerWordWrap="true" headerText="ID Filter will happen press run filter button" filterTriggerEvent="none" filterControl="TextInput"/>' +

      '              <column dataField="title" headerWordWrap="true" headerText="Title - Filter will happen 250 msec after you stop typing" filterOperation="Contains" filterTriggerEvent="change" filterControl="TextInput"/>' +

Below is an example that demonstrate each of these three modes above

FilterPageSortChangeEvent.html (3.58 kb)