MVVM remote JSON template in to different tabs

[James]

Hi,

Please help me to get my templates which I load in MVVM in different tabs fine, until I load tabs and their respective content divs dynamically using tabStrip.

I should be able to load separate templates with in tabs but I am not sure how to go about it pulling from remote JSON.

Please have a look at the link below. I've tried to add my data as arrays in the project they are all remote JSON files.

The example

I would appropriate if you could show me in the example how can I load different templates with different datasource in different tabs. In the example I am using tabsDataSource and tileDataSource.

Thanks.

Savas

[Dimo]

Hello Savas,

The provided examples needs to following things to be changed:

- there is a JavaScript error caused by the fact that a read() method is executed over a plain array (tileDataSource), instead of a Kendo UI DataSource instance. You should be able to see this in the browser's JavaScript console. In order to avoid the error, please assign a DataSource instance to the tileDataSource variable, or do not call a read() method, as it would not be needed for a static array. The following documentation page shows how to create a standalone DataSource instance.

http://docs.telerik.com/kendo-ui/framework/datasource/overview

- then, there are other JavaScript errors caused by the fact that HTML elements inside the TabStrip templates are bound to fields, which do not exist in the tabsDataSource, to which the TabStrip is bound. For example:

data-bind="source: inputFields"

In order to resolve this, you need to provide the correct data in the kendo.bind() call in the TabStrip select event handler.

I am afraid we do not have an example, which matches your scenario. Our examples are focused on showcasing the built-in features of our widgets in generic scenarios, which the developers can combine and assemble in more complex scenarios. In case you need more information about the Kendo UI APIs and behavior, let us know and we will readily assist. In case you would like to benefit from tailored in-depth consulting and development assistance, which is in accordance with your business and implementation goals, I can recommend our Professional Services:

http://www.telerik.com/professional-services

Regards,
Dimo
Telerik

[James]

Hi Dimo,
Thank you for your reply.
Looking at your comments I can see that you have not read the initial entry. I am not using a static array, I've entered a small static array to demonstrate the code.
I have a working code loading a perhaps a bit of a complex nested templates. It has the tiles and inside each tile multiple input fields. So I need the read() method otherwise it is not loading my tiles at all.
The difficulty is when I try to use Kendo tabstrip to load these tiles in to one tab.
I’ll eventually assign different remote JSON per tab to load.

I just need a little help to get the tabstrip loading my templates.
I thought it should work if I point the parent template to a tab the rest should be initiated but it doesn’t work.
I am finding it a bit difficult to add all my code in to JS Bin so I have minimised it in order to demo.

Your comment about the JavaScript errors, to do with “TabStrip templates are bound to fields, which do not exist in the tabsDataSource, to which the TabStrip is bound” those fields are to do with the child templates and they exist inside the tiles and I do not get any JavaScript errors when this code is running on our server.

So looking at this link http://jsbin.com/cuduto/edit?html,js,output
Could you please try and load the content which are three tiles in to one tab.

Regards,

Savas

[Dimo]

Hi Savas,

The comments in my previous reply were based on the provided example, which uses local data. If remote data is used, the same problem will be exhibited, so the data retrieval approach is not relevant. The real problem is that the data binding expressions in the TabStrip template are not valid, because they point to non-existent fields.

>> "HTML elements inside the TabStrip templates are bound to fields, which do not exist in the tabsDataSource, to which the TabStrip is bound."

The problem's root cause is in the TabStrip's select handler:

select: function(e){
  var data = this.dataSource.at($(e.item).index());
  var template = kendo.template($("#tileWrapTemplate").html());
  $(e.contentElement).html(template(data));
  kendo.bind(e.contentElement, data);
},

The line in red retrieves a data item from the tabsDataSource, while the data binding expressions in the templates point to fields from the tileDataSource. Naturally, this will fail with a JavaScript error.

As long as you see "undefined has no properties" errors in the browser's console, this means that inaccessible (non-existent) viewModel field names are passed in the data-bind HTML attributes.

You can compare your implementation with this one:

http://dojo.telerik.com/UfoMA

Regards,
Dimo
Telerik