MVC ComboBox Virtualization

2 posts, 0 answers
  1. Cyril
    Cyril avatar
    5 posts
    Member since:
    Jan 2014

    Posted 06 Apr 2017 Link to this post


    I would like to use a ComBobox without loading the entire option's list. The ComboBox must also be filterable.

    I tested 2 approaches:
    - In MVC, I did not find the Virtual attribute MapValueTo dataItem and it crashes to the loading
    - In JS, it crashes when the selected value is not in loaded options

    Where am I wrong?



    public class ContactController
        var Manager = new ContactManager();
            public virtual ActionResult _List([DataSourceRequest] DataSourceRequest request)
                var result = Manager
                    .OrderBy(p => p.Fullname);
                return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            public virtual ActionResult _Get(int? id)
                var result = new List<ContactListViewModel>();
                if (id.HasValue)
                    var model = Manager.Find(id);
                return Json(result, JsonRequestBehavior.AllowGet);


    Razor version:

    @(Html.Kendo().ComboBoxFor(model => model)
        .Placeholder(" ")
        .DataSource(dataSource => dataSource.Custom()
            .Transport(transport =>
                transport.Read("_List", "Contact");
            .Schema(schema =>
        .Virtual(v => v.ItemHeight(26).ValueMapper("contactValueMapper"))
        function contactValueMapper(options) {
                url: "@Url.Action("_Get", "Contact")",
                data: { id: options.value },
                success: function (dataItems) {

    Error onload:

    Uncaught TypeError: Cannot read property 'length' of undefined
        at kendo.all.js:7288
        at Object.n.success (kendo.all.js:5583)
        at fire (jquery-1.10.2.js:3062)
        at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)
        at done (jquery-1.10.2.js:8249)
        at XMLHttpRequest.callback (jquery-1.10.2.js:8792)


    JavaScript version:

    <input id="@propertyName" name="@propertyName" value="@(Model.HasValue ? Model.ToString() : "")" />
        function contactValueMapper(options) {
                url: "@Url.Action("_Get", "Home", new { area = "Contact" })",
                data: { id: options.value },
                success: function (dataItems) {
        $(function () {
                "dataSource": {
                    "type": "aspnetmvc-ajax",
                    "transport": {
                        "read": {
                            "url": "@Url.Action("_List", "Home", new { area = "Contact" })"
                    "pageSize": 80,
                    "page": 0,
                    "total": 0,
                    "serverPaging": true,
                    "serverFiltering": true,
                    "filter": [],
                    "schema": {
                        "data": "Data",
                        "total": "Total",
                        "errors": "Errors"
                "dataTextField": "Fullname",
                "filter": "contains",
                "height": 200,
                "virtual": {
                    "mapValueTo": "dataItem",
                    "valueMapper": contactValueMapper,
                    "itemHeight": 26
                "dataValueField": "ContactProfileId",
                "placeholder": ""


    Uncaught TypeError: Cannot read property 'index' of undefined
        at init._getElementByDataItem (kendo.all.js:80207)
        at init._deselect (kendo.all.js:80554)
        at (kendo.all.js:80144)
        at init._select (kendo.all.js:32418)
        at init._click (kendo.all.js:32579)
        at init.proxy (jquery-1.10.2.js:841)
        at init.trigger (kendo.all.js:124)
        at init._clickHandler (kendo.all.js:80686)
        at HTMLLIElement.proxy (jquery-1.10.2.js:841)
        at HTMLUListElement.dispatch (jquery-1.10.2.js:5109)


    Thank you for your answer
  2. Nencho
    Nencho avatar
    1711 posts

    Posted 10 Apr 2017 Link to this post

    Hello Cyril,

    Indeed the MVC wrapper does not have a MapValueTo option.

    As for the experienced issue in Kendo UI - I have revised your implementation and locally tested it, base on the provided code snippet. I am afraid, however, that I was unable to replicate the described issue. This is why, I would like to ask you to provide us with a runnable example, where the issue resides, so we could locally test it and pin down the reason for it.

    I am looking forward to your reply.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top