Dynamically creating tabs on a tabstrip with datasource?

4 posts, 0 answers
  1. John David
    John David avatar
    2 posts
    Member since:
    Aug 2012

    Posted 28 Nov 2012 Link to this post

    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?
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 29 Nov 2012 Link to this post

    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
    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. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 13 Dec 2012 Link to this post

    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.
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 15 Dec 2012 Link to this post

    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
    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