Tab not displayed while loading content dynamically

3 posts, 1 answers
  1. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 16 Jul 2013 Link to this post

    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.
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 18 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 18 Jul 2013 Link to this post

    Thank you very much Vladimir, this solved my problem.
Back to Top