Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Grid columns expand even when column widths are set

4 Answers 2048 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Murray
Top achievements
Rank 1
Murray asked on 08 May 2013, 10:55 AM
Hi

Is there a way to specify the width of each column and not have it auto expand to match the grid width?

I've included a sample file.

 In the first grid, all columns have a specific width set, however, the combined width is less than the grid width.

This causes the column widths not being adhered to and expand to meet the grid width.

Should the column width remain the fixed regardless?

 The second grid has the “Title” column without a width set.  This makes all the other columns adhere to their widths.

Since I don’t have a column without a width, this is notfeasible.

For the third grid, I put a dummy column as the last one, so it behaves the same way as the second grid.

There’s an issue that exists with this method. When there’sno data, resizing any columns will cause the last column to “disappear”.

However, by hovering the mouse near where it was supposed to exist, the mouse cursor changes to the column resize cursor, indicating that it is still actually there.

The fourth grid is the same as the third grid only it has data.

Resizing any of the columns creates a  horizontal scroll bar.  The “dummy” column keeps its width and does not resize with the other grids.

This is not desired behavior as the “dummy” column shrink to match.  Even setting the column width to be 100% and null didn’t work.

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
     
</head>
<body>
        <div id="example" class="k-content">
 
            <div id="grid" style="height: 200px"></div>
            <br>
            <div id="grid2" style="height: 200px"></div>
            <br>
            <div id="grid3" style="height: 200px"></div>
            <br>
            <div id="grid4" style="height: 200px"></div>
 
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        width: "100%",
                        resizable: true,
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                                width: 100,
                                field: "Title"
                            } , {
                                width: 100,
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                        ]
                    });
                     
                    $("#grid2").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        resizable: true,
                        width: "100%",
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                                field: "Title"
                            } , {
                                width: 100,
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                        ]
                    });
                    $("#grid3").kendoGrid({
                        dataSource: {
                            data: [],
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        resizable: true,
                        width: "100%",
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                            width: 100,
                                field: "Title"
                            } , {
                            width: 100,
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                            , {                            
                                title: "Dummy"
                            }
                        ]
                    });
                     
                                        $("#grid4").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        resizable: true,
                        width: "100%",
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                            width: 100,
                                field: "Title"
                            } , {
                            width: 100,
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                            , {                
                                title: "Dummy"
                            }
                        ]
                    });
                });
                 
 
                 
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];
 
function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            age = now.getFullYear() - birthDate.getFullYear();
 
        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            Age: age
        });
    }
    return data;
}
 
function generatePeople(itemCount, callback) {
    var data = [],
        delay = 25,
        interval = 500,
        starttime;
 
    var now = new Date();
    setTimeout(function() {
        starttime = +new Date();
        do {
            var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                city = cities[Math.floor(Math.random() * cities.length)],
                title = titles[Math.floor(Math.random() * titles.length)],
                birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                age = now.getFullYear() - birthDate.getFullYear();
 
            data.push({
                Id: data.length + 1,
                FirstName: firstName,
                LastName: lastName,
                City: city,
                Title: title,
                BirthDate: birthDate,
                Age: age
            });
        } while(data.length < itemCount && +new Date() - starttime < interval);
 
        if (data.length < itemCount) {
            setTimeout(arguments.callee, delay);
        } else {
            callback(data);
        }
    }, delay);
}
 
             
             
             
            </script>
        </div>
 
</body>
</html>

4 Answers, 1 is accepted

Sort by
-1
Dimo
Telerik team
answered on 08 May 2013, 11:27 AM
Hi Murray,

The observed behavior is normal. Please refer to our documentation and let me know if there is anything unclear:

http://docs.kendoui.com/api/web/grid#configuration-columns.width

If you need pixel widths for all columns, then please use a narrower Grid by setting width to its <div>.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jay taylor
Top achievements
Rank 1
answered on 25 Feb 2014, 11:30 PM
I have same problem. 
I  may go with this for now: http://jsfiddle.net/OnaBai/jzZ4u/1/
I altered it to freeze the last column instead of the first.
There's more to be done, but it's a start.
0
Dimo
Telerik team
answered on 26 Feb 2014, 06:50 AM
Hi Jay Taylor,

The Grid in the provided demo does not have any column widths set. Is this the example you wanted to share? 

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Telerik
Top achievements
Rank 1
answered on 18 Mar 2016, 11:45 AM
Hi

I have been working on some javascript code that will help achieve this functionality. The motivation behind this was to provide a way in which a command column can be prevented from having its size changed. 

In one regard, this does act as a minimum size for a column, but if the grid were to increase in size, the original size is enforced. This allows for other grid cells to increase in size by a larger amount.

Anyway here is a link to a dojo that shows this code in action: http://dojo.telerik.com/@telerik/ikIyU/9

Note that all columns are required to have a width specified (this effectively becomes a minimum width).

The browser resize event is used to trigger the size recalculation of the grids.

This function supports client detail and grouping.

I have not considered column resizing at this point.

If you have any ideas for improvements then go for it!
Tags
Grid
Asked by
Murray
Top achievements
Rank 1
Answers by
Dimo
Telerik team
jay taylor
Top achievements
Rank 1
Telerik
Top achievements
Rank 1
Share this question
or