Change URL of tab content?

3 posts, 0 answers
  1. Brian Vallelunga
    Brian Vallelunga avatar
    88 posts
    Member since:
    May 2008

    Posted 17 Jan 2012 Link to this post

    How do I change the URL of the content I want loaded per-tab after the initial configuration?
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 18 Jan 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Pawan
    Pawan avatar
    9 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    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
Back to Top