Grid filtermode row with a monthpicker

4 posts, 0 answers
  1. Bjorn Otto
    Bjorn Otto avatar
    2 posts
    Member since:
    Jun 2013

    Posted 15 Oct 2014 Link to this post

    I just upgraded my kendo grid with filterable options to the new GrodFilterMode.Row. In one of the fields I had a custom monthpicker where the could select a month, and that worked fine before i upgraded to the filter row. Now it is just a normal datepicker. It is set in the colums like this

    col.Bound(x => x.WriteOffTo).Filterable(f => f.UI("dateFilter"));

    and the javascript is 

    function dateFilter(control) {
        $(control).kendoDatePicker({
            depth: "year",
            start: "year",
            format: "01.MM.yyyy",
            parseFormat : "01.MM.yyyy",
            close: function () {
                var picker = $(control).data("kendoDatePicker");
                var currentDate = picker.value();
                currentDate.setDate(1);
                picker.value(currentDate);
            }
     
        });
    }

    why does this break after i just added the line .Mode(GridFilterMode.Row) to .Filterable() ?
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Oct 2014 Link to this post

    Hello Bjom,

    As pointed in the documentation when using filtercell you should use the cell.template option which accepts only a JavaScript function.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.ui

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bjorn Otto
    Bjorn Otto avatar
    2 posts
    Member since:
    Jun 2013

    Posted 17 Oct 2014 in reply to Petur Subev Link to this post

    How does this translate to .net MVC? I have tried 

    col.Bound(x => x.WriteOffTo).Filterable(f => f.Cell(c => c.Template("dateFilter")));

    and that doesn't work, i also tried using @<text></text> and defining the datepicker, that didn't work either, does this mean that i have to change my entire grid to javascript to get the desired funcionality?
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 Oct 2014 Link to this post

    Hello Bjorn,

    No you can use the MVC wrappers. As in the example for the cell template that I linked, you should use the e.element to turn it into date picker.

    e.g.

    col.Bound(x => x.WriteOffTo).Filterable(f => f.Cell(c => c.Template("dateFilter")));
     
    <script>
    function dateFilter(e) {
               e.element.kendoDatePicker({
            depth: "year",
            start: "year",
            format: "01.MM.yyyy",
            parseFormat : "01.MM.yyyy",
            close: function () {
                var picker = $(control).data("kendoDatePicker");
                var currentDate = picker.value();
                currentDate.setDate(1);
                picker.value(currentDate);
            }
      
        })
    }
    </script>

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready