Nested templates unusual behaviour

[James]

Hello,

I've this nested template and viewModel working OK. Until it hits the last two entries of the array. It wouldn't load the last two items

I am not sure why this is happening. I've tried to load this with inline array, it just won't load in the following URL but it will give you an idea.

http://jsbin.com/movebe/edit?html,js,output

I've also added a screen shot of what I am getting as a result in my local host.

I am adding a show hide toggle with "Show More" to reveal next three entries, but so far no success with adding a wrap either with the following code:

$("#divCategory > article");
      for(var i = 0; i < article.length; i+=3) {
        article.slice(i, i + 3).wrapAll("<div class='more'></div>");
      }

Any ideas to how to achive this would be appreciated?

Thanks.

[Rosen]

Hello Savas,

The issue you have described is caused by the fact that the template has multiple root elements. This is not supported. As each child element is bind directly to the item in the data, the number of elements should match the number of items. In your case as the tileWrapTemplate template is producing two elements (the article and the p with the addmore button) and it is offsetting the data. You should change the template to produce only one element - for example by wrapping the article and the p in a div or moving the p inside the article element.

Regards,
Rosen
Telerik

 

 

[James]

Thank you Rosen. I've tried what you have suggested and all seems to work as I expected my template is loading the remote JSON properly.

That was until I have looked in the DOM. I can now see there are blank div elements as the JSON is remotely loaded.

Is there a fix for that ?

My template now looks like this:

====================================================================================================

<div id="divCategory" class="panelBlue tenanciesTile" data-template="tileWrapTemplate" data-bind="source: tileDataSource"></div>
 
<script id="tileWrapTemplate" class="panelBlue" type="text/x-kendo-template">    
    <div class="more">    
        <article data-bind="attr:{class:cssArtWrap }">
            <span>
                <h2 data-bind="text: title"></h2>
                #if(get("introTextCheck")){#
                    <p data-bind="text: introText"></p>
                #}#
                    <fieldset data-bind="attr:{class:cssWrap}">
                        #if(get("rangeSlider")){#
                         <div data-template="tenanciesRangeSlider" data-bind="source: inputFields"></div>
                        #}else{#
                            <ul id="allInputWrap" data-template="tenanciesTemplate" data-bind="source: inputFields"></ul>
                        #}#
                    </fieldset>
            </span>
        </article>
         #if(get("addMore")){#
          <a href="\\#" class="moreTiles" data-bind="attr:{id: id} click: onClick"><span></span>Show More</a>
        #}#
    </div>
</script>

===================================================================================================

Please check the screenshot for the DOM element tree.

Thanks again.

[Rosen]

Hello Savas,

I'm afraid I'm not able to re-create such issue locally using the provided information. Thus, it will be appreciated if you provide a small runnable sample which demonstrate the issue in question.

Regards,
Rosen
Telerik

 

 

[James]

Hi Rosen,

I've this URL for you. http://jsbin.com/xodoxi/2/edit?html,js,output

Well I have added the code in and it does not do have the same empty divs in the JSBIN environment. 

Not sure why I get empty DOM elements. I see similar issues people having in other forums. Anyway not sure how to reproduce it in the JSBIN there must be something to do with reading remote JSON.

Thanks.

[Rosen]

Hello Savas,

I'm not able to observe the behavior in the jsbin you have provided. I have modified it to use DataSource and simulate remote calls for data, but still not able to recreate the issue.

I suspect that it may be due to the logic of the wrapArticle function, however I guess it is not executed in the sample the same way/time as in the real scenario. 

Regards,
Rosen
Telerik

 

 

[James]

This content is in a tab and as you click the tab I need to insert wrapper div per three articles and after every wrapper I need to enter a link to hide and show next three articles.
Otherwise you just have a long list of tiles. Only the first three should show and the "show more" button as you arrive.

I am still new to Kendo and trying to make good use of Kendo templates and finding it a bit difficult and discovering some limits to what I can do, or don't know how to go about it. Any ideas welcome.

Thanks for your help.

[Rosen]

Hello Savas,

 

Unfortunately, there is little we can do without be able to re-create the issue locally. Thus, could you please modify the version of the sample from my last reply, in order to demonstrate the issue in question.

 

Regards,
Rosen
Telerik