Grid Detail using tabstrip with two tabs as grids

[Mark]

So right now I have a grid that uses detailTemplate to load a detail tabbed view.  I want to have each tab display its own grid.  The first tab works perfectly, but I can't seem to get the second tab to do anything at all.  Right now I am trying to keep it simple be having the second tab display the same results set from the first tab.  I have two identical JSON objects I am using to load both tabs.  I figured testing a second tab would be easy by re-using what I did in the first, just to use as a proof-of-concept.  Am I initializing this wrong?  Can I only have one grid in a tabbed grid detail template?  I'm guessing I am missing something critical in how detailTemplates can be used.

Thanks for any help!

<!--Consumer Grid-->
<div id="consumerGridContainer" style="height: 100%; width: 100%; margin-top: 2.5em;">
    <span id="consumerGridToolbar" data-for="consumerGrid"></span>
    <div id="consumerGrid" style="height: 100%; width: 100%" class="demo-section" name="consumerGrid"></div>
</div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
    <ul>
        <li class="k-state-active">
            Accounts
        </li>
        <li class="k-state-active">
            Relations
        </li>
    </ul>
    <div>
        <div class="Accounts"></div>
    </div>
    <div>
        <div class="Relations"></div>
    </div>
</div>
</script>
<script>
var initGrid = function () {
    //initialize consumer grid
    dataSource = new kendo.data.DataSource({
        data: JSON.parse(xmlGroups),
        autoSync: true,
        schema: {
            model: {
                id: "ID",
                fields: {
                    Checked: { type: "check" },
                    ID: { type: "string" },
                    GroupID: { type: "string" },
                    Group_Name: { type: "string" },
                    Consumer_Name: { type: "string" },
                    Group_Status: { type: "string" },
                    Consumer_Status: { type: "string" },
                    Client_Type: { type: "string" },
                }
            }
        },
        pageSize: 50
    });
    grid = $("#consumerGrid").kendoGrid({
        dataSource: dataSource,
        pageable: {
            sortable: true,
            buttonCount: 5,
            pageSize: 50
        },
        height: "55em",
        selectable: "row",
        scrollable: true,
        sortable: true,
        navigatable: true,
        reorderable: true,
        filterable: true,
        columnMenu: true,
        resizable: true,
        groupable: {
            messages: {
                empty: "Drag and drop column headers here to group consumers."
            }
        },
        columns: [
            {
                field: "ID",
                width: 1
            }, {
                field: "Checked",
                title: "",
                width: 75,
                template: function (data) {
                    return '<input type="checkbox" ' + ' data-name="' + data.ID + '"' + '/>';
                }
            }, {
                field: "Group_Name",
                title: "Group Name"
            }, {
                field: "Consumer_Name",
                title: "Consumer Name"
            }, {
                field: "Group_Status",
                title: "Group Status"
            }, {
                field: "Consumer_Status",
                title: "Consumer Status"
            }, {
                field: "Client_Type",
                title: "Consumer Type"
            }
        ],
        detailTemplate: kendo.template($("#template").html()),
        detailInit: initGridDetail,
        dataBinding: function (e) {
            //store the uids of selected rows
            $("#consumerGrid input:checked").each(function () {
                uIds.push($(this).parent().parent().data("uid"));
            });
        },
        dataBound: function (e) {
            if (uIds.length != 0) {
                for (var i = 0; i < uIds.length; i++) {
                    var curr_uid = uIds[i];
                    this.tbody.find("tr[data-uid='" + curr_uid + "']").find("td input[type=checkbox]").attr("checked", "checked");
                }
            }
        },
    });
}
function initGridDetail (e) {
            {
                //get calling grid's data
                var detailRow = e.detailRow;
                //create tabstrip with animation
                detailRow.find(".tabstrip").kendoTabStrip({
                    animation: {
                        open: { effects: "fadeIn" }
                    }
                });
                //find class Accounts in template
                detailRow.find(".Accounts").kendoGrid({
                    dataSource: {
                        data: JSON.parse(xmlAccounts),
                        autoSync: true,
                        schema: {
                            model: {
                                id: "External_ID",
                                fields: {
                                    External_ID: { type: "string" },
                                    Policy_Number: { type: "string" },
                                    Account_Name: { type: "string" },
                                    Account_Type: { type: "string" },
                                    Tax_Type: { type: "string" },
                                    Issue_Date: { type: "string" },
                                    Issue_Age: { type: "string" },
                                    Discipline: { type: "string" },
                                }
                            }
                        },
                        pageSize: 5,
                        filter: { field: "External_ID", operator: "eq", value: e.data.ID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "Policy_Number", title: "Policy" },
                        { field: "Account_Name", title: "Account Name"},
                        { field: "Account_Type", title: "Account Type" },
                        { field: "Issue_Date", title: "Issue Date" }
                    ]
                });

                //find class Accounts in template
                detailRow.find(".Relations").kendoGrid({
                    dataSource: {
                        data: JSON.parse(xmlAccounts2),
                        autoSync: true,
                        schema: {
                            model: {
                                id: "External_ID",
                                fields: {
                                    External_ID: { type: "string" },
                                    Policy_Number: { type: "string" },
                                    Account_Name: { type: "string" },
                                    Account_Type: { type: "string" },
                                    Tax_Type: { type: "string" },
                                    Issue_Date: { type: "string" },
                                    Issue_Age: { type: "string" },
                                    Discipline: { type: "string" },
                                }
                            }
                        },
                        pageSize: 5,
                        filter: { field: "External_ID", operator: "eq", value: e.data.ID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "Policy_Number", title: "Policy" },
                        { field: "Account_Name", title: "Account Name" },
                        { field: "Account_Type", title: "Account Type" },
                        { field: "Issue_Date", title: "Issue Date" }
                    ]
                });

            }
        }
</script>

[Petur Subev]

Hello Mark,

It sounds like you are using elements with the same IDs, because the detail template does not have limitations like the one you mentioned.

Check if this is not the case:

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/troubleshooting#only-one-instance-of-the-widget-works-in-the-page

If this is not the case please demonstrate your case and send us a small demo which we can run and advise you how to resolve.

Regards,
Petur Subev
Telerik