Delay new tab displaying until Controller action completed

4 posts, 0 answers
  1. Alex
    Alex avatar
    2 posts
    Member since:
    Jul 2014

    Posted 27 Oct 2014 Link to this post

    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);
       });
    }
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 29 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alex
    Alex avatar
    2 posts
    Member since:
    Jul 2014

    Posted 29 Oct 2014 in reply to Kiril Nikolov Link to this post

    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();
    }
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 30 Oct 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready