Persist Selected Tab in the TabStrip

Environment

Product

Grid for Progress® Telerik® UI for ASP.NET Core

Description

How can I persist the selected tab in the TabStrip when the user refreshes the page or navigates to another page?

Solution

1. Handle the Select event of the TabStrip and get the name of the selected tab. Send it through an AJAX request to the server and store it.

       @{
           var selectedTab = ViewData["tabinfo"];
       }
   
       @(Html.Kendo().TabStrip()
         .Name("tabstrip")
         .Events(ev => ev.Select("onSelect"))
         // Other configuration
       )
   
       <script>
           function onSelect(e) {
               if (e.item) {
                   $.ajax({
                       type: "POST",
                       url: "@Url.Action("SaveTabName","Home")",
                       data: { name: e.item.innerText },
                       success: function(result) {
                           if(result) {
                               console.log("Successfully saved tab!");
                           }
                       },
                       error: function(err) {
                           console.log("Tab is not saved.");
                       }
                   });
               }
           }
       </script>
   

       public class HomeController : Controller
       {
           public static string SelectedTabInfo;
   
           public ActionResult Index()
           {
               if (SelectedTabInfo == null)
               {
                   ViewData["tabinfo"] = "";
                   SelectedTabInfo = "";
               }
               else
               {
                   ViewData["tabinfo"] = SelectedTabInfo;
               }
               return View();
           }
   
           public ActionResult SaveTabName(string name)
           {
               ViewData["tabinfo"] = name;
               SelectedTabInfo = name;
               return new JsonResult(true);
           }
       }
   

2. When the document is ready, get the name of the selected tab through the ViewData["tabinfo"] and activate the respective tab.

       <script>
           $(document).ready(function () {
               var savedTab = '@Html.Raw(selectedTab)';
               if(savedTab != "") {
                   var tabStrip = $("#tabstrip").data("kendoTabStrip");
                   var tabEelement = $("li:contains('" + savedTab + "')");
                   tabStrip.activateTab(tabEelement); // Activate the latest selected tab.
               }
           });
       </script>
   

More ASP.NET Core TabStrip Resources

• ASP.NET Core TabStrip Documentation

• ASP.NET Core TabStrip Demos

• ASP.NET Core TabStrip Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the TabStrip for ASP.NET Core
• Server-Side API Reference of the TabStrip for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base