MVC ComboBox Virtualization

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

    Posted 06 Apr Link to this post

    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
  2. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 10 Apr 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.

    Regards,
    Nencho
    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