Defaulting dates in the grid filter menu

[Serdar Kilic]

I have the Kendo UI grid setup with one column that has a Date datatype. The filter menu comes up correctly (extras: true) with two Date Picker widgets, what I'm trying to do is default the value in the textbox in the first widget to the first of the month and the second textbox to be set to the last day of the month as soon as the filter menu is opened.

I haven't been able to find any examples on how to set this, any info would be much appreciated.

Thanks.

 

 

[Preslav]

Hello Serdar,

A possible solution is handling the filterMenuInit event and selecting the DatePickers. Once selected, you could set the values using the relevant method.

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filterMenuInit
• http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker#methods-value
  

For example, the filterMenuInit function might look like:

function filterMenuInitFunction(e) {
    if (e.field == "RetailDate") {
        var dpOne = e.container.find("[data-role=datepicker]:eq(0)").data("kendoDatePicker");
        var dpTwo = e.container.find("[data-role=datepicker]:eq(1)").data("kendoDatePicker");
        var date = new Date(),
            y = date.getFullYear(),
            m = date.getMonth();
        var firstDay = new Date(y, m, 1);
        var lastDay = new Date(y, m + 1, 0);

        dpOne.value(firstDay);
        dpOne.trigger("change");
        dpTwo.value(lastDay);
        dpTwo.trigger("change");
    };
};

Additionally, a runnable Dojo demonstrating the above is available here: http://dojo.telerik.com/OKUci


Regards,
Preslav
Telerik by Progress

[Serdar Kilic]

Thank you very much Preslav,

I've implemented this and it works fine for the most part (I've seen some oddness where upon clicking the filter button the open animation happens and then the popup closes).

Also, if you filter on another column (e.g. set Ship City to filter on "reims") and if you go back to the Shipped Date field the customisation has been lost, I found another post where if you wrap the function body (as below) it works fine:

e.container.data("kendoPopup").bind("open", function () {
 //code block for menu customisation
});

[Preslav]

Hello Serdar,

Thank you for sharing the updated solution with the community.

About the issue, I was not able to reproduce it. That said, could you please open a support ticket and share a sample project there that clearly isolates and replicates the problem.

Regards,
Preslav
Telerik by Progress