Kendo Grid MVC Column Filter DateTimePicker not working

3 posts, 0 answers
  1. kw
    kw avatar
    2 posts
    Member since:
    Jun 2016

    Posted 26 Jun Link to this post


    I am using the kendo grid control and I'm not able to get a DateTime Picker to appear on the filter for the column that contain DateTime values. The grid filter with datetimepicker demos that I have come across have only been implemented with javascript examples. I am assuming some javascript may be requiried. What I was hoping was, help with the grid filter datetimepicker demo/example via ASP.Net MVC implementation. Below is my unsuccessful implementation. Hope I am clear with my desires and thanks in advance for any assistance.


                                  .Columns(columns =>
                                      columns.Bound(c => c.ATSAnnouncementID).Title("Announcement ID").Hidden(true);
                                      columns.Bound(c => c.TargetDepartment).Title("Target").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                                     columns.Bound(c => c.StartDateTime).Format("{0:MM/dd/yyyy HH:mm tt}").Title("Start Date Time").Filterable(ftb => ftb.UI("DateTimeFilter"));

    columns.Bound(c => c.Message).Title("Description").Filterable(false).Sortable(false).ClientTemplate(@Html.ActionLink("#=Message#", "Edit", "Announcement",                               })
                                  .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                                  .Pageable(pageable => pageable
                                  .DataSource(dataSource => dataSource
                                      .Model(model => model.Id(x => x.ATSAnnouncementID))
                                      .Read(read => read.Action("GetActiveATSAnnouncements", "DataSource"))
                                  ).Events(e => e.DataBound("onAnnouncementDataBound")))

     <script type="text/javascript">

    function DateTimeFilter(e) {
                    value: new Date(),
                    dateInput: true


  2. Georgi
    Georgi avatar
    172 posts

    Posted 28 Jun Link to this post

    Hi Konneth,

    When you are using row filtering mode you should use columns.filterable.cell.template to customize the input.

    I have assembled a sample ( which illustrates how to use DateTimePicker widget in the filter menu, when using row filtering mode.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. kw
    kw avatar
    2 posts
    Member since:
    Jun 2016

    Posted 05 Jul Link to this post

    Thanks for the solution, it works perfectly!
Back to Top