Kendo grid automatically resizing issue

Question

I have a kendo grid present within a tab strip with two tabs. While navigating between the tabs and performing any event, the width of the grid shrinks. For example: When the user clicks on the update button on the grid in tab 2, and navigates back to tab 1, the grid in the first tab shrinks and the width resize to 10% of its original size. I'm not sure why this happens, I tried setting the CSS to a fixed width, but it doesn't work, is there any way I can ensure it doesn't resize

note: the Kendo grid is displayed within the Kendo tab strip, and the tab strip is present within a kendo splitter pane.

Answer 1

So are you wrapping the grid and the Kendo Tab Strip in a div? I would also need to see the code. I have used the kendo grid on the top half of my web page with a splitter in the middle and a Kendo Tab strip in the bottom pane. So the entire page is wrapped in a wrapper div and I write a grid resize function to resize the grid.

 var resizeGrid = function () {
        var gridElement = $("#grid"),
            dataArea = gridElement.find(".k-grid-content"),
            gridHeight = gridElement.innerHeight(),
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;
        otherElements.each(function () {
            otherElementsHeight += $(this).outerHeight();
        });
        dataArea.height(gridHeight - otherElementsHeight);
    }

Not sure if this is what you want but hope it gives you some insight.