title: Sorting and Filtering breaks when using a Complex ViewModel w/ Kendo UI grid
body: <p>I am using Kendo UI for ASP.NET Core. I am using a Kendo Grid and need the following features to work:
  Sorting, Filtering, Editing (w/ Customers ComboBox in cell). It turns out that you need a Complex View model for the Editor Template to work as per <a href="https://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates#configuration-Create" rel="nofollow noreferrer">this documentation</a>, but the complex view model breaks the grid's Sorting and Filtering functionality. Since the grid tries to sort and search on an Object instead of a single field.</p>
  
  <p>I have a ViewModel that looks like the following:</p>
  
  <pre><code>public class ProjectViewModel
  {
      public int Id { get; set; }
      public string Name { get; set; }
  
      [UIHint("CustomersEditor")]
      public CustomerViewModel Customer { get; set; }
  }
  </code></pre>
  
  <p>I am using it as the model for my Kendo grid:</p>
  
  <pre><code>@(Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =&gt;
        {
            columns.Bound(c =&gt; c.Customer).Title("Customer").ClientTemplate("#= Customer.Name#");
            columns.Command(command =&gt; { command.Edit(); command.Destroy(); }).Width(300);
        })
        .Editable(editable =&gt; editable.Mode(GridEditMode.InLine))
        .Sortable()
        .Filterable(ftb =&gt; ftb.Mode(GridFilterMode.Row))
        .Pageable(pageable =&gt; pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource =&gt; dataSource
            .Ajax()
            .PageSize(20)
            .Model(model =&gt;
            {
                model.Id(item =&gt; item.Id);
            })
            .Create(update =&gt; update.Action("Projects_Create", "Projects"))
            .Read(read =&gt; read.Action("Projects_Read", "Projects"))
            .Update(update =&gt; update.Action("Projects_Update", "Projects"))
            .Destroy(update =&gt; update.Action("Projects_Destroy", "Projects"))
        )
        )
  </code></pre>
  
  <p>As you can see I am specifying the property Customer as a bound column and setting the Client Template to be Customer.Name when not in edit mode.</p>
  
  <p>The reason I am setting the column property to the Customer object is because I am using a ComboBox Editor Template inside of this column when the grid is in Edit Mode. I believe this is the only way to do it <a href="https://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates#configuration-Create" rel="nofollow noreferrer">as per this documentation</a>.</p>
  
  <pre><code>@(Html.Kendo().ComboBoxFor(x =&gt; x)
      .Placeholder("Select a customer...")
      .DataValueField("Id")
      .DataTextField("Name")
      .BindTo((List&lt;CustomerViewModel&gt;)ViewData["customers"])
  )
  </code></pre>
  
  <p>With the above setup everything works except for the fact that Sorting/Filtering are broken because of the Customer column.</p>
  
  <p>Since I believe there is no way I can tell the grid to use Customer.Name for Sorting/Filtering instead of Customer. Is there anyway I can still achieve the ComboBox Editor Template with a flat view model?</p>