We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Grid Search By Range

Thread ID:

Created:

Updated:

Platform:

Replies:

128158 Jan 5,2017 10:25 AM Jan 12,2017 07:44 AM ASP.NET MVC 8
loading
Tags: Grid
Richard Dublon
Asked On January 5, 2017 10:25 AM

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 [Syncfusion]
Replied On January 6, 2017 07:07 AM

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> 
 
 
Regards, 
Seeni Sakthi Kumar S. 


Richard Dublon
Replied On January 6, 2017 10:29 AM

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 [Syncfusion]
Replied On January 9, 2017 06:27 AM

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. 
 
 
 
Regards, 
Seeni Sakthi Kumar S. 


Richard Dublon
Replied On January 9, 2017 08:15 PM

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 [Syncfusion]
Replied On January 10, 2017 01:44 AM

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> 
 
 
 
Regards, 
Seeni Sakthi Kumar S. 


Richard Dublon
Replied On January 11, 2017 08:14 PM

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
Replied On January 11, 2017 08:33 PM

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 [Syncfusion]
Replied On January 12, 2017 07:44 AM

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> 
 
 
 
Regards, 
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;