This is a migrated thread and some comments may be shown as answers.

Filter Time Column

1 Answer 16 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 21 Feb 2020, 04:43 PM

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>

1 Answer, 1 is accepted

Sort by
1
Georgi
Telerik team
answered on 26 Feb 2020, 03:22 PM

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.
Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Georgi
Telerik team
Share this question
or