AutoComplete inside grid adding huge amounts of div > ul > lis to the page

2 posts, 0 answers
  1. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 22 Jan 2014 Link to this post

    We have a grid with a single row that allows the user to select an investment type by entering text in a Kendo AutoComplete control in the row. Once the options come back the user selects an option which then auto populates other columns in the grid and creates a new empty row for the user to use. 

    We noticed that at about 15 rows the browser becomes sluggish and almost unusable. On closer inspection using Chrome's profiling tools we noticed that there are thousands of additional HTML elements being added to the DOM and never being removed. These additional elements belong to the AutoComplete kendo widget. 

    After the user has selected a valid option, is there a way for us to clear the associated DIVS and ULs from the DOM? I only see a destroy method, which isn't what we're looking for and it doesn't seem to get rid of those additional elements anyway. 

    I'm in the process of uploading a video to screencast which shows how HTML elements are being appended to the document. The max number of rows allowed in this grid is 15, yet for each row added the AutoComplete seems to add more and more HTML to the bottom of the document.
    AND, during or after each character is entered by the user into the AutoComplete widget Kendo seems to be updating attributes of each of those elements somehow (you'll see what I mean in the screencast video. It's as if it's running through each and every one of them, updating attributes as it goes). 
    See the screencast here:

    By the time we hit 15 rows this process is so slow that the browser becomes unusable. As I'm typing this update I flick back to Firebug every now and then and can see that it's still trying to update those elements. 

    To give an idea of how many elements we're talking about, when the page loads there are: 
    907 HTML elements
    I added 15 rows but could never get to the point of seeing how many elements there were because the update process was so slow. So instead I'm adding the element count after adding each row:
    Row 1 - 1280
    Row 2 - 2323
    Row 3 - 3875
    Row 4 - 5934
    Row 5 - 8501
    Row 6 - 11576
    Row 7 - 15159 
    Row 8 - 19250
    Row 9 - 23849
    Row 10 - 28956
    Row 11 - 34571
    And so on...

    NOTE: Each row added makes use of a template, as shown below, which means it's reusing a single dataSource. I'm not sure if that makes any difference to the troubleshooting process?: 
    <script id="investment-fund-row-template" type="text/x-kendo-template">
            <td data-bind="text: BenchmarkCode"></td>
            <td><input data-role="autocomplete" data-min-length="3" data-value-primitive="true" value="#=BenchmarkName#" data-text-field="Name" data-placeholder="Search funds..." data-value-field="Gid" data-bind="source: benchmarksDataSouce, events: { select: onInvestmentSelect, dataBound: onInvestmentDataBound, change: onInvestmentChange }" /></td>
            <td class="text-right"><input class="editable" data-role="numerictextbox" data-format="\\#\\#\\#.00 \\%" data-bind="{value: Allocation, disabled: toggleAllocation}" data-min="0" data-max="100" /></td>
            <td class="text-right">#: get("Ytd") #</td>
            <td class="text-right">#: get("Year1") #</td>
            <td class="text-right">#: get("Year3") #</td>
            <td class="text-right">#: get("Year5") #</td>

  2. Daniel
    Daniel avatar
    2110 posts

    Posted 27 Jan 2014 Link to this post


    You should use the destroy method to destroy all widgets in the Grid table in order to avoid the problem. The Grid dataBinding event can be used to call the method before the Grid is rebound. I created a small jsBin example that demonstrates this scenario.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top