This is a migrated thread and some comments may be shown as answers.

Defaulting dates in the grid filter menu

3 Answers 65 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Serdar Kilic
Top achievements
Rank 1
Serdar Kilic asked on 02 May 2017, 01:09 AM

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.

 

 

3 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 03 May 2017, 01:42 PM
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.
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Serdar Kilic
Top achievements
Rank 1
answered on 04 May 2017, 04:19 AM

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
});
0
Preslav
Telerik team
answered on 05 May 2017, 09:50 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Serdar Kilic
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Serdar Kilic
Top achievements
Rank 1
Share this question
or