Using ui-router with TabStrip

3 posts, 0 answers
  1. James
    James avatar
    37 posts
    Member since:
    Sep 2014

    Posted 05 Oct 2015 Link to this post

    I am trying to implement a Kendo Tab Strip and that applies ui-router to display the contents of the tab. I can get the tab strip to display but not the contents using the ui-view. Anyone have an example of how to make these items work together.
    Sample of my html.

    <div class="main-template">
        <div class="row">
            <h3>Welcome to the Dashboard</h3>
            <div ng-controller="Navigation">
                <div kendo-tab-strip k-content-urls="[ null, null]">
                    <!-- tab list -->
                        <li class="k-state-active" url="#/invoice">Invoice Management</li>
                        <li url="#/shipment">Shipment Management</li>
                <div ui-view></div>

  2. James
    James avatar
    37 posts
    Member since:
    Sep 2014

    Posted 05 Oct 2015 in reply to James Link to this post

    I needed to use ui-sref instead of url in my li's
  3. Petyo
    Petyo avatar
    2436 posts

    Posted 07 Oct 2015 Link to this post

    Hello James,


    we haven't explored such scenario, but from what I know about the ui-router, most likely it can't be done without significant changes of the tabstrip widget itself. In fact, it may be simpler to use the tabstrip markup and CSS classes without the directive itself and rely on the routing mechanism to provide the interactivity part. Notice however, that such scenario is a custom one, which we can't provide further support on. 


    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top