Grid filtermode row with a monthpicker

[Bjorn Otto]

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() ?

[Petur Subev]

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

 

 

[Bjorn Otto]

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?

[Petur Subev]

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