Grid Search By Range

[Richard Dublon]

Hi,
Is there a way to create a search by a range....like by dates?
For example let's say I have a MailDate column and the user wants to search for any records that fall between 1/1/16 and 3/1/16.  I don't want to use a column filter because the search needs to be done before the grid is displayed....as in the grid uses the range as the dataset where clause. 
Thanks

[Seeni Sakthi Kumar Seeni Raj]

Hi Richard, 

 

Thanks for contacting Syncfusion Support.  

 

We can achieve your requirement “Filter Columns at the initial Render of the Grid” using the filteredColumns of the Grid filterSettings. In the Load event of the Grid, push the filtering values into the filterColumns. Refer to the following code example. 

 

@(Html.EJ().Grid<object>("FlatGrid") 

                    .Datasource((IEnumerable<object>)ViewBag.data) 

                    .AllowFiltering() 

                    .ClientSideEvents(events => events.Load("onLoad")) 

                  . . . 

                    . . .  

) 

 

<script type="text/javascript"> 

 

    function onLoad(args){ 

        this.model.filterSettings.filteredColumns = [ 

              {"value":new Date("07/04/1996"),"operator":"greaterthan","field":"OrderDate","predicate":"or","matchcase":true}, 

              {"value":new Date("07/12/1996"),"operator":"lessthan","field":"OrderDate","predicate":"and","matchcase":true} 

        ] 

    } 

</script> 

 

https://help.syncfusion.com/api/js/ejgrid#events:load 

https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filteredcolumns 

 

Regards, 

Seeni Sakthi Kumar S. 

[Richard Dublon]

This is great...thanks.
Is there a way to remove the filter textboxes from the top of the columns?  If I remove .AllowFiltering() the boxes disappear but then the filtering itself doesn't work.

[Seeni Sakthi Kumar Seeni Raj]

Hi Richard, 

 

We can hide the filterbar row of the Grid in DataBound event of the Grid by adding the e-hide class to the e-filterbar element. Refer to the following code example. 

 

 

@(Html.EJ().Grid<object>("FlatGrid") 

                    .Datasource((IEnumerable<object>)ViewBag.data) 

                    .AllowFiltering() 

                    .ClientSideEvents(events => events.Load("onLoad").DataBound("dataBound")) 

 

) 

 

<script type="text/javascript"> 

 

 

    function dataBound(args){ 

        this.element.find(".e-filterbar").addClass("e-hide"); 

    } 

</script> 

 

Refer to the following API Reference Section. 

 

https://help.syncfusion.com/api/js/ejgrid#events:databound 

 

Demo Sample: http://jsplayground.syncfusion.com/1iqkrwwa 

 

Regards, 

Seeni Sakthi Kumar S. 

[Richard Dublon]

Hi,
Hiding the filter boxes with the code you game me worked very well.
One problem I am having though is clearing the filter from code.
I have a SyncFusion date picker that I am using to filter the grid via a button click.  What is happening is if I put in a date and hit my button my grid filters correctly.  If I then take the date out of the datepicker and leave it blank and hit the button, the grid is still filtered based on the last entry.
The following clears out the filter box but I can't get the grid to refresh:

masterGrid.element.find(".e-filterbar")[0].childNodes['0'].firstElementChild.firstElementChild.value='';

masterGrid.refreshContent(true); refreshes the grid but it doesn't clear the filter.

How do I reload the grid from javascript to get my grid back to its original state?

[Seeni Sakthi Kumar Seeni Raj]

Hi Richard, 

 

You can use the clearFiltering method of the Grid to clear the filtered record. Refer to the following code example and API Reference. 

 

 

@(Html.EJ().Grid<object>("FlatGrid") 

              .AllowFiltering() 

              . . .  

) 

 

<script type="text/javascript"> 

    $(function () { 

        $("#btn").ejButton({ 

            text: "clear filter", 

            click: function (args) { 

                var obj = $("#Grid").ejGrid("instance"); 

                obj.clearFiltering(); 

            } 

        }) 

    }); 

</script> 

 

https://help.syncfusion.com/api/js/ejgrid#methods:clearfiltering 

 

Demo sample: http://jsplayground.syncfusion.com/kvja2a2e 

 

Regards, 

Seeni Sakthi Kumar S. 

[Richard Dublon]

One more question...
Is there a way to filter the same grid column by more than one piece of criteria.  I have added a second datepicker control so the user can select a range of dates.
I have tried the following code but it only appears to use the second criteria:

 masterGrid.filterColumn([{ "value": new Date($("#MailDateFrom")[0].value), "operator": "greaterthanorequal", "field": "MailDate", "predicate": "and", "matchcase": true },
           { "value": new Date($("#MailDateTo")[0].value), "operator": "lessthanorequal", "field": "MailDate", "predicate": "and", "matchcase": true }]);

Separately, I am using the code that you gave me to clear the filter in the event the user removes the value from the datepicker control.  Now that I have two datepickers, how would I clear just the part of the filter that matches the empty datepicker?

[Richard Dublon]

I also tried what you initially sent me but that doesn't work(it could be because it was assuming it was going to run off of the onload vs a button click.  Here is the code you sent that I tried to modify for my purposes:

function click() {
            var masterGrid = $("#MasterGrid").data("ejGrid");

            masterGrid.filteredColumns = [
              {"value":new Date($("#MailDateFrom")[0].value),"operator":"greaterthanorequal","field":"MailDate","predicate":"or","matchcase":true},
              {"value":new Date($("#MailDateTo")[0].value),"operator":"lessthanorequal","field":"MailDate","predicate":"and","matchcase":true}
            ]
  
        }

[Seeni Sakthi Kumar Seeni Raj]

Hi Richard, 

 

Query #1: I have tried the following code but it only appears to use the second criteria: 

 

We will not use the filterColumn with more than one value which is the default behavior. So we have suggested an alternate solution as filterSettings.filteredColumns.  

 

Query #2: how would I clear just the part of the filter that matches the empty datepicker? 

 

We suspect that you would like to remove one filter object from the filteredColumns collection and render the Grid based on that value. This can be achieved by splicing the one object and refreshing the Grid content using the refreshContent method of the Grid. Refer to the following code example. 

 

<script type="text/javascript"> 

 

    $("#btn2").ejButton({ 

        text: "Remove One Operator", 

        click: function (args) { 

            var obj = $("#Grid").ejGrid("instance"); 

            var fcols = obj.model.filterSettings.filteredColumns; 

            var filterObj = ej.DataManager(fcols).executeLocal(new ej.Query().where("operator", "equal", "lessthan"))[0]; 

            var inx = fcols.indexOf(filterObj); 

            obj.model.filterSettings.filteredColumns.splice(1, inx); 

            obj.refreshContent(); 

        } 

    }) 

</script> 

 

If we misunderstood your query, please explain the exact scenario that you would like to achieve.  

 

Query #3: it was going to run off of the onload vs a button click 

 

Code we suggested in our earlier update for filtering the column through load event of the Grid. But we suspect that you have updated the filteredColumns in the external events which is the cause of the problem. If you are updating the Grid models in the external action, it will never after the Grid until you have called the refreshContent method of the Grid. So we suggest to call the refreshContent method of the Grid after updating the Grid model. Refer to the following code example and API Reference. 

 

@(Html.EJ().Grid<object>("FlatGrid") 

              .AllowFiltering() 

              . . . 

) 

 

<script type="text/javascript"> 

 

    $("#btn1").ejButton({ 

        text: "Filter", 

        click: function(args){ 

            var obj = $("#Grid").ejGrid("instance"); 

            obj.model.filterSettings.filteredColumns = [  

              {"value":new Date("07/04/1996"),"operator":"greaterthan","field":"OrderDate","predicate":"or",type: "date","matchcase":true},  

              {"value":new Date("07/12/1996"),"operator":"lessthan","field":"OrderDate","predicate":"and",type: "date", "matchcase":true}  

            ]; 

            obj.refreshContent(); 

             

        } 

    }) 

</script> 

 

https://help.syncfusion.com/api/js/ejgrid#methods:refreshcontent 

 

Sample demo: http://jsplayground.syncfusion.com/qghhmmmv 

 

Regards, 

Seeni Sakthi Kumar S.