Kendo grid populates under kendo tab strips

Question

Kendo grid populates under kendo tab strips

1.2k Views Asked by anshul At 04 April 2025 at 23:28

I don't see any examples of kendo grid with kendo tabstrips being done. Is that not possible? As I tried kendo-tabstrip demo and kendo-grid demo. Both are working cool separately, but when I merge the code tabstrips are not showing properly.

Original Q&A

There are 2 best solutions below

**John Dover** · Answer 1

I was successful at adding a kendo grid inside a kendo tabstrip. After bringing in the required js files jquery-3.2.1/kendo.all.min.js, and the required css files kendo.common-bootstrap.min.css/kendo.black.min.css.

My Html

$(document).ready(function () {
    $("#tabstrip").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            }
        }
    });
    $("#grid1").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            pageSize: 20
        },
        height: 550,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [{
            template: "<div class='customer-photo'" +
                            "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                        "<div class='customer-name'>#: ContactName #</div>",
            field: "ContactName",
            title: "Contact Name",
            width: 240
        }, {
            field: "ContactTitle",
            title: "Contact Title"
        }, {
            field: "CompanyName",
            title: "Company Name"
        }, {
            field: "Country",
            width: 150
        }]
    });

});

<div id="tabstrip">
    <ul>
        <li>Tab with Grid</li>
        <li>Tab without Grid</li>
    </ul>
    <div>
        <div id="grid1"></div>
    </div>
    <div>
        <div>Normal content</div>
    </div>
</div>

I did not have to remove <!DOCTYPE html>. Both the tabstrip and grid code was grabbed from kendo demos. here: https://demos.telerik.com/kendo-ui/tabstrip/index and here: https://demos.telerik.com/kendo-ui/grid/index

**johnktims** · Answer 2

I am successfully using a kendo grid inside of a tabstrip. The grid would not display inside of a tab unless I removed "<!DOCTYPE html>". If the DOCTYPE was present then the tab was always blank. I am not sure why that fixed the issue. What exactly do you mean by "not showing properly"?

Edit: I think my issue was actually caused when we had a splitter and grid inside of a tabstrip.

Kendo grid populates under kendo tab strips

There are 2 best solutions below

Related Questions in KENDO-UI

Related Questions in KENDO-GRID

Related Questions in KENDO-MENU

Trending Questions

Popular # Hahtags

Popular Questions