Kendo Grid MVC Column Filter DateTimePicker not working

[kw]

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

 

[Georgi]

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

[kw]

Thanks for the solution, it works perfectly!