kendo grid columns width not adjusting properly If I use column menu

Question

I am using kendo column menu in my grid.If I uncheck item in the columnmenu then the column width are not properly occupying the full width . can any one help me how to fix this.

var grid = $("#grid").kendoGrid({
    dataSource: {
        data  : createRandomData(100),
        pageSize : 10,
        schema: {
            model: {
                fields: {
                    Id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' },
                    City     : { type: 'string' }
                }
            }
        }
    },
    pageable  : true,
    columnMenu: true,
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" },
        { field: "City", width: 100 }
    ],
    dataBound: function () {
        $(".k-header-column-menu").kendoTooltip({
            content: "column menu"
        });
    }
}).data("kendoGrid");

check this fiddle

http://jsfiddle.net/OnaBai/JCSGz/

Answer 1

The problem is because the width specified for each column. When the grid is initially loaded it ignores the width and just uses it as a proportion of the total. When you use column menu then it forces the width to what you say.

Depending on what you want to achieve simply remove width from the column definition or make sure that Grid has the desired width.

Example with columns resizing to use full width of the grid here http://jsfiddle.net/OnaBai/JCSGz/2/

If what you want is to resize the table to keep each column width, you should:

1. Define the grid width for example using CSS style
2. Bound a function to columnShow event and add the width of the column to the current width of the Grid.
3. Bound a function to columnHide event and subtract the width of the column to the current width of the Grid.

CSS:

#grid {
    width: 300px
}

JavaScript:

var grid = $("#grid").kendoGrid({
    dataSource: {
        data  : createRandomData(100),
        pageSize : 10,
        schema: {
            model: {
                fields: {
                    Id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' },
                    City     : { type: 'string' }
                }
            }
        }
    },
    pageable  : true,
    columnMenu: true,
    columnHide: function (e) {
        this.wrapper.width(grid.wrapper.width() - e.column.width);
    },
    columnShow: function (e) {
        this.wrapper.width(grid.wrapper.width() + e.column.width);
    },
    columns   : [
        { field: "FirstName", width: 100, title: "First Name" },
        { field: "LastName", width: 50, title: "Last Name" },
        { field: "City", width: 150 }
    ],
    dataBound: function () {
        $(".k-header-column-menu").kendoTooltip({
            content: "column menu"
        });
    }
}).data("kendoGrid");

Running example in JSFiddle here: http://jsfiddle.net/OnaBai/JCSGz/4/

Answer 2

I was in same problem, I got solution on this link

function loadColumnState(columnStateKey: string, realGrid): void
{  
    var colState = JSON.parse($.jStorage.get(columnStateKey));

    if(colState && colState.length > 0) 
    {
        var visibleIndex = -1;
        for (var i = 0; i < colState.length; i++) 
        {                
            var column = colState[i];

            // 1. Set correct order first as visibility and width both depend on this.                                     
            var existingIndex = -1;

            if (typeof column.field !== 'undefined')
            {
                existingIndex = findFieldIndex(realGrid, column.field);
            }
            else if (typeof column.commandName !== 'undefined')
            {
                existingIndex = findCommandIndex(realGrid, column.commandName);
            }

            if (existingIndex > -1 && existingIndex != i) // Different index
            {   // Need to reorder
                realGrid.reorderColumn(i, realGrid.columns[existingIndex]);
            }

            // 2. Set visibility state
            var isHidden = (typeof column.hidden === 'undefined') ? false : column.hidden;

            if (isHidden) 
            { 
                realGrid.hideColumn(i); 
            } 
            else 
            { 
                realGrid.showColumn(i); 
                ++visibleIndex;
            }

            // 3. Set width
            var width = (typeof column.width === 'undefined') ? null : column.width;

            if(width != null)
            {
                realGrid.columns[i].width = width; // This sets value, whilst rest redraws
                realGrid.thead.prev().find('col:eq(' + visibleIndex + ')').width(width);
                realGrid.table.find('>colgroup col:eq(' + visibleIndex + ')').width(width); 
            }                              
        }
    }    
}

Answer 3

Try these way in order to set the columns width with different option (%, px, auto):

@(Html.Kendo().Grid<TrainingViewModel>()
.Name("Grid")
.Columns(columns =>
    {
        columns.Bound(t => t.Name).Title("Training Name").Width("%100"); //set width in % 
        columns.Bound(t => t.Date).Title("Date").Width("150px"); //set width in pixel
        columns.Bound(t => t.CityName).Title("City"); //set width auto (no width property)
    })
)

Hope this helps...