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

Delay new tab displaying until Controller action completed

3 Answers 109 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 27 Oct 2014, 08:24 PM
Hi.  I would like to know if there is any way to delay a clicked tab from displaying until my corresponding MVC controller action is completed?  The following code below calls an MVC controller "Controller" with the ActionResult "ControllerAction" and "message" is the name of the tab I am displaying for validation.
Currently, I have a function called within the if statement if(a_tabPageSelected == "MyTab") which takes a while to complete and would prefer if the tab section didn't appear until the function completes.

Controller.cs
public ActionResult ControllerAction(string a_tabPageSelected)
{
   if(a_tabPageSelected == "MyTab")
   {
        /// do stuff before tab page appears
   }
 
/// now display tab page using some command and return View
return View("Tabsection");




View.cshtml
 
function onSelect(e) {
   var message = $(e.item).find("> .k-link").text();
   $.get('/Controller/ControllerAction/?a_tabPageSelected=' + message, function (data) {
   $("#TabDiv").html(data);
   });
}

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 29 Oct 2014, 01:41 PM
Hi Alex,

While such functionality is not supported built-in, you might achieve something similar using the select event and preventing it if you do not want to navigate to the item, and when the ajax request is completed you can programmatically navigate to the tab. Please check the following example that I created and you can use as a base reference:

http://dojo.telerik.com/abOP

Regards,
Kiril Nikolov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Alex
Top achievements
Rank 1
answered on 29 Oct 2014, 05:09 PM
Alright, so I just would add the preventDefault() command after my call to my controller like below.  After, I would have my controller navigate to the selected tab using an Ajax request.  Do you have any examples for this scenario where the tabstrip is created using Razor?  Something that begins like this @(Html.Kendo().TabStrip()  ?
function onSelect(e) {
   var message = $(e.item).find("> .k-link").text();
   $.get('/Controller/ControllerAction/?a_tabPageSelected=' + message, function (data) {
   $("#TabDiv").html(data);
   });
   e.preventDefault();
}
0
Kiril Nikolov
Telerik team
answered on 30 Oct 2014, 11:17 AM
Hi Alex,

The solution is mostly JavaScript based, so the only specific syntax for the MVC should be attaching the select event. Please try it out and if you have any issue, provide a runnable sample and we will be happy to help.

Regards,
Kiril Nikolov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TabStrip
Asked by
Alex
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Alex
Top achievements
Rank 1
Share this question
or