Kendo MVC網格過濾器自定義不起作用

Question

我嘗試遵循劍道示例（ http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization ），但是我顯然缺少了一些東西...

網格可以很好地加載數據。 JavaScript函數costCenterNumberFilter(element); 當我放置了一個alert("WTF!?!?");執行alert("WTF!?!?"); 並顯示在瀏覽器中...

它將不會呈現“成本中心編號自動完成”過濾器。 任何幫助將不勝感激。

我已經檢查了其他幾個SO問題，但很少回答。

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

dataSource屬性的小寫字母s ...

更改：

function costCenterNumberFilter(element) {

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

至：

function costCenterNumberFilter(element) {

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