Kendo MVC Grid Filter Customization not working

Question

I have tried to follow the Kendo example ( http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization ) but I am clearly missing something...

The grid loads data just fine. The JavaScript function costCenterNumberFilter(element); is executed as I have placed an alert("WTF!?!?"); and that is displayed in the browser...

It will not render the AutoComplete for cost center number filter. Any help will be greatly appreciated.

I have checked several other SO questions and very few have been answered.

Index.cshtml:

@model IEnumerable<LoanFee>

@{
    ViewBag.Title = "Fees";
}

@(Html.Kendo().Grid<LoanFee>(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Command(cmd => cmd.Select())
            .HtmlAttributes(new { style = "text-align: center;" })
            .Width(100);
        columns.Bound(p => p.AccountNumber)
            .Width(170);
        columns.Bound(p => p.CustomerName);
        columns.Bound(p => p.StatusId)
            .Template(@<text></text>)
            .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 => p.Approvals)
            .HtmlAttributes(new { style = "text-align: center;" })
            .Width(100);
        columns.Bound(p => p.Amount)
            .Format(Formats.CURRENCY)
            .HtmlAttributes(new { style = "text-align: right;" })
            .Width(120);
        columns.Bound(p => p.Allocation.PrimaryOfficerName)
            .Template(@<text></text>)
                .ClientTemplate("#=Allocation.PrimaryOfficerNumberDashName#")
            .Width(220);
        columns.Bound(p => p.CostCenterNumber)
            .Title("Cost Center")
            .HtmlAttributes(new { style = "text-align: center;" })
            .Filterable(filterable =>
            {
                filterable.Extra(false);
                filterable.Operators(o => o.ForString(fs =>
                {
                    fs.Clear();
                    fs.Equals("Equals");
                }));
                filterable.UI("costCenterNumberFilter");
            })
            .Width(100);
        columns.Bound(p => p.DateEntered)
            .Format(Formats.DATE)
            .HtmlAttributes(new { style = "text-align: center;" })
            .Width(100);

    })
    .Events(e => e.DataBound("initStatusDropdown"))
    .Pageable()
    .Filterable()
    .DataSource(ds => ds
        .Ajax()
        .PageSize(15)
        .Sort(sort => sort.Add(p => p.AccountNumber))
        .Model(m =>
        {
            m.Id(p => p.LoanFeeId);
        })
        .Read(read => read.Action("Index_Read", "WorkQueue"))
    )
)

<script type="text/javascript">

    function initStatusDropdown(e) {

        $(".status-dropdown").each(function () {

            eval($(this).children("script")
                .last()
                .html());
        })
    }

    function costCenterNumberFilter(element) {

        element.kendoAutoComplete({
            datasource: ["3200", "4200", "1000"]
        });
    }

</script>

WorkQueueController.cs:

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<ILoanFeeService>()
                    .ListAsQuery()    // Returns IQuerable<LoanFee>
                    .ToDataSourceResult(request);

            return Json(data);
        }
    }
}

Answer 1

the dataSource property has a lowercase s...

Change:

function costCenterNumberFilter(element) {

        element.kendoAutoComplete({
            datasource: ["3200", "4200", "1000"]
        });
    }

to:

function costCenterNumberFilter(element) {

        element.kendoAutoComplete({
            dataSource: ["3200", "4200", "1000"]
        });
    }