Tab is not switching but the URL of that tab is changing

[sudarshan]

Need Help please...!!!

I am using tabstrip and angular UI routing to navigate those tabs. When i click on the tab it's url is changing but the tab is not switching.

I have 3 tabs. First 2 tabs are working as expected. But the last tab is not switching even though it's url is changing.

Here is my HTML code.

 

<div id="tabstrip" kendo-tab-strip="tabs">
            <!-- tab list -->
            <ul>
                <li class="k-state-active"><a ui-sref="mercury_dashboard">Mercury Dashboard</a></li>
                <li><a ui-sref="transaction_view">Mercury Transaction view</a></li>
                <li><a ui-sref="deliveries_view">Mercury Deliveries view</a></li>
            </ul>
            <div>
              <ui-view></ui-view>
            </div>
            <div>
              <ui-view></ui-view>
            </div>
            <div>
              <ui-view></ui-view>
            </div>
</div>

Corresponding JS file.

var mercury=angular.module("mercury", [ 'kendo.directives' ,'ui.router']);

        mercury.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
        {
           
           
               $stateProvider
                       .state('mercury_dashboard',
                            {url : '/mercury_dashboard',
                            controller: 'mercury_controller'
                            
                            })
                        .state('transaction_view',
                            {url : '/transaction_view',
                            controller: 'transaction_controller',
                            templateUrl: 'transaction_view.html'
                            
                            })
                        .state('deliveries_view',
                            {url : '/deliveries_view',
                            controller: 'deliveries_controller',
                            templateUrl: 'deliveries_view.html'
                        });
                          
                       
        }]);

Please let me know if you need further information. 

Thank you.

[Veselin Tsvetanov]

Hi Sudarshan,

The Kendo TabStrip is not expected to work properly, configuring the routes, using Angular UI router. Therefore you won't be able to achieve the desired selected tab change.

Regards,
Veselin Tsvetanov
Telerik by Progress