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

[Jacques]

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. 

ADDITIONAL INFORMATION JUST DISCOVERED: 
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: http://screencast.com/t/QJ4McJm3eB

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">
    <tr>
        <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>
    </tr>
</script>

[Daniel]

Hello,

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.

Regards,
Daniel
Telerik