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

3 Answers 152 Views
DateRangePicker Grid
karthik
Top achievements
Rank 1
Iron
karthik asked on 09 Dec 2022, 02:18 PM
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)#")
)

3 Answers, 1 is accepted

Sort by
0
karthik
Top achievements
Rank 1
Iron
answered on 14 Dec 2022, 10:13 AM

.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"
        });    }

0
Eyup
Telerik team
answered on 14 Dec 2022, 01:47 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Eyup
Telerik team
answered on 19 Dec 2022, 09:33 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
DateRangePicker Grid
Asked by
karthik
Top achievements
Rank 1
Iron
Answers by
karthik
Top achievements
Rank 1
Iron
Eyup
Telerik team
Share this question
or