Grid columns expand even when column widths are set

5 posts, 0 answers
  1. Murray
    Murray avatar
    13 posts
    Member since:
    Sep 2012

    Posted 08 May 2013 Link to this post

    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>

  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 08 May 2013 Link to this post

    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!
  3. jay taylor
    jay taylor avatar
    7 posts
    Member since:
    Oct 2009

    Posted 25 Feb 2014 in reply to Murray Link to this post

    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.
  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 26 Feb 2014 Link to this post

    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!
  5. Telerik
    Telerik avatar
    6 posts
    Member since:
    Mar 2014

    Posted 18 Mar 2016 Link to this post

    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!
Back to Top