Change URL of tab content

[DMC Helpdesk]

Hi,

I am trying to load a different page on the first,second, and third tab when a drop down list selected item changes.I followed the solution at (http://www.kendoui.com/forums/ui/tabstrip/change-url-of-tab-content.aspx) but the code does not seem to work.

<script type="text/javascript">
$(function () {
  $("#AlliancesSummaryFormModel_CodeShare").change(function () {

$($('#timelineTabStrip').find('a.k-link')[0]).data('contentUrl', '/AlliancesPerformancePortal/Flown/AlliancesSummary/Q/2015/1/All/AED');

 

            });

        });

 

    </script>

The find method return value evaluates to an object which means it not null, but the call to .data('contentUrl',url) does not load the new URL content.

Thanks

Madani

[Petyo]

Hi,

You have to use the select method if you want to open the tab in question.
Regards,
Petyo
the Telerik team

[DMC Helpdesk]

The code works now, but I still have one problem.The URL is changed for the already visited tabs but not for the others.Here is my scenario:

-click tab1
-click tab2
-select an item from the dropdwon list.This triggers contentUrl update for all tabs.
-click tab1: the url is updated
-click tab2: the url is update
-click tab3: the url is NOT updated

Thanks

Madani

[DMC Helpdesk]

It seems the contentUrl does not take effect until I reolad all the tabs.

     $($('#q1Tab').find('a.k-link')[0]).data('contentUrl', q1Url);              

               $($('#q2Tab').find('a.k-link')[0]).data('contentUrl', q2Url);

               $($('#q3Tab').find('a.k-link')[0]).data('contentUrl', q3Url);

               $($('#q4Tab').find('a.k-link')[0]).data('contentUrl', q4Url);

               timelineTabStrip.reload($('#q1Tab'));

               timelineTabStrip.reload($('#q2Tab'));

               timelineTabStrip.reload($('#q3Tab'));

               timelineTabStrip.reload($('#q4Tab'));

Is there a way to avoid that?

Thanks

[Kamen Bundev]

Hello,

Since you can pass a selector with several tabs, can you try like this:
timelineTabStrip.reload("#q1Tab,#q2Tab,#q3Tab,#q4Tab");

Regards,
Kamen Bundev
the Telerik team

[DMC Helpdesk]

Thanks Kamen. I want to avoid loading all tabs.I want only the current tab to be reloaded.All the other tabs should load the new URL I stored in 'contentUrl' when they are clicked.

Is this possible ?

Thanks

Madani

[Kamen Bundev]

Hi,

You can try another way to accomplish this - the initial load of ajax content is detected by both contentUrl presence and empty content element. So, in order to trigger reload, you can change the contentUrl and empty the content element, or you can do this in the select event, like this:
select: function (e) {
    $(e.contentElement).empty();
}

Kind regards,
Kamen Bundev
the Telerik team

[DMC Helpdesk]

Thanks Kamen. Unfortunately, the code you mentioned did not help.Changing the contentUrl data attribute of each tab has no effect unless the tab is reloaded immediately.I Emptied the content but the tab keeps loading the old url and not the new one which I stored last.

I am now thinking of updating the contentUrls property of the tabstrip iteself instead of the contentUrl  data attribute of the tab.How can I access this property ?

Thanks

Madani

[Kamen Bundev]

Hello,

The below mentioned method works here, I will need to see more code to be able to help you get it running on your side. Can you provide a sample project or a live URL where I can see it in action?

Kind regards,
Kamen Bundev
the Telerik team