Tab not displayed while loading content dynamically

[Shimon]

Hi Telerik team !

I have an issue using tabstrip in ASP.NET MVC4.
I have a dynamic number of tabs (4 for the moment) with a dynamic content based on the tab.
I use a datasource built with JSON to generate my tabs, and the content of the tabs is a partial view (same partial view each time but filled with JSON datasource in a grid).
The funny part is that loading a tab allow me to load the other ones (previous ones) but not the next ones, ie loading the last tab allow me to see all the tabs i want in the tabstrip, but loading the first one only allow me to see the first one.
I'm using Kendo 2013.1.514, on Windows 7 64bits, and Chrome 28.0.1500.72 m
Here's my code for building the tabstrip:

01.@{

02.    ViewBag.Title = "";

03.    Layout = "~/Views/Shared/_AdminLayout.cshtml";

04.}

05.<div class="span9">

06.    <div id="list-wrapper">

07.        <div class="k-content">

08.           <div id="tabStrip"></div>

09.        </div>

10.    </div>

11.</div>

12. 

13.<script>

14.    $(document).ready(function () {

15.        var data = new kendo.data.DataSource({

16.            type: "json",

17.            transport: {

18.                read: {

19.                    type: "POST",

20.                    url: "@Url.Action("RequestTabs")/",

21.                    dataType: "json",

22.                    contentType: "application/json; charset=utf-8",

23.                    error: function (xhr, ajaxOptions, thrownError)

24.                    {

25.                        alert("error " + xhr.responseText);

26.                    }

27.                }

28.            }

29.        });

30. 

31.        $("#tabStrip").kendoTabStrip({

32.            dataTextField: "Text",

33.            dataContentUrlField: "ContentUrl",

34.            dataSource: data

35.        });

36.        //$("#tabStrip").data("kendoTabStrip").select()

37.    });

38.</script>


Here's my code for the pages :

01.<div id="GridTD"></div>
02.
03.<script id="rowTemplate" type="text/x-kendo-template">
04.    <tr>
05.        <td>
06.            #: ModuleName #
07.        </td>
08.    @foreach (AccessModel access in Model.access)
09.    {
10.        <text>
11.            <td id="Active-#: @Html.Raw("Acc"+access.AccessID.ToString()) #">
12.            </td>
13.        </text>
14.    }
15.    </tr>
16.</script>
17.
18.<script>
19.    $(document).ready(function () {
20.
21.        var columnSchema = [];
22.        columnSchema.push({ field: "ModulID", hidden: true });
23.        columnSchema.push({ field: "ModuleName" });
24.        @foreach (AccessModel access in Model.access)
25.        {
26.            <text>
27.        columnSchema.push({ field: "@access.AccessName" });
28.            </text>
29.        }
30.
31.        var data = new kendo.data.DataSource({
32.            type: "json",
33.            transport: {
34.                read: {
35.                    type: "POST",
36.                    url: "@Url.Action("RequestTabGroup")/@Model.ID",
37.                    dataType: "json",
38.                    contentType: "application/json; charset=utf-8",
39.                    error: function (xhr, ajaxOptions, thrownError)
40.                    {
41.                        alert("error " + xhr.responseText);
42.                    }
43.                }
44.            },
45.            schema: {
46.                data: "TabGroup",
47.                model: {
48.                    fields: {
49.                    }
50.                },
51.                total: function (response) {
52.                    return $(response.TabGroup).length;
53.                }
54.            },
55.            pageSize: 12
56.        });
57.
58.        $("#GridTD").kendoGrid({
59.            dataSource: data,
60.            columns: columnSchema,
61.            sortable: true,
62.            pageable: true,
63.            rowTemplate: kendo.template($("#rowTemplate").html())
64.        });
65.    });
66.</script>

Feel free to ask me more source code if something is missing.

PS : I'm using template to style my row, but i can't make a "border" for more visibility (like in excel). Is there something to add to the <tr> to make this change ?

Thanks in advance for your answer.

[Vladimir Iliev]

Hi Shimon,

 
From the provided information it seems that the other tabs are not working as the PartialView is generating invalid HTML markup - the grid div element have static ID attribute. In current scenario I would suggest to generate the grid ID attribute based on current model ID - please check the example below:

• Generate unique ID attribute for the grid div element based on current model ID:  

  <div id="GridTD_@(Model.ID)"></div>

• $("#GridTD_@(Model.ID)").kendoGrid({
      dataSource: data,
      columns: columnSchema,
      sortable: true,
      pageable: true,
      rowTemplate: kendo.template($("#rowTemplate").html())
  });

Kind Regards,
Vladimir Iliev
Telerik

[Shimon]

Thank you very much Vladimir, this solved my problem.