This is a migrated thread and some comments may be shown as answers.

Change URL of tab content?

2 Answers 460 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Brian Vallelunga
Top achievements
Rank 1
Brian Vallelunga asked on 17 Jan 2012, 07:13 PM
How do I change the URL of the content I want loaded per-tab after the initial configuration?

2 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 18 Jan 2012, 10:55 PM
Hi Brian,

It appears that when the TabStrip control is initialized, the URUL for the tab content is stored in the jQuery.data() of the tab (the a.k-link element).

Let's say I have defined a TabStrip control as follows:

<div id="tabStrip">
    <ul>
        <li class="k-state-active">First Ajax Tab</li>
        <li>Second Ajax Tab</li>
        <li>Third Ajax Tab</li>
        <li>Fourth Ajax Tab</li>
        <li>Fifth Ajax Tab</li>
    </ul>
</div>

And the TabStrip gets initialized with the following code:

$("#tabStrip").kendoTabStrip({
    contentUrls:
    [
        '/Home/StaticContentOne',
        '/Home/StaticContentOne',
        '/Home/StaticContentOne',
        '/Home/StaticContentOne',
        '/Home/StaticContentOne'
    ]
});

I could change the URL for the "Second Ajax Tab" with the following:

$($('#tabStrip').find('a.k-link')[1]).data('contentUrl', '/Home/StaticContentTwo');

Hope this helps...

Regards,

John DeVight
0
Pawan
Top achievements
Rank 1
answered on 16 Aug 2012, 05:50 PM
Hi ,

When I try to  change  the Content URL , I get same view as before .  I'm using following code .
 
"$($('#tabStrip').find('a.k-link')[1]).data('contentUrl','/Home/StaticContentTwo'); " is not working for me.

Kindly assist me . 



<div id="dvTabStrip">
        <ul>
            <li class="k-state-active">First Ajax Tab</li>
            <li id="tab2">Second Ajax Tab</li>
            <li>Third Ajax Tab</li>
            <li>Fourth Ajax Tab</li>
            <li>Fifth Ajax Tab</li>
        </ul>
    </div>
 
 var  dvTabStrip =  $("#dvTabStrip").kendoTabStrip({
            contentUrls:
    [
        '/Home/Demo',
        '/Home/Demo',
        '/Home/Demo',
        '/Home/Demo',
        null
    ],
            select: onSelect,
            animation: { open: { effects: 'fadeIn'} }
 
        }).data("kendoTabStrip");
 
 
 
 function onSelect(e) {
 
 $("#tab2 a").data('contentUrl', '/Home/Display');
            dvTabStrip.reload($('#tab2'));
 
}



Thanks,
Pawan
Tags
TabStrip
Asked by
Brian Vallelunga
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Pawan
Top achievements
Rank 1
Share this question
or