How to retain the currently selected tab in a tab strip when refreshing or navigating

1 Answer 335 Views
TabStrip
Joel
Top achievements
Rank 1
Joel asked on 03 Oct 2022, 09:04 PM

I would like to retain the selected tab when refreshing the page, or when navigating back from another page.  I have some code to capture the currently selected tab:


function onSelect(e) {
            console.log(e.item.innerText)
            
            $.ajax({
                type: "POST",
                url: "/Customers?handler=SelectTab&SelectedTab=" + e.item.innerText,
                beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
                }
            });
        }

And I am using the following when the page loads, in order to set the selected tab on page load, but it doesn't show the tab properly (being called from $(document).ready):

function selectTab(tab) {
            var tabStrip = $("#customer-tabstrip").data("kendoTabStrip");
            var t = $("li:contains('" + tab + "')");
            tabStrip.select(t);
            tabStrip.activate(t);
        }
The main tab is still selected, but with the tab I am programmatically selecting appended below the main tab.  I am not sure what I am doing wrong...

1 Answer, 1 is accepted

Sort by
0
Accepted
Alexander
Telerik team
answered on 06 Oct 2022, 01:39 PM

Hi Joel,

I noticed that this is a duplicate of a private thread you have previously opened regarding the same topic. For the benefit of the community, I am attaching the reply my colleague has given here as well.

If the title of the tab is successfully passed to the selectTab() function, you can use the activateTab() method to activate the respective tab.

For example:

    function selectTab(tab) {
        var tabStrip = $("#customer-tabstrip").data("kendoTabStrip");
        var t = $("li:contains('" + tab + "')");
        tabStrip.activateTab(t);
    }

Otherwise, if you use the select() method, you need to pass the index of the tab that should be selected.

Kind Regards,
Alexander
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Joel
Top achievements
Rank 1
commented on 06 Oct 2022, 02:01 PM

Thank you Alexander.  Was testing the forum to see if i got an answer here faster than opening a ticket.  Looks like the ticket is definitely faster!

Tags
TabStrip
Asked by
Joel
Top achievements
Rank 1
Answers by
Alexander
Telerik team
Share this question
or