Performance using complex object in template

2 posts, 0 answers
  1. Madhu
    Madhu avatar
    1 posts
    Member since:
    May 2014

    Posted 12 Sep 2014 Link to this post

    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">
    <script id="businessEntityTemplate" type="text/x-kendo-template">
                        <table class="table">
                            #var columnCount = 3;
                            for(var i=0; i< fields.length; i++){#
    <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"-->
                      <!-- 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.
  2. Vladimir Iliev
    Vladimir Iliev avatar
    2206 posts

    Posted 17 Sep 2014 Link to this post

    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.

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