title: Kendo MVC Grid Filter Customization not working
body: <p>I have tried to follow the Kendo example (<a href="http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization" rel="nofollow">http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization</a>) but I am clearly missing something...</p>
  
  <p>The grid loads data just fine. The JavaScript function <code>costCenterNumberFilter(element);</code> is executed as I have placed an <code>alert("WTF!?!?");</code> and that is displayed in the browser...</p>
  
  <p>It will not render the AutoComplete for cost center number filter. Any help will be greatly appreciated.</p>
  
  <p>I have checked several other SO questions and very few have been answered.</p>
  
  <p>Index.cshtml:</p>
  
  <pre><code>@model IEnumerable&lt;LoanFee&gt;
  
  @{
      ViewBag.Title = "Fees";
  }
  
  @(Html.Kendo().Grid&lt;LoanFee&gt;(Model)
      .Name("Grid")
      .Columns(columns =&gt;
      {
          columns.Command(cmd =&gt; cmd.Select())
              .HtmlAttributes(new { style = "text-align: center;" })
              .Width(100);
          columns.Bound(p =&gt; p.AccountNumber)
              .Width(170);
          columns.Bound(p =&gt; p.CustomerName);
          columns.Bound(p =&gt; p.StatusId)
              .Template(@&lt;text&gt;&lt;/text&gt;)
              .HtmlAttributes(new { @class = "status-dropdown" })
              .ClientTemplate(Html.Kendo().DropDownList()
                  .Name("ddlStatus_#=LoanFeeId#")
                  .DataTextField("Name")
                  .DataValueField("Value")
                  .BindTo(Status.Items())
                  .Value("#=StatusId#")
                  .ToClientTemplate()
                  .ToHtmlString())
              .Title("Status")
              .Width(100);
          columns.Bound(p =&gt; p.Approvals)
              .HtmlAttributes(new { style = "text-align: center;" })
              .Width(100);
          columns.Bound(p =&gt; p.Amount)
              .Format(Formats.CURRENCY)
              .HtmlAttributes(new { style = "text-align: right;" })
              .Width(120);
          columns.Bound(p =&gt; p.Allocation.PrimaryOfficerName)
              .Template(@&lt;text&gt;&lt;/text&gt;)
                  .ClientTemplate("#=Allocation.PrimaryOfficerNumberDashName#")
              .Width(220);
          columns.Bound(p =&gt; p.CostCenterNumber)
              .Title("Cost Center")
              .HtmlAttributes(new { style = "text-align: center;" })
              .Filterable(filterable =&gt;
              {
                  filterable.Extra(false);
                  filterable.Operators(o =&gt; o.ForString(fs =&gt;
                  {
                      fs.Clear();
                      fs.Equals("Equals");
                  }));
                  filterable.UI("costCenterNumberFilter");
              })
              .Width(100);
          columns.Bound(p =&gt; p.DateEntered)
              .Format(Formats.DATE)
              .HtmlAttributes(new { style = "text-align: center;" })
              .Width(100);
  
      })
      .Events(e =&gt; e.DataBound("initStatusDropdown"))
      .Pageable()
      .Filterable()
      .DataSource(ds =&gt; ds
          .Ajax()
          .PageSize(15)
          .Sort(sort =&gt; sort.Add(p =&gt; p.AccountNumber))
          .Model(m =&gt;
          {
              m.Id(p =&gt; p.LoanFeeId);
          })
          .Read(read =&gt; read.Action("Index_Read", "WorkQueue"))
      )
  )
  
  &lt;script type="text/javascript"&gt;
  
      function initStatusDropdown(e) {
  
          $(".status-dropdown").each(function () {
  
              eval($(this).children("script")
                  .last()
                  .html());
          })
      }
  
      function costCenterNumberFilter(element) {
  
          element.kendoAutoComplete({
              datasource: ["3200", "4200", "1000"]
          });
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>WorkQueueController.cs:</p>
  
  <pre><code>using Kendo.Mvc.UI;
  using Kendo.Mvc.Extensions;
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  
  namespace CommercialIncentive.Web.Areas.Fees.Controllers
  {
      public class WorkQueueController : BaseController
      {
          public ActionResult Index()
          {
              return View();
          }
  
          public ActionResult Index_Read([DataSourceRequest] DataSourceRequest request)
          {
              var data = IocContainer.Get&lt;ILoanFeeService&gt;()
                      .ListAsQuery()    // Returns IQuerable&lt;LoanFee&gt;
                      .ToDataSourceResult(request);
  
              return Json(data);
          }
      }
  }
  </code></pre>