Unable to set Table height during initial load

Question

I am using Kendo tabstrip and load tree view (inside a table).

I am setting the height of the table that holds the tree based on window size, everything works fine when the window is resized but for some reason I am not able to set the height of the table during initial load of my application. I am calling the same function that is being called when window is resized on ready,

 $(document).ready(function()

setTimeout(function() { update_size(); }, 250);
.....

But even then the table is not getting sized properly (especially in some screen resolution - ex: 1280*1024) during initial load but when I resize the screen, the table is getting sized properly...

    var update_size = function() {
        var height = $(this).height() - ($("#vertical").height()+30);
        $('#dictionaryTree').height(height-120);
        $('#groupTree').height(height-120);

    }
    $(window).resize(function() {
        clearTimeout(window.refresh_size);
        window.refresh_size = setTimeout(function() { update_size(); }, 250);
    });

Answer 1

This uses to happen because when you try to set the size the element is still not rendered, then KendoUI enters to display the element and recomputes the sizes.

When you resize the window, the element is already rendered and then there is no problem.

Try doing the resize after loading the content of the page and after invoking KendoUI widgets initialization (for example, in the dataBound event).

Answer 2

Use the databound event of the kendo tree.

You can never be 100% sure that the tree view exists in the page, if you rely only in a magical set timeout function.