Refresh Template When Local Data Changes

5 posts, 1 answers
  1. William
    William avatar
    23 posts
    Member since:
    Jan 2012

    Posted 11 Feb 2012 Link to this post

    I am using a simple template and rendering the html using $("#main").html(kendo.render(template, repairs));.  Since I am just dealing with local data, I felt there was no need for a datasource, but when I add an item to the repair array I would like to have it update the html via the template.  I am using $("#main").html(kendo.render(template, repairs));  again to do that right now, but is there a better way?  Thanks.

    Wade      
    <script id="template" type="text/x-kendo-template">
        <div id="content">
            <div id="RepairNum">
                Repair:#= RepairNum # 
                Customer:#= CustomerName #
            </div>
        </div
    </script>

    <script>
     
        function Repair(repairNum,customerName) {
            this.RepairNum = repairNum;
            this.CustomerName = customerName;
        }
     
        var repairs = new Array();
        repairs.push(new Repair("111111","Test1"));
        repairs.push(new Repair("222222","Test2"));
        repairs.push(new Repair("333333","Test3"));
         
        $(document).ready(function() {
         
            var template = kendo.template($("#template").html());
            $("#main").html(kendo.render(template, repairs));
             
            $("#addButton").click(function(){
                //Attempt to get the customer name
                var repairNum = $("#repairnum").val();
     
                $.get('/app/json.mx', {RepairNum : repairNum},
                    function(data)
                    {
                        repairs.push(new Repair(repairNum,data));
                        $("#main").html(kendo.render(template, repairs));  
                    });
     
                $("#repairnum").val("");
                $("#repairnum").focus();
     
     
            });
     
        });
    </script>

















  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 Feb 2012 Link to this post

    Hi William,

    Your code looks all right. Render method is the best way to refresh a template.
     
    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. William
    William avatar
    23 posts
    Member since:
    Jan 2012

    Posted 13 Feb 2012 Link to this post

    Excellent, thanks.

    Wade
  5. Kyle
    Kyle avatar
    45 posts
    Member since:
    Mar 2012

    Posted 11 Apr 2012 Link to this post

    Can the Render method be used when a dataset has dynamically changed? For example if a node was inserted into a treeview?
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 Apr 2012 Link to this post

    Hi Kyle,

    This forum thread is relatively old.

    You may consider using the new MVVM feature - template binding. Thus way the changes will be applied automatically each time the data model has been changed.
    In this demo you can see this functionality in action, I hope the approach will fit in your case.

    Greetings,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready