How to optimise RadComboBox clearItems function

Question

I have a MultiSelectDropDown, that is, several RadComboBox controls are used in a combined way. For example, I can have a dropdown for regions, another for depots and another for user. The idea is to change the content of lower levels dynamically whenever items are selected or unselected on a higher level. The problem is that in the case when many items are selected, this becomes brutally slow due to some Telerik functions, but I do not understand why. This is a chunk from the client-side of the MultiSelectDropDown prototype:

changeLowerLevels: function (valueIndex, values, value) {
    if (!this.canChange) return;
    //Get selected values from combobox
    var combo = $find(this.ddlIDs[valueIndex - 1]);
    var cbItems = combo.get_checkedItems();
    var selectedItems = [];
    var change = null;
    var counter = 0;
    if (cbItems.length) this.filterString = "";
    for (var i = 0; i < cbItems.length; i++) {
        counter++;
        if (this.filterString == "") this.filterString = cbItems[i].get_text();
        selectedItems.push(cbItems[i].get_value());
    }
    if (counter > 1) this.filterString += " with " + (counter - 1) + " other" + ((counter > 2) ? "s" : "");
    if (JSON.stringify(selectedItems) === JSON.stringify(this.selectedItems[valueIndex - 1]) || selectedItems == [])
        return;
    this.selectedItems[valueIndex - 1] = selectedItems;

    var controlObject = this;
    var combo = $find(this.ddlIDs[valueIndex]);
    var comboItems = combo.get_items();
    if(!this.disabled) combo.enable();
    combo.clearItems();

    if (valueIndex == 1) this.twoLevelCache = values;
    var val = values;

    //break if all items are found
    var nrOfSelectedItems = this.selectedItems[valueIndex - 1].length;
    var nrOfFoundItems = 0;
    var index = 0;
    var indexes = [];
    var found = false;
    while (nrOfFoundItems < nrOfSelectedItems && val[index] !== undefined) {
        found = (this.selectedItems[valueIndex - 1].indexOf(val[index].Value) != -1);
        if (!(found))
            index++;
        else {
            indexes.push(index)
            nrOfFoundItems++;
            index++;
        }
    }

    //separators from valuesIndex - 1 level
    var controlObject = this;
    for (var i = 0; i < indexes.length; i++) {
        var separator = new Telerik.Web.UI.RadComboBoxItem();
        separator.set_text("<span><a class=\"checkAll tt-multi-uncheck-icon\" index=\"" + index + "\">U</a>" + $find(this.ddlIDs[valueIndex - 1]).findItemByValue(val[indexes[i]].Value).get_text() + "</span>");
        separator.set_value("");
        separator.set_isSeparator(true);
        comboItems.add(separator);
        this.twoLevelCache.push(val[indexes[i]].Levels);

        //valuesIndex level
        var valuesArray = val;
        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
        for (var depot in valuesArray[indexes[i]].Levels) {
            comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text(valuesArray[indexes[i]].Levels[depot].Name);
            comboItem.set_value(valuesArray[indexes[i]].Levels[depot].Value);
            comboItems.add(comboItem);
            comboItem = null;
        }

        $('#' + this.ddlIDs[valueIndex] + '_DropDown a.checkAll').unbind().on("click", function () {
            checkAllLowerItems(this, controlObject.ddlIDs[valueIndex]);
        });
    }
    combo.set_emptyMessage(this.allText);
    //$("#" + this.ddlIDs[valueIndex]).html(returnValue);
    if (this.ddlIDs.length > valueIndex + 1) {
        var paramToPass = (((val == undefined) || (val[index] === undefined)) ? ("") : (val[index]));
        if (this.allText.length > 0)
            this.changeLowerLevels(valueIndex + 1, paramToPass, "");
        else {
            if (paramToPass !== "")
                paramToPass = paramToPass.Levels;
            if ((val[index] == undefined) || (val[index].Levels[0] === undefined) || (val[index].Levels[0].Value === "")) {
                this.changeLowerLevels(valueIndex + 1, paramToPass, "");
            }
            else {
                this.changeLowerLevels(valueIndex + 1, paramToPass, val[index].Levels[0].Value);
            }
        }
    }
    else {
        if (this.allText.length > 0)
            this.selectedItems[valueIndex] = "";
        else
            if ((val[index] == undefined) || (val[index].Levels[0] === undefined) || (val[index].Levels[0].Value === "")) {
                this.selectedItems[valueIndex] = "";
            }
            else {
                this.selectedItems[valueIndex] = val[index].Levels[0].Value;
            }
    }

    this.setText();
}

combo.clearItems() is extremeley slow. I have take a look on how it is implemented:

function (){var f=this._parent._getControl();?if(f._checkBoxes){f._checkedIndicesJson="[]";?f._checkedIndices=[];?var g=f.get_items();?for(var d=0,e=g.get_count();?d<e;?d++){var c=f.get_items().getItem(d);?c.set_checked(false);?}f.updateClientState();?}a.RadComboBoxItemCollection.callBaseMethod(this,"clear");?}

How can I make sure that this Javascript function speeds up?

I've recently done very similar thing - 3 combos with hierarchical data, thus selected item in the first one determines the content of the 2nd one and so on. Is there a reason why You can't do it with a server-side data binding? Adding a parameter to the data source of the 2nd combo which will be the `SelectedValue` of the 1st one. Then You can simply call `DataBind` on the 2nd one in the `OnSelectedIndexChanged` event of the 1st one. — Skipper, Oct 25 '17 at 05:55
@Skipper I can do it with server-side data binding, in fact, this is how it worked previously. However, this was changed a while ago and we seek to fix this. However, I was able to optimize this by rewriting some Telerik functionalities on Monday. I will write an answer about this here in the not too far-fetched future. — Lajos Arpad, Oct 25 '17 at 09:47
@Skipper I have written the answer I have promised you. I hope it helps you if you find a similar problem. — Lajos Arpad, Oct 27 '17 at 11:39

score 1 · Accepted Answer · answered Oct 27 '17 at 11:39

I have finally solved the problem by rewriting Telerik client-side functionalities. It was a long and difficult debugging, but it yielded a large performance boost in the most difficult circumstances. From ~30 000 milliseconds, to ~300. Let's see the parts of the optimization:

The actual rewrite

/* Overriding Telerik functions Start */ var overridenTelerikControls = false; function overrideTelerikFunctionalities() { if (!overridenTelerikControls) { overridenTelerikControls = true; Telerik.Web.UI.RadComboBox.prototype.clearItems = function (isMultiSelectDropDown) { this.get_items().clear(isMultiSelectDropDown); this._itemData = null; }; Telerik.Web.UI.RadComboBoxItemCollection.prototype.clear = function (isMultiSelectDropDown){ var f=this._parent._getControl(); if(f._checkBoxes){ f._checkedIndicesJson="[]"; f._checkedIndices=[]; var g = f.get_items(); for(var d=0,e=g.get_count();d<e;d++){ var c=f.get_items().getItem(d); c.set_checked(false, isMultiSelectDropDown); } if (isMultiSelectDropDown) { f._updateComboBoxText(); if (f._checkAllCheckBoxElement != null) { f._updateCheckAllState(); } } f.updateClientState(); } Telerik.Web.UI.RadComboBoxItemCollection.callBaseMethod(this, "clear"); }; Telerik.Web.UI.RadComboBoxItem.prototype.set_checked = function (d, isMultiSelectDropDown){ if(!this.get_enabled()){ return; } this._setChecked(d); var c=this.get_comboBox(); if(c){ if(d){ c._registerCheckedIndex(this.get_index()); }else{ c._unregisterCheckedIndex(this.get_index()); } if (!isMultiSelectDropDown) { c._updateComboBoxText(); } if((!isMultiSelectDropDown) && (c._checkAllCheckBoxElement!=null)){ c._updateCheckAllState(); } } }; } } /* Overriding Telerik functions End*/

My approach was to keep the old way of their working by default, but if an isMultiSelectDropDown parameter is passed, then work in the optimized manners. So we have a switch materialized as a parameter and we can turn it on/off. The main difference was that the old way was to change the label text showing the selected elements each time a checkbox is checked/unchecked. The main improvement was to do this change after all the checkboxes were checked/unchecked. This extremely simple idea was the driving force behind the boost of performance.

Actual usage

overrideTelerikFunctionalities();
combo.clearItems(true);

This was the functionalities were overriden if they were not already and the parameter was true, therefore the new approach was chosen.

Test, test, test

How to optimise RadComboBox clearItems function

1 Answers1