Kendo MVC网格过滤器定制无法正常工作

时间:2014-10-27 22:22:49

标签: javascript jquery asp.net-mvc kendo-ui kendo-grid

我试图遵循剑道示例(http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization),但我显然遗漏了一些东西......

网格加载数据就好了。 JavaScript函数costCenterNumberFilter(element);在我放置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);
        }
    }
}

1 个答案:

答案 0 :(得分:1)

dataSource 属性有一个小写的s ...

变化:

function costCenterNumberFilter(element) {

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

为:

function costCenterNumberFilter(element) {

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