Persist Selected Tab in the TabStrip

Environment

Product

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

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 IActionResult Index()
           {
               if (SelectedTabInfo == null)
               {
                   ViewData["tabinfo"] = "";
                   SelectedTabInfo = "";
               }
               else
               {
                   ViewData["tabinfo"] = SelectedTabInfo;
               }
               return View();
           }
   
           public IActionResult 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 MVC TabStrip Resources

• ASP.NET MVC TabStrip Documentation

• ASP.NET MVC TabStrip Demos

• ASP.NET MVC TabStrip Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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