TabStrip not displaying data for subsequent Tabs

[Chinonso]

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.

 

 

 

 

 

[Nencho]

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

[Nencho]

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

[Chinonso]

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.

[Nencho]

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