When you need to autofit all columns of a Kendo grid based on its content, Kendo grid provides an autofitColumn method. Here is an example of how to use this method effectively in following two types of scenarios: 

  1. When you have multiple columns under one title (grouped columns)  

  1. When the total width of all columns don’t fill the entire width of the screen 

Two of these issues are addressed in following approach: 

//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  
//there empty space left after autofit
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 the above function. Following are few places where you could be best suited to do so.

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() { 
    //this assumes that you have grid variables set correctly 
    grid.resize(); 
    grid.fitColumns(); 
});

You can also modify above code to handle the case where, if a fixed width is required for a certain column, then that column can be skipped in the fitColumns() method. 

See a live example of these functions here - http://dojo.telerik.com/izExO