This is a migrated thread and some comments may be shown as answers.

grid widths wider than specified

1 Answer 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Cary Abramoff
Top achievements
Rank 1
Cary Abramoff asked on 13 Nov 2011, 03:43 AM
Please see snapshot.
I have specified grid widths in an app where real estate is at a premium but they are wider than specified.
For example in snapshot first column, "select" is set to 20px but it is about 59px. I do not know if grid is compensating for extra space and trying to symmetrically widen other columns but I need to rid myself of the extra spacing. 

Here is the grid specs I am using on my page:



            $("#shnizzGrid").kendoGrid({


                columns: [
        {
            field: "select",
            title: "select",
            template: '#= kendo.toString("<input class=\'pluck\' type=\'checkbox\' id=\'"+linkZZ+"\' />") #',
            width: "20px"


        },


       {
           field: "linkZZ",
           title: "linkZZ",
           template: '#= kendo.toString("<img title=\'click to generate a link to this playlist for sharing maniac!\'  style=\'cursor:pointer\' src=\'//www.fuhshnizzle.com/linkz2.jpg\' onclick=\'shniZZlinkZ(this.id)\' id=\'"+linkZZ+"\' />") #',
           width: "10px"


       },
        {
            field: "Play",
            title: "Play",
            template: '#= kendo.toString("<img style=\'cursor:pointer\' src=\'//www.fuhshnizzle.com/play.jpg\' onclick=\'shniZZpoP(this.id);\' id=\'"+Play+"\' />") #',
            width: "20px"
        },
        {
            field: "LastModified",
            title: "Date",
            width: "40px"
        },
       {
           field: "shniZZfO",
           title: "sniZZfo",
           template: '#= kendo.toString("<img title=\'View contents of shniZZmiX!\'  style=\'cursor:pointer\' src=\'//www.fuhshnizzle.com/preview.gif\' onclick=\'shniZZfO(this.id)\' id=\'"+linkZZ+"\' />") #',
           width: "10px"


       },


        {
            field: "Key",
            title: "shniZZmiXzZ",
            width: "200px"
        }],
                dataSource: {
                    data: filterLoad(filter.toUpperCase()),
                    pageSize: 50


                },
                sortable: true,
                pageable: true


            });


            window.setTimeout("styleshnizz();", 500);




        }


Thanks!

Cary

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 Nov 2011, 09:08 AM
Hi Cary,

The observed behavior is expected, because there are explicit widths defined for all columns, but the sum of all column widths is less than the Grid width. You can leave one column without a width and then all other widths will be applied as set.

Best wishes,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Cary Abramoff
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or