CODEWITHSUNDEEP
kendo-gridkendo-asp.net-mvc
Frecklefoot
Frecklefoot

Reputation: 1692

Kendo suppress DatePicker

We're using Kendo with ASP.NET MVC. I have a Kendo grid with several different columns. Two columns contain times. Though they are DateTime objects, we only display their time components. When users select to filter one of these columns, along with the blank text entry box, they have the DatePicker, which lets them choose a date by month/day. Clearly this makes no sense for a Time of day.

Is there a way to suppress the DatePicker? Ideally they'd have the TimePicker to use, but we could live without it. I've seen several examples that show how to do this with JavaScript, but nothing for MVC. Is it even possible with MVC?

We're doing all the sorting and filtering on the server (SQL server) because we do server-side paging (we dont' want to load 1,000,000 rows, just to display a few). So we're not relying on Kendo for the sorting and filtering, just the UI.

Other things we've tried:

Changing the times to strings. This gets rid of the DatePicker, but then the filter options include operators that make sense for strings, but not necessarily times. And the time operators are missing ("Is before", "Is after", etc.).

Building the filter options ourselves: This was an attept after we changed the DateTimes to strings. This only allows us to add filters that make sense for strings, not DateTimes.

Here's an example of our Razor markup. Pretty standard stuff:

@(Html.Kendo().Grid<FModel>()
    .Name("FStuff")
    .Columns(c =>
    {
        c.Bound(m => m.Date);
        c.Bound(m => m.Location);
        c.Bound(m => m.Name);
        c.Bound(m => m.PurchaseOrderID);
        c.Bound(m => m.Start);      // time column
        c.Bound(m => m.End);        // time column
    })
    .Pageable(p => p
    .Enabled(true)
    .PageSizes(new List<int> { 10, 25, 999 })
    .Refresh(true))
    ... other options ...

Does anyone have an idea of the approach we should take? Is what we want to do possible with Kendo?

Upvotes: 0

Views: 200

Answers (1)

Matt Millican
Matt Millican

Reputation: 4054

On your time columns, configure the .Filter() options like this:

c.Bound(x => x.Start).Filterable(f => f.UI(GridFilterUIRole.TimePicker))

You may also want to consider setting the format with .Format("{0:t}") (or whatever format you prefer)

Upvotes: 1

Related Questions