CODEWITHSUNDEEP
angularkendo-uikendo-dropdown
Satya
Satya

Reputation: 525

Kendo UI dropdown performance issue when it has more data

I am using Kendo UI dropdown with angular, but it is very slow when I have huge data. To overcome this problem, is it possible to load data dynamically like when we reach the last element in the drop down, the component should load next 500 records etc. my code looks like this.

<kendo-dropdownlist [data]="issues" style="width: 100%;" [popupSettings]="{ width: 'auto' }">
</kendo-dropdownlist>

what I am expecting is the same behaviour which shows in this example:(With Infinite scroll)

http://plnkr.co/edit/OwhFCyHz0mO1yZMj5UW5?p=preview

Please let me know whether we can expect same behaviour with kendo dropdownlist component? Thanks.

Upvotes: 1

Views: 3736

Answers (2)

topalkata
topalkata

Reputation: 2098

DropDowns virtualization is currently not supported in Kendo UI for Angular, but you can improve performance by utilizing the filtering functionality of the dropdowns along with a minimum filter length, thus decreasing the number of rendered elements:

Docs and example

You can also support the following feature request:

Feature request

Upvotes: 0

Salomon Zhang
Salomon Zhang

Reputation: 1565

Yes, you can apply Kendo Virtualization.

See example below

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">

            <div class="demo-section k-content">
                <h4>Orders</h4>
                <input id="orders" style="width: 100%" />
            </div>

            <script>
                $(document).ready(function() {
                    $("#orders").kendoComboBox({
                        template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
                        dataTextField: "ShipName",
                        dataValueField: "OrderID",
                        virtual: {
                            itemHeight: 26,
                            valueMapper: function(options) {
                                $.ajax({
                                    url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
                                    type: "GET",
                                    dataType: "jsonp",
                                    data: convertValues(options.value),
                                    success: function (data) {
                                        options.success(data);
                                    }
                                })
                            }
                        },
                        height: 290,
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 80,
                            serverPaging: true,
                            serverFiltering: true
                        }
                    });
                });

                function convertValues(value) {
                    var data = {};

                    value = $.isArray(value) ? value : [value];

                    for (var idx = 0; idx < value.length; idx++) {
                        data["values[" + idx + "]"] = value[idx];
                    }

                    return data;
                }
            </script>

        </div>


</body>
</html>

Upvotes: 1

Related Questions