Filter Time Column

2 posts, 0 answers
  1. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 21 Feb 2020 Link to this post

    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>
  2. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 26 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top