How to add "between" filter option in Kendo grid dates columns

[karthik]

we implemented one global filter for other columns (i removed the columns in below code) but we need to do add the filter to the particular column (date)

@(Html.Kendo().Grid<Model>
            ()
            .Name("Activitiesgrid")
            .Columns(columns =>
            {               

                columns.Bound(c => c.ActivityRecordCreateDate).HeaderHtmlAttributes(new { style = "font-weight: bold;font-size: 13px;" }).HtmlAttributes(new { style = "font-size: 12px" }).Width(50);
                
                columns.Bound(c => c.ActivityDate).HeaderHtmlAttributes(new { style = "font-weight: bold;font-size: 13px;" }).HtmlAttributes(new { style = "font-size: 12px" }).Width(100).Format("{0:M/d/yyyy}");
                

            })
            .ToolBar(tools => tools.Excel().Text("Export"))
            .Excel(excel => excel.AllPages(true)
        .Filterable(true)
            
            )
              .Events(events => events.ExcelExport("incompleteCOATestsGridOnExcelExportActivities"))
            .DataSource(dataSource => dataSource
            .Ajax().Model(m =>
            {
                m.Id(p => p.rowIndex);

            })
            .PageSize(0)
            .Read(read => read.Action("GetKendoActivities", "EventsActivities", new { invokedFromMainMenu = true }))
            .ServerOperation(false)            
            .Events(events=>
            {
                events.RequestStart("request_start");
                events.RequestEnd("request_end");

            })
            )
            .NoRecords()
            .Filterable(filterable => filterable
                .Extra(false)
                .Operators(operators => operators
                        .ForDate(date => date.Clear()
                        .IsEqualTo("Is equal to")
                        .IsGreaterThan("Is After")
                        .IsLessThan("Is Before")
                        .IsNull("Is empty")
                        .IsNotNull("Is not empty"))
                        )
                )
            .Sortable()
            .Pageable()
            .Selectable()
            .NoRecords(x => x.Template("<div class='empty-grid' style ='float: top'></div>"))
            .Events(events =>
            {
                //events.FilterMenuInit("CustomFilter");
                events.FilterMenuOpen("CustomFilterOpen");
            })
// .ClientTemplate("#=AssignedDateFormat(data)#")
)

[karthik]

.Filterable(x => x.UI("datePicker").Extra(true).Operators(operators => operators                                        .ForDate(str => str.Clear()                                        .IsEqualTo("Is equal to")                                        .IsGreaterThanOrEqualTo("Is after or Equal To")                                        .IsLessThanOrEqualTo("Is before or equal To")                                        )                                     ));
Add filterable to the corresponding date column(date must be a datetime datatype if we using as string datatype its not working) and add the below function in js
function datePicker(element) {        element.kendoDatePicker({
            format: "MM/dd/yyyy"
        });    }

[Eyup]

Hi Кarthik,

 

Thank you for writing to us.

You can achieve this requirement using the following solution:
https://docs.telerik.com/kendo-ui/knowledge-base/use-two-inputs-range-date-filtering

It uses the Kendo UI Grid but for the MVC Grid it would be analogous, too.

Feel free to try this solution and let me know about the result.

 

Regards,
Eyup
Progress Telerik

[Eyup]

Hi Karthik,

 

Thank you for contacting us.

You can achieve this requirement using a betweenFilter as demonstrated here:
https://docs.telerik.com/kendo-ui/knowledge-base/use-two-inputs-range-date-filtering

Feel free to give it a try and let me know about the result.

 

Regards,
Eyup
Progress Telerik