This is a migrated thread and some comments may be shown as answers.

Grid Detail using tabstrip with two tabs as grids

1 Answer 241 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 08 Apr 2014, 06:18 PM
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>

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 10 Apr 2014, 01:15 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or