javascript > Kendo grid > Dynamic column filtering not working

Question

I am using a kendo grid to display information from a viewModel. The view model contains:

[DisplayName("Received Date")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime? ReceivedDate { get; set; }

[DisplayName("Received Month")]
public string ReceivedMonth { get { return (this.ReceivedDate == null ? "" : this.ReceivedDate.Value.ToString("MMMM")); } }

I have set the Kendo grid as follows:

@(Html.Kendo().Grid<ViewModel>()
      .Name("Grid")
      .HtmlAttributes(new { style = "height:100%; width:100%;" })
      .Events(events => events.DataBound("onGridDataBound").Change("onSelectionChange").Save("onGridSave"))
      .Scrollable()
      .Columns(columns =>
      {                                                               
          columns.Bound(u => u.ReceivedDate).Format("{0:dd/MM/yyyy}").Filterable(c => c.Cell(y => y.Template("datePicker"))).Width("200px");
          columns.Bound(u => u.ReceivedMonth)
           .Title("Received Date<br/>Month")

      })
      .NoRecords("No Records to Display")
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .AutoBind(true)
      .Pageable(pageable => pageable.Refresh(true).PageSizes(new[] { 10, 20, 50, 100, 200 }).ButtonCount(5))
      .Sortable()
      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
      .Reorderable(r => r.Columns(true))
      .Navigatable()
      .ColumnMenu()
      .EnableCustomBinding(true)
      .DataSource(dataSource => dataSource
          .Ajax()
          .ServerOperation(true)
          .PageSize(10)
          .Model(m =>
          {
              m.Id(i => i.Id);
          })
          .Read(read => read
              .Action("getData", "Data"))
          .Update(update => update
              .Action("updateViaGrid", "Data"))       
          )
      )
)

But I can not get the filtering to work on ReceivedMonth, because the column does not exist in the underlining datasource.

I am approaching this correctly? I have a date column and I want a column next to it with just the month, where I can select a month and it will return any data for that month.

Many thanks

Answer 1

For a quick win, try .ServerOperation(false) . Currently you're implicitly passing a filter expression to the Kendo binder for a property that doesn't exist.

This will perform all paging, sorting, filtering and grouping operations on the client instead of on the server.

If this isn't suitable for your use case then you'll need to realise your ReceivedMonth property in your Model class then you can filter server side.