MVC ComboBox Virtualization

[Cyril]

Hello,

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?

 

Controller:

public class ContactController
{
    var Manager = new ContactManager();

        public virtual ActionResult _List([DataSourceRequest] DataSourceRequest request)
        {
            var result = Manager
                .Enables()
                .UseAsDataSource()
                .For<ContactListViewModel>()
                .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);
                result.Add(Mapper.Map<ContactListViewModel>(model));
            }

            return Json(result, JsonRequestBehavior.AllowGet);
        }
}

 

Razor version:

@(Html.Kendo().ComboBoxFor(model => model)
    .Name(propertyName)
    .DataTextField("Fullname")
    .DataValueField("ContactId")
    .Placeholder(" ")
    .HtmlAttributes(editorHtmlAttributes)
    .Filter("contains")
    .Height(200)
    .DataSource(dataSource => dataSource.Custom()
        .ServerFiltering(true)
        .ServerPaging(true)
        .PageSize(80)
        .Type("aspnetmvc-ajax")
        .Transport(transport =>
        {
            transport.Read("_List", "Contact");
        })
        .Schema(schema =>
        {
            schema
                .Errors("Errors")
                .Data("Data")
                .Total("Total");
        })
    )
    .Virtual(v => v.ItemHeight(26).ValueMapper("contactValueMapper"))
)
<script>
    function contactValueMapper(options) {
        $.ajax({
            url: "@Url.Action("_Get", "Contact")",
            data: { id: options.value },
            success: function (dataItems) {
                options.success(dataItems);
            }
        });
    }
</script>

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() : "")" />

<script>
    function contactValueMapper(options) {
        $.ajax({
            url: "@Url.Action("_Get", "Home", new { area = "Contact" })",
            data: { id: options.value },
            success: function (dataItems) {
                options.success(dataItems);
            }
        });
    }

    $(function () {

        $("#ContactProfileId").kendoComboBox({
            "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": ""
        });
    });
</script>

Error

Uncaught TypeError: Cannot read property 'index' of undefined
    at init._getElementByDataItem (kendo.all.js:80207)
    at init._deselect (kendo.all.js:80554)
    at init.select (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

[Nencho]

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.

Regards,
Nencho
Telerik by Progress