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

    Hello

    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.

     

    @(Html.Kendo().Grid<ATSAnnouncementViewModel>()
                                  .Name("AnnouncementGrid")
                                  .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",                               })
                                  .Sortable()
                                  .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                                  .Pageable(pageable => pageable
                                      .Refresh(true)
                                      .PageSizes(true)
                                      .ButtonCount(5))
                                  .DataSource(dataSource => dataSource
                                      .Ajax()
                                      .PageSize(20)
                                      .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) {
                //$(control).kendoDateTimePicker();
                $("#datetimepicker").kendoDateTimePicker({
                    value: new Date(),
                    dateInput: true
                });
               
            }
        </script>

    kw

     
  2. Georgi
    Admin
    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 (datetimepicker-filter.zip) which illustrates how to use DateTimePicker widget in the filter menu, when using row filtering mode.

    Regards,
    Georgi
    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