Filter Time Column

[Joel]

I have separated a timestamp in my model so that I can get a good filtering experience in the grid. However, the filtering mechanism for the Time column remains the calendar.  How do I set this to filter using a time picker?  Also, as defined I expected there to be no filter for the Time column.  But, there is one.  How do I turn off the filter of this column if it shows even with no definition?

 

@(Html.Kendo().Grid<Session>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Command(command => command
            .Custom("Detail")
            .Click("goDetail"))
            .Width(Glossary.Portal.ButtonWidth);
        columns.Bound(p => p.Device.Name).Title("Device")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                .ShowOperators(false)
                .SuggestionOperator(FilterType.Contains)));
        columns.Bound(p => p.Date).Title("Date").Format("{0:MM/dd/yyyy}")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")
                .ShowOperators(false)));
        columns.Bound(p => p.Time).Title("Time").Format("{0:hh:dd:mm tt}");

    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .HtmlAttributes(new { style = "height:596px;" })
    .Selectable()
    .Navigatable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("IndexJson", "Sessions")
    .Data("getData"))))

<script>

function getData() {
    return @Html.Raw(Model.GetIndexData());
}

function goDetail(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var url = '@Url.Action("Details", "Sessions")?id=' + dataItem.Id + '@Model.GetUrlParameters()';
    // Replace & with & as the above encoding step changes & to &.
    window.location.href = url.replace(/&/g, "&");
}

function error_handler(e) {
    if (e.errors) {
        var message = "Errors:\n";
        $.each(e.errors,
            function(key, value) {
                if ('errors' in value) {
                    $.each(value.errors,
                        function() {
                            message += this + "\n";
                        });
                }
            });
        alert(message);
    }
}
</script>

[Georgi]

Hello Joel,

You could create a custom filter widget via the column.Filterable.Cell.Template handler.

e.g.

// column
        columns.Bound(p => p.Device.Name).Title("Device")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                .Template("timeFilter")
                .ShowOperators(false)
                .SuggestionOperator(FilterType.Contains)));

// timeFilter handler

function  timeFilter (args) {
     args.element.kendoTimePicker();
}

Furthermore, currently filtering is visible for the Time column as the global Filterable setting is enabled. Nevertheless, you could disable filtering for certain column as follows:

columns.Bound(p => p.Time).Title("Time").Format("{0:hh:dd:mm tt}").Filterable(false);

I hope this helps.

Regards,
Georgi
Progress Telerik