Start Building Professional
Web Apps Today

Date field filetring - how to?

Hello!

I have date column in my grid, and i want to filter values like >2008-10-01 and 2008-10-01..2008-10-15 (just like in numeric_filter)

How can I do this?

There is no built in functionality for such kind of filtering
You can create a custom input box inside header and attach filterBy call to it through DOM events. 
filterBy allows to define custom function as filtering rule - which can be used to compare values in custom formats. 
http://dhtmlx.com/docs/products/dhtmlxGrid/doc/articles/Data_filtering_search.html#grid_fsing

Could you post here some basic example how to create custom filter and attache this filter to existing grid?

Attaching complex content to the header:
<div id="title_flt_box"><input type="100%" style="border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onkeyup="customFilter()"></div>
...
mygrid.loadXML("grid.xml", function(){
                mygrid.attachHeader("#rspan,<div id='title_flt'></div>,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan");
                //set title filter field
                document.getElementById("title_flt").appendChild(document.getElementById("title_flt_box").childNodes[0])
                mygrid.setSizes();
            });

    function customFilter(){
            columnIndex=1;
            var tVal = document.getElementById("title_flt").childNodes[0].value.toLowerCase();
            mygrid.filterBy(columnIndex,tVal);
        }
columnIndex - index if a column with input.
   

Thanks for example, but where I should put filtering code like "IF cond THEN show/hide"?

mygrid.filterBy(columnIndex,tVal);

can be extended as 

mygrid.filterBy(columnIndex,function(data){
     return any_kind_of_check(data); // return true to confirm row, or false to hide it
});

Hi!

In grid v.2.0 build 81107 is not possible to filter by date, this is my solution for date filtering:

What you will need:

1. get javascrilt google Date extended implementation form here: http://code.google.com/p/datejs/ (its open source) or from attached file

2. put data.js in dhtmlxGrid\codebase\ext\

3. replace original  dhtmlxGrid\codebase\ext\dhtmlxgrid_filter.js attached one (save original somewhere!)

4. modify HTML to load data.js from dhtmlxGrid\codebase\ext\data.js eg.:
<script src="/js/dhtmlx/dhtmlxGrid/codebase/date.js" type="text/javascript"></script>

5. Define #numeric_filter as filter type in grid configuration script.

Its done!

Now you can filter by date like this:
>2006-01-01
2006-01..2006-06
>May 2006
>2006 May
may 2006..today

Not that ">2006" will not work because date parser will not find correct date string in "2006"