Accessing Template Loop Index

3 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 11 Jul Link to this post

    I've got a template that's displaying comments. There's no loop inside the template itself since I'm letting the datasource handle that. I have a situation now though, where I need to add content to the template on the 50th (for example) iteration of the template. If I had a loop, that would be easy, but I'm hoping to not have to refactor my existing template to manually include one.

    JS:

    function generateDiscussionView(container_id) {
        var template_html = $('#discussion_template').html();  
        var template = kendo.template(template_html, {useWithBlock: false});
         
        discussion_datasource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/DiscussionsController.cfc?method=getDiscussion",
                    type: "get",
                    dataType: "json",  
                    data: {
                        ContainerID: container_id
                    }
                }          
            },
            schema : {
                type: "json",
                data: "Comments"
            }
        });
     
        discussion_datasource.bind("change", function() {      
            var view = discussion_datasource.view();
            var html = "";
             
            html = kendo.render(function(data) {   
                return template($.extend(data, {IsAdmin: is_admin, AURID: aur_id}));
            }, view);
             
            $('#discussion_display').html(html);
        });
         
        discussion_datasource.read().then(function() {     
            var data = discussion_datasource.data();   
            data = data[0];
             
            global_container_id = container_id;
        }
    }

    Template:

    <div id="discussion_display" class="list-items-content-area k-listview col-xs-12"></div>
     
    <script id="discussion_template" type="text/x-kendo-template">
        <div class="col-xs-12 disc-comment">
            <div class="disc-nav"><img src="#= data.Photo #" onerror="imgError(this);" title="#= data.Poster #" /></div>
            <div class="overflow-hidden">
                <div id="display_comment_#= data.CommentID #">
                    <p class="blue">#= data.Poster #</p>
                    # var formatted_text = data.Text.replace(/(?:\r\n|\r|\n)/g, '<br />'); #
                    <p>#= formatted_text #</p>
                    <p class="small text-muted">
                        #= data.Created #
                        # if (data.Editable) { #
                            <a href="javascript:;" onclick="editComment(#= data.CommentID #);">Edit</a>
                        # } #
                        # if (data.Editable || data.IsAdmin) {#
                            <a href="javascript:;" onclick="deleteComment(#= data.AURID #, #= data.CommentID #);">Delete</a>
                        # } #
                    </p>
                </div>
                # if (data.Editable) { #
                    <div id="edit_comment_#= data.CommentID #" style="display: none;">
                        <textarea id="comment_#= data.CommentID#" class="form-control input-sm">#= data.Text #</textarea>
                        <a id="add_comment_#= data.CommentID #" class="btn btn-default" data-commentid="#= data.CommentID #">
                            <i class="fa-icon-plus"></i>
                        </a>
                        <a href="javascript:;" onclick="cancelEdit(#= data.CommentID #);">Cancel</a>
                    </div>
                # } #
            </div>
        </div>
    </script>

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 13 Jul Link to this post

    Hello,

    I am afraid that there is no built-in way to find the number iteration inside the template. My suggestion is to either: 

      - check for a specific model field value in the template. Lets say that each data item has a id field. Check if the id field of the current data item is 50. 

      - make a JavaScript variable to store the current count and include a logic in the template to increment the counter by one. 

    var counter = 0;
    var template = kendo.template("<li>#: name# #counter ++; console.log(counter);# </li>");
    var data = [ { name: "John Doe" }, { name: "Jane Doe" }];
    var html = kendo.render(template, data);
    $("ul").html(html);

     

    Regards,
    Boyan Dimitrov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 13 Jul in reply to Boyan Dimitrov Link to this post

    Alright, thanks.
Back to Top