Kendo MVC Grid Filter Customization not working

2 posts, 0 answers
  1. John
    John avatar
    7 posts
    Member since:
    Jul 2014

    Posted 29 Oct 2014 Link to this post

    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("blah");` and that is displayed in the browser...

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


    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);
            }
        }
    }


  2. John
    John avatar
    7 posts
    Member since:
    Jul 2014

    Posted 30 Oct 2014 in reply to John Link to this post

    A coworker found it. the property dataSource "S" was not capitalized.
Back to Top