1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to use DateRangePicker for column when using FilterType.Menu

How to use DateRangePicker for column when using FilterType.Menu

I have the following code and some Javascript to set the filter for SystemDateTime.

What I would like to do is to remove the DateRangePicker from my form, and have it as the control that displays when I select the filter for the SystemDateTime. I've seen examples of how to do this, but none of them use Syncfusion.EJ2.Grids.FilterType.Menu, which we are currently using.

Any assistance would be greatly appreciated.


@(Html.EJS().DateRangePicker("DateTimeRangePicker").Change("DatePickerChange").Render())
@(Html.EJS().Grid("ReportGrid").AllowSorting().Columns(

    Sub(col)
        col.Field("AccountName").HeaderText("Accoun tName").Width("150").Add()
        col.Field("AccountId").HeaderText("Account Id").Width("50").Add()
        col.Field("TransactionId").HeaderText("Trx ID").Width("50").Add()
        col.Field("Currency").HeaderText("Currency").Width("50").Add()
        col.Field("SystemDateTime").HeaderText("Date/Time").AllowFiltering(False).Width("70").Format("MM/dd/yy HH:mm:ss").Add()
        col.Field("TransactionDescription").HeaderText("Description").Width("150").Add()
        col.Field("Amount").HeaderText("Amount").Width("50").Format("N6").Add()
    End Sub) _
                    
    .AllowPaging(True).PageSettings(Function(s) s.PageSize(100).PageSizes(True)) _
    .AllowFiltering() _
    .FilterSettings(Sub(filter)
                        filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu).Columns(filterColumns)
                    End Sub) _
    .SortSettings(Function(sort) sort.Columns(sortedColumns)) _
    .Aggregates(Sub(agg)
                    agg.Columns(aggregateColumns).Add()
                End Sub
    ) _
    .Toolbar(New List(Of String)({"Search", "ExcelExport"})).ToolbarClick("toolbarClick") _
    .AllowExcelExport().Load("ReportGridLoad").Created("created").DataBound("databound").Render()
)


9 Replies 1 reply marked as answer
SM Shalini Maragathavel Syncfusion Team April 5, 2021 12:11 PM UTC

Hi Wayne, 

Thanks for contacting Syncfusion support. 

Based on your requirement we suspect that you need to render the Syncfusion Date Range picker for the date column filter using Menu Filter.  

You can achieve your requirement by rendering the EJ2 date range picker as a custom component in the filter menu. Initially define create and write methods for the column filters “ui” property. In the create method, create an input element and append it to the target element(returned in event arguments) then render the EJ2 JS date range picker control and append it to the input element. 

@{ 
    var filteruiTemplate = new 
    { 
        ui = new 
        { 
           create = "create", 
            write = "write", 
            read = "read" 
 
        } 
    }; 
} 
@Html.EJS().Grid("ReportSubscriptions").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionBegin("onActionBegin") AllowFiltering(true).Columns(col => 
{ 
    col.Field("OrderID").Width("120").IsPrimaryKey(true).Add(); 
    col.Field("OrderDate").HeaderText("OrderDate").Format("yMd").Filter(filteruiTemplate).Width("120").Add(); 
}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).  
Render() 

<script> 
    var startDate; 
    var endDate; 
    var customFilter; 

    function create(args) { 
        elem = document.createElement('input'); 
        args.target.appendChild(elem); 
        var isFiltered = args.target.classList.contains("e-filtered"); 
      dateTimePickerObj = new ej.calendars.DateRangePicker({ 
            floatLabelType: 'Never', 
            change: function (args) { 
                if (args.value) { 
                    var datevalue = args.value; 
                    var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
                    grid.filterByColumn("OrderDate", "greaterthanorequal", datevalue[0]); 
 
                } 
            } 
        }); 
        dateTimePickerObj.appendTo(elem); 
    } 

    function write(args) { 
    } 
    function read() { 

    } 
</script> 

We performed the filtering with the start date using Grid’s filterByColumn method and in the Grid’s actionBegin event pushed the additional filter operator for the same column with end date. This is demonstrated in the below code snippet, 

    function onActionBegin(args) { 
        if (args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate") { 
            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
            var daterange = document.getElementsByClassName('e-daterangepicker')[0].ej2_instances[0]; 
            // End date value is added as additional filter value with ‘lessthan’ filter operator 
            args.columns.push({ 
                actualFilterValue: {}, 
                actualOperator: {}, 
                field: "OrderDate", 
                ignoreAccent: false, 
                isForeignKey: false, 
                matchCase: false, 
                operator: "lessthan", 
                predicate: "and", 
                uid: grid.getColumnByField(args.currentFilteringColumn).uid, 
                value: daterange.value[1] 
            }); 
        } 
    } 


We have prepared a sample based on this for your reference. You can download it from the below link, 


                  

Please get back to us if you require any further assistance. 

Regards, 
Shalini M 


Marked as answer
WS WAYNE SEPEGA April 6, 2021 02:36 AM UTC

Thanks, so far so good. Making progress, next questions:

1) Seems like the DateRangePicker loses its value, where the rest of the filters retain theirs, what am I missing? Meaning it's always blank when I click the filter drop down, even if there was a filter previously.

2) clicking Apply on the DRP causes the filter to be applied, is there a way I can stop it from applying and make it so I must hit filter making it work like the other Menu filters?

3) We have the following code, but the DateRangePicker doesn't play well with it, it only shows the first part of the filter, how do I get it to display both parts? this worked when I was using the filterSettings.columns and added a GT and LT for System DateTime

        var filters = "";
        if (filterSettings.columns) {
            for (var i = 0; i < filterSettings.columns.length; i++) {
                var column = filterSettings.columns[i];
                filters += column.field + " " + column.operator + " " + column.value + ", ";
            }
        }
        $("#filterSummary").remove();
        $(".e-toolbar-left").append("<span id='filterSummary'>Filters: " + filters + "</span>");


Doing this allowed the filter summary to show both the Greater than and Less then values, unlike the code you gave in your reply.
gridObj.filterSettings.columns = [
                            { "value": datevalue[0], "operator": "greaterthanorequal", "field": 'SystemDateTime', predicate: 'and' },
                            { "value": datevalue[1], "operator": "lessthanorequal", "field": 'SystemDateTime', predicate: 'and' }]

RS Rajapandiyan Settu Syncfusion Team April 8, 2021 02:16 PM UTC

Hi WAYNE, 

Thanks for your update. 

Query #1: Seems like the DateRangePicker loses its value, where the rest of the filters retain theirs, what am I missing? Meaning it's always blank when I click the filter drop down, even if there was a filter previously. 

By using startDate and endDate of dateRangePicker control, you can bind filtered date value. Please find the below code example for more information. 


 
    function create(args) { 
        args.getOptrInstance.dropOptr.element.parentElement.parentElement.style.display = "none"; // hide the filter operators element 
 
        elem = document.createElement('input'); 
        args.target.appendChild(elem); 
// check whether the column is filtered or not 
        var isFiltered = event.target.classList.contains("e-filtered"); 
        dateTimePickerObj = new ej.calendars.DateRangePicker({ 
            floatLabelType: 'Never', 
// bind the filtered date value 
            startDate: isFiltered ? datevalue[0] : null, 
            endDate: isFiltered ? datevalue[1] : null, 
        }); 
        dateTimePickerObj.appendTo(elem); 
    } 


Query #2: clicking Apply on the DRP causes the filter to be applied, is there a way I can stop it from applying and make it so I must hit filter making it work like the other Menu filters? 

You can achieve this by preventing the close action of filter-menu dialog using the internal event of "filter-menu-close". You can ON this event in the dataBound event of Grid. 


 
    function dataBound(args) { 
        this.on("filter-menu-close", function (args) { 
            if (args.target && args.target.parentElement.classList.contains('e-footer')) { 
// prevent the filter menu close action when click the footer buttons in dateRangePicker 
                args.cancel = true 
            } 
        }) 
    } 


When you click the filter button, the read method will be triggered. Here, you can perform your filtering action. 

 
    function read(args) { 
        if (args.element.ej2_instances[0].value != null) { 
            datevalue = args.element.ej2_instances[0].value; 
            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
// clear the previous filtered value on orderDate column 
            grid.removeFilteredColsByField("OrderDate"); 
            setTimeout(() => { 
// filter the column 
                grid.filterByColumn("OrderDate", "greaterthanorequal", datevalue[0]); 
            }) 
        } 
    } 


Query #3: We have the following code, but the DateRangePicker doesn't play well with it, it only shows the first part of the filter, how do I get it to display both parts? this worked when I was using the filterSettings.columns and added a GT and LT for System DateTime 

We suggest you to use your code in the actionComplete event to get all the filtered columns details. Refer to the below code example for more information. 



    function actionComplete(args) { 
        if (args.requestType === 'filtering') { 
            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
            var filters = ""; 
            if (grid.filterSettings.columns) { 
                for (var i = 0; i < grid.filterSettings.columns.length; i++) { 
                    var column = grid.filterSettings.columns[i]; 
                    filters += column.field + " " + column.operator + " " + column.value + ", "; 
                } 
            } 
            console.log(filters); 
            // here you can append the filters detail in the DOM where you need 
        } 
    } 


We have prepared a sample for reference. You can get it from the below link. 


Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


WS WAYNE SEPEGA April 12, 2021 02:01 AM UTC

Finally got everything working, but have two more questions:
1) How do I hide the drop down? Given I won't use it, it shouldn't show

2) How do I hide the clear button? Again since the DateRangePicker has it's own clear I don't need this either

Still googling, so if I find something tonight I'll reply.

SM Shalini Maragathavel Syncfusion Team April 12, 2021 12:13 PM UTC

Hi Wayne, 

Thanks for the update.

Query#1:  How do I hide the drop down? Given I won't use it, it shouldn't show

Based on your query we suspect that you want to hide the operator dropdown of the Menu filter. We have already hided the filter operator dropdown for the date column in our previous update. Please find the below code example for more information.  

  
    function create(args) {  
        args.getOptrInstance.dropOptr.element.parentElement.parentElement.style.display = "none"; // hide the filter operators element  
  
        elem = document.createElement('input');  
        args.target.appendChild(elem);  
// check whether the column is filtered or not  
        var isFiltered = event.target.classList.contains("e-filtered");  
        dateTimePickerObj = new ej.calendars.DateRangePicker({  
            floatLabelType: 'Never',  
// bind the filtered date value  
            startDate: isFiltered ? datevalue[0] : null,  
            endDate: isFiltered ? datevalue[1] : null,  
        });  
        dateTimePickerObj.appendTo(elem);  
    }  

If we misunderstood your query, then please share us the following information to validate further on this, 

1. Do you want to hide the Menu filter’s operator dropdown for all the columns. 

2. Please elaborate on your requirement in detail with a pictorial representation or video demonstration(If possible). 

Query#2: How do I hide the clear button? Again since the DateRangePicker has it's own clear I don't need this either

From the above query we are not able to clearly understand your requirement from the provided information. Do you wish to hide the datetrangepicker’s cancel button in your application? If not Please elaborate on your requirement in detail with a pictorial representation or video demonstration(If possible) in order to better understand it so that we can check and provide the solution based on that. 

Let us know, If you have any concerns.

Regards, 
Shalini M. 


WS WAYNE SEPEGA April 13, 2021 12:38 AM UTC

I must have missed the line of code for hiding the drop down, thanks that resolved the drop down. As for query 2:

I need to remove the word clear, given that the DateRangePicker has it's own clear.

Hope the image helps clarify the miscomunication.

BS Balaji Sekar Syncfusion Team April 13, 2021 12:29 PM UTC

  
Hi Wayne, 
 
Thanks for the update.

Query: “I need to remove the word clear, given that the DateRangePicker has it's own clear.”

Based on your query you need to hide the clear button of Menu filter. To achieve your requirement we suggest you to set the display property of the element as none as demonstrated in the below code snippet,  
 
  
    function create(args) {  
        args.getOptrInstance.dropOptr.element.parentElement.parentElement.style.display = "none"; // hide the filter operators element  
 args.dialogObj.ftrTemplateContent.children[1].style.display = "none" //to hide the clear button 
. . .

        });  
        dateTimePickerObj.appendTo(elem);  
    }  

We have prepared a sample based on this for your reference. You can find it below,

Sample: https://www.syncfusion.com/downloads/support/forum/164204/ze/MVC_SA~11342627224.zip 
 
Note: If we hide the clear button we cannot able to clear the filtering for that column.  
 
Let us know, If you have any concerns.

Regards, 
Shalini M. 


WS WAYNE SEPEGA April 14, 2021 12:37 AM UTC

 args.dialogObj.ftrTemplateContent.children[1].style.display = "none" //to hide the clear button Thank you for all the responses everything has worked perfectly. 
As for clearing the filter, I'm doing so when the user clears the date range picker.

Where can I find the documentation that would have told me how to hide the drop down and the clear button? I've searched quite a bit but wasn't able to find anything would have told me how to do so.

MS Manivel Sellamuthu Syncfusion Team April 14, 2021 12:10 PM UTC

Hi Wayne,

Thanks for the update.

We are glad to hear that the provided solution resolved your query. As for the query “Where can I find the documentation that would have told me how to hide the drop down and the clear button?”- We have logged an internal documentation task for this requirement. It will be refreshed in online in any of our upcoming release. 

Let us know if you have any concerns.

Regards,
Manivel. 


Loader.
Up arrow icon