CODEWITHSUNDEEP
javascriptjquerykendo-gridkendo-asp.net-mvc
kuka muk
kuka muk

Reputation: 349

How can filter Kendo grid Programmatically using Jquery?

I have the following Kendo grid, I have order date as MM/yyyy. In the data source the orderdate is stored as MM/dd/yyyy.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false).Width(100);
        columns.Bound(p => p.Freight).Width(100);
        columns.Bound(p => p.OrderDate).Format("{0:MM/yyyy}").Width(140);
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).Width(150);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

Is there anyways on calendar display Month and Year and filter the grid based the month and year selected, ignoring the date as shown in the screenshot below?

enter image description here

Currently it's displaying the date to select enter image description here

Upvotes: 0

Views: 947

Answers (1)

Ross Bush
Ross Bush

Reputation: 15185

You could use a custom filter template on that column. Below is the jquery code on how to configure a DateTimePicker to limit the selection to a year and month (This was taken from the KendoUI for JQuery demos).

<input id="datepicker"/>
<script>
$("#datepicker").kendoDatePicker({
    depth: "year",
    start: "year"
});
</script>

Another way via config would be to use a custom template for filters.

columns.Bound(p => p.OrderDate).Format("{0:MM/yyyy}").Width(140)
                .Filterable(filterable => filterable.UI("customDateTimeFilter"));

<script type="text/javascript">
     function customDateTimeFilter(element) {
         if (element == null) return;
            element.kendoDatePicker({
               depth: "year",
               start: "year"
          });
        }
</script>

Upvotes: 1

Related Questions