Defaulting dates in the grid filter menu

4 posts, 0 answers
  1. Serdar Kilic
    Serdar Kilic avatar
    4 posts
    Member since:
    Nov 2004

    Posted 01 May 2017 Link to this post

    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.

     

     

  2.
  3. Preslav
    Admin
    Preslav avatar
    590 posts

    Posted 03 May 2017 Link to this post

    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.
  5. Serdar Kilic
    Serdar Kilic avatar
    4 posts
    Member since:
    Nov 2004

    Posted 03 May 2017 in reply to Preslav Link to this post

    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
    });
  7. Preslav
    Admin
    Preslav avatar
    590 posts

    Posted 05 May 2017 Link to this post

    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.
  8.
Back to Top