Dynamically creating tabs on a tabstrip with datasource?

[John David]

I've been trying to figure out how I'd dynamically create tabs on a tabstrip (and consequently, views) and I thought that trying a hand with a datasource and template might be the way to go, after seeing that it works with listviews. The way I currently have it set up is as of the following:

<div data-role="footer">

    <div id="crewlistTab" data-role="tabstrip" data-source="catDataSource" data-template="departmentTabs">

    </div>

</div>

 

<!--Template for tabs-->

<script type="script/x-kendo-template" id="departmentTabs">

    <a href="#" data-icon="contacts">#: AccountDepartmentId#</a>

</script>

 

<script type="text/Javascript">

var catDataSource = new kendo.data.DataSource({

        transport: {

            read: {

                url: "../Server-Side/connectDP.php",

                type: "GET",

                dataType: "json"

            }

        },

        schema: {

            data: "categories"

        }

    });

</script>

But nothing generates.
Is there a way to fix this or another way to go about dynamically creating tabs & views altogether?

[Petyo]

Hello John,

The tabstrip widget does not support databinding - you may consider building the widget HTML manually based on a given data, and the instantiating the widget manually over the result. 

Creating dynamic views is not supported, too. I would recommend using a template-like view with databound widgets in combination with ajax calls (if needed) to fetch and construct the needed interface. 

I would also like to mention the the view parameters and the view show/init events as a recommended approach to achieve a dynamic navigation.  

All the best,
Petyo
the Telerik team

[David]

Is there an example of this approach anywhere Petyo?  I have tried getting something to work based on the documentation found at http://docs.kendoui.com/getting-started/web/tabstrip/overview, and at I keep getting error messages.

The console log is saying that kendoTapStrip() is not defined.

I am using Kendo UI Mobile v2012.2.913, in case that is an issue.

[Petyo]

Hello David,

We do not have such example. Given the fact, that the tabstrip widget main purpose is to serve as a root level app navigation (refer to the built-in iOS apps for instance), we do not consider the dynamic tabstrip a common pattern.

In case you need assistance with your implementation, feel free to open a support ticket with a project sample attached (you may also use this jsbin as a base).

All the best,
Petyo
the Telerik team