//following function is used to fit all the columns per its content

kendo.ui.Grid.fn.fitColumns = function(parentColumn) {

    var grid = this;

    var columns = grid.columns;

    if (parentColumn && parentColumn.columns)

        columns = parentColumn.columns;

    columns.forEach(function(col) {

        //recursive call for the grouped columns

        if (col.columns)

            return grid.fitColumns(col);

        grid.autoFitColumn(col);

    });

    //this will expand columns if empty space is left

    grid.expandToFit();

}//fitColumns

//this will expand all the column sizes within kendo grid if

//  after autofit, there is empty space left

//

kendo.ui.Grid.fn.expandToFit = function() {

    var $gridHeaderTable = this.thead.closest('table');

    var gridDataWidth = $gridHeaderTable.width();

    var gridWrapperWidth = $gridHeaderTable.closest('.k-grid-header-wrap').innerWidth();

    // Since this is called after column auto-fit, reducing size

    // of columns would overflow data.

    if (gridDataWidth >= gridWrapperWidth) {

        return;

    }

    var $headerCols = $gridHeaderTable.find('colgroup > col');

    var $tableCols = this.table.find('colgroup > col');

    var sizeFactor = (gridWrapperWidth / gridDataWidth);

    $headerCols.add($tableCols).not('.k-group-col').each(function() {

        var currentWidth = $(this).width();

        var newWidth = (currentWidth * sizeFactor);

        $(this).css({

            width: newWidth

        });

    });

}//expandToFit

There are multiple places where you can call above function. Following are few places where you could be best suited.

dataBound: function(e)

{         

    this.fitColumns();

}

When the window resizes you can call grid resize as well as fit columns to refit the columns within new width.

$(window).resize(function() {

    //assume that you have grid variable set correctly

    grid.resize();

    grid.fitColumns();

});