Web page load slowly if use many Multicolumn combobox!

[Baxing]

Hello

I have some page with a Kendo Ui  for JQuery Multicolumnbobox.
At on one page there are around 20 MilticolumnComboboxes and only one large data (around 10000 rows) others have around 5-200 rows ( load data via .json array files)
It takes very long time(maybe 7-15 sec) for the page to load already.

If I off all the Multicolumncomboboxes the page renders fast.

Are there ways to increase the performance with the Jquery Ui MulticolumnComboBoxes?

 

Thank you

[Neli]

Hello Baxing,

When loading large data we recommend using virtualization. I will suggest you take a look at MultiColumnComboBox virtualization demo and documentation linked below:

- https://demos.telerik.com/kendo-ui/multicolumncombobox/virtualization

- https://docs.telerik.com/kendo-ui/controls/editors/multicolumncombobox/virtualization

I hope this helps. 

Regards,
Neli
Progress Telerik

[Baxing]

Hello Neli,

In my case. I test to disable the multicolumncombobox which the largest number of rows(around 10,000 rows). Such from 20 multicolumncomboboxs ( now use 19 multicolumncomboboxs which have only 5-200 rows of each). but it still loads the page slowly(It takes about 5-9 seconds to load page already from 7-15 sec before.).

According to your advice, Is it necessary to act virtualization every multicolumncombobox? Or is there any other way?

Because as I said, the main reason for slow web page loading for it is
1. Large number of rows for each multicolumncombobox.
2. The amount of multicolumncomboboxs on the web page.

 

And for your example, I still have no yet idea for my case to use virtualization. Please guide me to use it for my code below. ( my datasource load form .json local fiie on server

$( document ).ready(function() { 
    $("#CUSCODE").kendoMultiColumnComboBox({
        dataTextField: "code",
        dataValueField: "code",
        placeholder: "--Select--",
        minLength: 3,
        enforceMinLength: true,
        columns: [
            { field: "code", headerTemplate: "<center><strong>Customer Code</strong></center>", width: 150},
            { field: "name", headerTemplate: "<center><strong>Customer Name</strong></center>",  width: 300}
        ],
        footerTemplate: "ทั้งหมด #: instance.dataSource.total() # รายการ",
        filter: "contains",
        filterFields: ["code", "name"],
        dataSource: {
            type: "json",
            transport: {
                read: "json/custb.json"
            }
        }
    });
});'

Thank you

[Martin]

Please refer to the Basic Configuration section from the link my colleague and the three subsections on the proper way to setup the virtualization feature. You should use it for every widget that has a large amount of data. Another thing you can try is to set autoBind to false to avoid data binding at the same time for all 20 widgets.

[Baxing]

Hello Martin,

I set autoBoind to false of all alreeady, It's ok, It can work faster.

But I still no idea for setup the virtualization feature in section of  ValueMapper, please guide for setting this section in my case.

Thank you

[Martin]

I have updated the code snippet with the necessary options you need to configure for the correct virtualization setup.

 $("#CUSCODE").kendoMultiColumnComboBox({
        dataTextField: "code",
        dataValueField: "code",
        placeholder: "--Select--",
        minLength: 3,
        enforceMinLength: true,
        height:660,
        virtual:{
            itemHeight: 33,
            valueMapper: function(options){
                  $.ajax({
                                   // you will need to setup the service similar to this link -https://github.com/telerik/kendo-ui-demos-service/blob/master/demos-and-odata-v3/KendoCRUDService/Controllers/OrdersController.cs
                                    url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
                                    type: "GET",
                                    dataType: "jsonp",
                                    data: convertValues(options.value),
                                    success: function (data) {
                                        options.success(data);
                                    }
                                })
            }
        },
        columns: [
            { field: "code", headerTemplate: "<center><strong>Customer Code</strong></center>", width: 150},
            { field: "name", headerTemplate: "<center><strong>Customer Name</strong></center>",  width: 300}
        ],
        footerTemplate: "ทั้งหมด #: instance.dataSource.total() # รายการ",
        filter: "contains",
        filterFields: ["code", "name"],
        dataSource: {
            type: "json",
            pageSize:80,
            transport: {
                read: "json/custb.json"
            }
        }
    });

The important parts, as stated in the documentation I shared, are the height, itemHeight and pageSize options. They are needed in order to correctly calculate how many items should be retrieved from the server when a request is made. In order to correctly calculate the values for the options, you will need to use a formula, also mentioned in the documentation. 

[Baxing]

Thank you