RadComboBox not adjusting its height while being filtered

1 posts, 0 answers
  1. Lorenzo
    Lorenzo avatar
    1 posts
    Member since:
    Jan 2018

    Posted 11 Jan 2018 Link to this post

    Due to our company policy, we had to update Telerik DLLs. 
    We jumped directly from v2012.1.411.40 to v2017.3.913.40 on a huge old project. 

    While testing that everything was more or less working, I noticed that RadComboBox control stopped to auto-adjust its height while is being filtered with custom text. 

    I had an in-depth look at the .js code utilized by the combo in  v2012.1.411.40 in order to understand how it was working, and I noticed that the combo firstly is being filtered by the function 'RadComboBox.prototype.highlightAllMatches'  and then its height is manipulated based on how many items are displayed.  

    Looking into the latest version js code, I noticed that while the procedure is more or less the same, the function highlightAllMatches will be applied asynchronously, as you can see in line 26 of the following code.


    This causes that the function that adjusts height based on the items runs before of the filtering, resulting in a wrong height. 


    To overcome this problem I've basically overridden the v2017 highlightAllMatches  with the v2012 one, and everything started working as intended.

    Despite the workaround passed all tests,
    I would know if there is a more elegant way to solve this problem.

    01.var a = Telerik.Web.UI;
    02.a.RadComboBox.prototype.highlightAllMatches = function(f) {
    03.    if (this.get_filter() == a.RadComboBoxFilter.None) {
    04.        return;
    05.    }
    06.    if (this.get_highlightedItem()) {
    07.        this.get_highlightedItem().unHighlight();
    08.    }
    09.    var d = this.getLastWord(f, this._getTrimStartingSpaces());
    10.    if (this._getLastSeparator(f) == f.charAt(f.length - 1)) {
    11.        this._removeEmTagsFromAllItems();
    12.        this.setAllItemsVisible(true);
    13.        return;
    14.    }
    15.    var c = this.get_filter()
    16.      , b = function(h, g, i) {
    17.        var j = h.highlightText(g, i);
    18.        h.set_visible(j);
    19.    }
    20.      , e = function() {
    21.        if (this.get_markFirstMatch()) {
    22.            this.highlightFirstVisibleEnabledItem();
    23.        }
    24.        this._resizeDropDown();
    25.    };
    26.    this._process(0, c, d, b, e);
    I've provided some screenshot as an example, I hope that it will be clear. 
    thank you

Back to Top