Web page load slowly if use many Multicolumn combobox!

2 Answers 24 Views
MultiColumnComboBox
Baxing
Top achievements
Rank 1
Iron
Iron
Iron
Baxing asked on 16 Aug 2021, 03:47 AM | edited on 16 Aug 2021, 03:51 AM

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

2 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 18 Aug 2021, 09:37 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Baxing
Top achievements
Rank 1
Iron
Iron
Iron
answered on 21 Aug 2021, 03:20 AM | edited on 21 Aug 2021, 07:11 AM

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
Telerik team
commented on 25 Aug 2021, 01:37 PM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 25 Aug 2021, 02:26 PM

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
Telerik team
commented on 30 Aug 2021, 11:24 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 30 Aug 2021, 01:41 PM

Thank you
Tags
MultiColumnComboBox
Asked by
Baxing
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Neli
Telerik team
Baxing
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or