TabStrip empty when loading Grid

2 posts, 1 answers
  1. Markus
    Markus avatar
    14 posts
    Member since:
    Apr 2012

    Posted 21 May 2012 Link to this post

    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
            }]
        });
  2. Answer
    Markus
    Markus avatar
    14 posts
    Member since:
    Apr 2012

    Posted 23 May 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
Back to Top