Performance using complex object in template

[Madhu]

Hi, I have a complex object with 3 level hierarchy like 

sections: { uiFieldSection1: { fields: [] }, uiFieldSection2: { fields: [] }, uiFieldSection3: { fields: [] }, uiFieldSection4: { fields: [] } },

having multiple sections in section object and each section is having fields object which has 6 properties. The data I get is from a Json response.
I am using template for my UI.

<div class="modal-body vam-pLR" id="buildingContent" data-template="businessEntityTemplate" data-bind="source: uiFieldSection1">
 </div>
<script id="businessEntityTemplate" type="text/x-kendo-template">
                    <table class="table">
                        #var columnCount = 3;
                        for(var i=0; i< fields.length; i++){#
                                    <tr><td>
<input data-role='dropdownlist' id="#:fields[i].name#" data-option-label="Select" data-bind="source:fields[#:i#].values,events:{change:ddlOnChanged},value:fields[#:i#].defaultvalue" name="#:fields[i].id#" /><!--data-option-label="Select"-->
                                    </td></tr>
                  <!-- My logic -->
                        #}#

Now my issue is I have around 100 fields in each section, after loading all the sections in UI, it is taking around 4 to 5 seconds to fire the change event and to select an item from dropdownlist.
What I observed it is taking time for value binding. If I remove the value binding things are normal. 

Can someone provide me the solution for this.
Thanks

[Vladimir Iliev]

Hi Madhu,

In current case I would suggest to use the grid widget (with enabled 'editable' option) in the template for showing the rows. This way the value binding will be applied only to the currently edited row and the performance will be improved greatly.

• Grid: MVVM demo

Regards,
Vladimir Iliev
Telerik