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

TabStrip empty when loading Grid

1 Answer 221 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Markus
Top achievements
Rank 2
Markus asked on 21 May 2012, 04:30 PM
Hello,

I tried out the example below

http://www.kendoui.com/forums/ui/tabstrip/tabstrip-is-blank-when-loading-grid-into-tab.aspx 

i placed the grid is in the div container but I am still having layout problems. I added a screenshot. Seems that another element is overlayed on the tab. Do you have any ideas what the problem could be? 

Below is the code causing me problems

<div id='bottomDiv'>
    <div id="tabstrip">
        <ul>
            <li>Grid</li>
        </ul>
        <div>
            <div id="ticketListDiv">
            </div>
        </div>
    </div>
    <div id='mapDiv'></div>
</div>

$("#ticketListDiv").kendoGrid({
        dataSource : {
            // JSONP is required for cross-domain AJAX
            dataType: "jsonp",
            transport: {
                read: baseURL + "Data;jsessionid="+ jsessionId + "?browserid=" + browserId + "&type=2&tool=KendoUIResourceList"
            },
            schema: {
                model: {
                    fields: {
                        firstName: { type: "string" },
                        lastName: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        toolbar: kendo.template($("#template").html()),
        height: 250,
        filterable: true,
        sortable: true,
        pageable: true,
        groupable: true,
        selectable: "single row",
        filterable: {
            messages: {
                info: "Ticket Filter", // sets the text on top of the filter menu
                filter: "ausführen", // sets the text for the "Filter" button
                clear: "zurücksetzen", // sets the text for the "Clear" button
            },
            operators: {
                //filter menu for "string" type columns
                string: {
                    eq: "entspricht",
                    neq: "entspricht nicht",
                    startswith: "startet mit",
                    contains: "enthält",
                    endswith: "endet mit"
                }
            }
        },
        dataBound: resizeGrid,
        columns : [{
            field : "firstName",
            title : "Vorname",
            width : 50
        }, {
            field : "lastName",
            title : "Nachname",
            width : 50
        }]
    });

1 Answer, 1 is accepted

Sort by
0
Accepted
Markus
Top achievements
Rank 2
answered on 23 May 2012, 11:11 AM
I figured out in my example that the div container as described in the example makes no sense in my case. When I removed the div container it ended up working.
Tags
TabStrip
Asked by
Markus
Top achievements
Rank 2
Answers by
Markus
Top achievements
Rank 2
Share this question
or