Grid Not Displaying Properly After the First

[Randy]

I am v2013.1.319

I have a kendo tab strip with 4 tabs, each has a separate grid. The first grid shows fine tab(0), the other three grids have their bottoms off the bottom of the tab. All of the grids are almost identical. I changed the first grid to the second position and the problem was the same the first grid was ok, the rest were off.

I added 
var ts = $("#tsCodesIndividual").data("kendoTabStrip");
and a
ts.select(0) before the first grid
ts.select(1) before the second grid and so on.

It now displays fine. A full example of a grid is below, the only real difference is the datasource:
    ts.select(1);
    tg.myServiceCodesViewModel = kendo.observable({ data: tg.myServiceCodes });
    delete tg.myServiceCodes;
    $("#codesIndividualServiceGrid").kendoGrid({
        dataSource: {
            data: tg.myServiceCodesViewModel.data,
            schema: {
                model: {
                    fields: {
                        custCode: { type: "string" },
                        tgCode: { type: "string" },
                    }
                }
            }
        },
        pageable: {
            pageSize: 10
        },
        height: 400,
        toolbar: ["create", "save"],
        columns: [
            { field: "custCode", title: "Code", width: "180px" },
            { field: "tgCode", title: "Service", width: "160px", values: tg.dlService },
            { command: "destroy", title: " ", width: "90px" }
        ],
        editable: true,
        resizable: true,
        reorderable: true,
        saveChanges: function (e) {
            if (!confirm("Are you sure you want to save all changes?")) {
                e.preventDefault();
            }
        },
    });

The tabstrip is extreamly basic:
    $("#tsCodesIndividual").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            }
        }
    });

[Vladimir Iliev]

Hi Randy,

Current behavior is expected when the grid is initialized to an invisible tab - I would suggest to use for example the activate event of the tabStrip to initialize the grids in the initially invisible tabs. For example I created small jsBin demo which demonstrates loading of second grid on this event:

• jsBin demo

Kind Regards,
Vladimir Iliev
Telerik

[Randy]

Thanks for the clarification Vladimir.

I think I will stay with my existing solution. The tab strip itself in in a hidden div when the initialization of the tabs is done, so there is no flashing as it cycles through them. In my situation the likely hood of them opening it up and not using all 4 grids is low plus the weight of each grid is small, so the overhead/complexity of keeping track of which grid has been initialized is higher than what I am currently doing.

Thanks Again for the reply and alternative
Randy

[Vladimir Iliev]

Hi Randy,

 
Another option is to first initialize the grids and then initialize the tabStrip:

• jsBin example

Kind Regards,
Vladimir Iliev
Telerik