TabStrip not displaying data for subsequent Tabs

5 posts, 0 answers
  1. Chinonso
    Chinonso avatar
    38 posts
    Member since:
    Jan 2017

    Posted 09 Jun Link to this post

    Hello guys, i am trying to load a partial view in my tab-strip. each tab strip has a place-holder, where the partial view. will be displayed. One first load, the partial view displays that data. However, when i click the subsequent tabs, the tab-strip does not reload  with the new data. i have added a tab re-load logic but, to no avail unfortunately.

    Here is my Index.cshtml

    01.<div class="demo-section k-content">
    02.    @(Html.Kendo().TabStrip()
    03.      .Name("tabstrip")
    04.      .Events(events => events
    05.            .Select("onSelect")
    06.        )
    07.      .Animation(animation =>
    08.          animation.Open(effect =>
    09.              effect.Fade(FadeDirection.In)))
    10.      .Items(tabstrip =>
    11.      {
    12.      tabstrip.Add().Text("James Bond")
    13.              .Selected(true)
    14.              .Content(@<text>
    15.            <div id="partialPlaceHolder" style="display:none;">
    16. 
    17.            </div>
    18.            </text>);
    19. 
    20.  tabstrip.Add().Text("Earl Klugh")
    21.            .Content(@<text>
    22.            <div id="partialPlaceHolder" style="display:none;">
    23. 
    24.            </div>
    25.            </text>);
    26. 
    27.  tabstrip.Add().Text("Paul Play")
    28.            .Content(@<text>
    29.            <div id="partialPlaceHolder" style="display:none;">
    30. 
    31.            </div>
    32.            </text>);
    33. 
    34.    tabstrip.Add().Text("Chinonso M")
    35.          .Content(@<text>
    36.                <div id="partialPlaceHolder" style="display:none;">
    37. 
    38.                </div>
    39.        </text>);
    40.      })
    41.)
    42.</div>
    43. 
    44.<script type="text/javascript">
    45. 
    46.    $(document).ready(function () {
    47.        $("#tabstrip").kendoTabStrip({
    48.            animation: {
    49.                open: {
    50.                    effects: "fadeIn"
    51.                }
    52.            }
    53.        });
    54. 
    55.        $.get('/Parent/MyAction', { id: 1 }, function (data) {
    56. 
    57.            $('#partialPlaceHolder').html(data);
    58.            /* little fade in effect */
    59.            $('#partialPlaceHolder').fadeIn('fast');
    60.        })
    61.    });
    62. 
    63.    function onSelect(e) {
    64.       // alert($(e.item).find("> .k-link").text());
    65.        //$(e.contentElement).html("");
    66.        var tabName = $(e.item).find("> .k-link").text();
    67.        var id = 0;
    68. 
    69.        if (tabName == "James Bond"){ id = 1; }
    70. 
    71.        else if (tabName == "Earl Klugh"){ id = 2; }
    72. 
    73.        else if (tabName == "Paul Play") { id = 3; }
    74. 
    75.        else if (tabName == "Chinonso M"){ id = 4; }
    76. 
    77.        $.get('/Parent/MyAction', { id: id }, function (data) {
    78. 
    79.            $('#partialPlaceHolder').html(data);
    80.            /* little fade in effect */
    81.            $('#partialPlaceHolder').fadeIn('fast');
    82.        })
    83. 
    84.        //var ts = $("#tabstrip").data().kendoTabStrip;
    85.        //var item = ts.items()[1];
    86.        //ts.reload(item);
    87. 
    88.        var ts = $("#tabstrip").data().kendoTabStrip;
    89.        ts.tabGroup.on('click', 'li', function (e) {
    90.            ts.reload($(this));
    91.        })
    92.    }
    93. 
    94.</script>

     

    Here is my ParentController.cs

    01.namespace JustTestingWeb3.Controllers
    02.{
    03.    public class ParentController : Controller
    04.    {
    05.        public DbQuery db = new DbQuery();
    06.        // GET: Parent
    07.        public ActionResult Index()
    08.        {
    09.            return View();
    10.        }
    11. 
    12.        public ActionResult MyAction(int id)
    13.        {
    14.            var result = db.GetChildren(id);
    15.            return PartialView("~/Views/Child/Detail.cshtml",result);
    16.        }
    17.    }
    18.}

     

    Here is the picture, when if load the firs time and when i click on the next tab. Thanks for your help.

     

     

     

     

     

  2. Nencho
    Admin
    Nencho avatar
    1671 posts

    Posted 13 Jun Link to this post

    Hello Chinonso,

    We are currnetly investigating the scenario and implementation that you have in attempt to replicate the problematc behavior. However, we would need a bit more time. One we have further information on the matter, or require such, I will immediately update you in this thread.

    Thank you in avance for your patience.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Nencho
    Admin
    Nencho avatar
    1671 posts

    Posted 26 Jun Link to this post

    Hello Chinonso,

    Thank you for your patience and please excuse us for the delayed response.

    After an investigation of the demonstrated implementation, I noticed that in the document.ready method, you are re-initializing the kendo TabStrip that is previously created. Using $("#tabstrip").kendoTabStrip({...}) creates a new instance of a TabStrip widget on top of the previously created one. I assume that you attempt to get a reference on the initialized TabStrip, which should be achieved using the data method: 

    $("#tabstrip").data("kendoTabStrip");

    While this is probably the root of the experienced problem, we recommend the usage of the LoadContentFrom method, for scenarios where partial view needs to be loaded as content of certain tabs. By specifying a specific method in the controller, responsible to return the partial view, you could also avoid the js logic implemented at your end, which is for distinguishing which tab is clicked and which partial view to return from the controller.

    I would suggest you to revise the implementation in the following demo, where the ajax loading (using the LoadContentFrom method) is demonstrated:

    http://demos.telerik.com/aspnet-mvc/tabstrip/ajax


    Also, you can directly call the method from the controller as demonstrated below:

    @(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Items(tabstrip =>
        {
            tabstrip.Add().Text("James Bond")
                .Selected(true)
                .LoadContentFrom("LoadFirstTab", "Home");
     
            tabstrip.Add().Text("Earl Klugh")
                .LoadContentFrom("LoadSecondTab", "Home");
     
     
            tabstrip.Add().Text("Paul Play")
                .LoadContentFrom("LoadThirdTab", "Home");
        })
    )

    In the attachment you can find a runnable example, demonstrating this implementation.

    Hope this would help.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Chinonso
    Chinonso avatar
    38 posts
    Member since:
    Jan 2017

    Posted 26 Jun in reply to Nencho Link to this post

    Thanks for getting back. I kinda had a feeling that what i was doing wasn't what Tab strips were designed for. I had already implemented  this suggestion. Thank you once again.
  5. Nencho
    Admin
    Nencho avatar
    1671 posts

    Posted 28 Jun Link to this post

    Hello Chinonso,

    I am glad to see that you were able to get on the right direction by yourself and the issue is not resolved.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top