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

Whitespace on Kendo Grid with Frozen Columns

9 Answers 949 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 04 Apr 2014, 07:53 PM
When I create a grid with fixed columns, if the page is wide, the alternate table row highlighting disappears.
I can figure out how to fix this and make it span the whole grid with some Javascript / jQuery, but maybe it's an easier fix. Maybe I'm doing something wrong.

Image attached and I created a JSFiddle here:
http://jsfiddle.net/dmathisen/gFwtm/

Image here if it doesn't attach: http://i.imgur.com/7ZXYsmu.png

9 Answers, 1 is accepted

Sort by
0
Mike
Top achievements
Rank 1
answered on 04 Apr 2014, 08:22 PM
Basically, the fixed column killed the ability to have a full-width grid.
0
Mike
Top achievements
Rank 1
answered on 04 Apr 2014, 08:41 PM
I created a jQuery fix, but this is probably not the correct solution.
http://jsfiddle.net/dmathisen/gFwtm/1/
0
Dimo
Telerik team
answered on 08 Apr 2014, 10:31 AM
Hi Dmitri,

The observed issue is caused by an incorrect column width configuration (i.e. a missing column width). Please refer to the documentation:

http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#frozen-columns-(locked-columns)

You can also notice that there is one header cell missing, which is again caused by the missing column width. The proposed workaround does not resolve this problem.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mike
Top achievements
Rank 1
answered on 09 Apr 2014, 06:52 PM
Thanks and good catch on those errors.
Errors have been fixed and the issue still exists. The workaround is working.

Without workaround: http://jsfiddle.net/dmathisen/gFwtm/2/
With workaround:      http://jsfiddle.net/dmathisen/gFwtm/3/
0
Dimo
Telerik team
answered on 10 Apr 2014, 06:53 AM
Hi Dmitri,

The sum of all column widths is less than the Grid width. Such a configuration is generally not supported (see below) and moreover, it doesn't make sense in the context of frozen columns, because frozen columns are useful when there is horizontal scrolling, i.e. when the sum of all column widths exceeds the Grid width.

http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mike
Top achievements
Rank 1
answered on 14 Apr 2014, 02:08 PM
"it doesn't make sense in the context of frozen columns, because frozen columns are useful when there is horizontal scrolling"

Right. But when the width is less than the container and there is no scrolling, why create that ugly whitespace when you can just fill the entire witdth, as seen in my second example? It looks much nicer to fill the entire table. Maybe that's just me.

Anyway, thanks for the input and explanation.
0
Accepted
Dimo
Telerik team
answered on 14 Apr 2014, 02:19 PM
Hello Dmitri,

Removing the whitespace would require one of the following:

1) changing the Grid configuration on the fly and "making up" new column widths, which are different from the set ones.
2) expanding the table with the existing column widths, which will lead to undesired jumping and flickering during column resizing.

We would like to refrain from doing any of the above.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Stu
Top achievements
Rank 1
answered on 20 Aug 2015, 06:35 PM

 

I'm seeing the same thing.  Without my locked column, the grid behaves just as I would want with horizontal scrolling when the window becomes too narrow and columns automatically expanding when the window is wider than the total of specified column widths.

But when I add the Locked(True) on the first column, not only do I get white space to the right of the columns, but I also get two javascript errors (in kendo.web.min.js) every time the page loads.  As far as I can see, I have every column width defines as it says in the documentation.  I do have a column group as well.  Each of the three columns in that group has it's Width defined.

Here is the grid definition (sorry for the VB)

@(Html.Kendo().Grid(Of ViewModels.CatLocationSummaryVM)() _
    .Name("loc_grid") _
    .Columns(Sub(columns)
        columns.Bound(Function(c) c.IndexRecord).Width(120).Locked(True)
        columns.Bound(Function(c) c.AccountNumber).Width(90)
        columns.Bound(Function(c) c.AccountName).Width(200)
        columns.Bound(Function(c) c.City).Width(130)
        columns.Bound(Function(c) c.State).Width(90)
        columns.Bound(Function(c) c.Country).Width(100)
        columns.Bound(Function(c) c.AssignedTo).Width(125)
        columns.Bound(Function(c) c.CanvasPriority).Width(95)
        columns.Bound(Function(c) c.LastChangedBy).Width(120)
        columns.Group(Sub(g)
            g.Title("Status") _
            .Columns(Sub(info)
                info.Bound(Function(c) c.PreCanvasCode).Width(80)
                info.Bound(Function(c) c.PostCanvasCode).Width(85)
                info.Bound(Function(c) c.ImpairmentCode).Width(95)
            End Sub)
        End Sub)
    End Sub) _
    .Sortable() _
    .Scrollable(Sub(s) s.Height(500)) _
    .Filterable() _
    .DataSource(Sub(d)
        d.Ajax() _
        .Read(Function(read) read.Action("LocationsRead", "Catastrophe",
              New With {.catId = Model.CatastropheId})) _
        .Model(Sub(m) m.Id(Function(c) c.CatLocationId))
End Sub))

 And the javascript error happens on this line (starting with n[0])

this.lockedHeader.add(this.lockedContent).width(l),n[0].style.width=n.parent().width()-l-2+"px"

 

 

0
Dimo
Telerik team
answered on 24 Aug 2015, 12:19 PM
Hi Stu,

When frozen columns are used, the Grid renders a few additional <table>s and <div>s, and applies the sum of the configured non-frozen columns' widths as a width to the <div>, which wraps them. As a result, you are seeing different behavior, compared to the case when there are no frozen columns.

Your options to avoid seeing white-space inside the Grid are:

- use a small-enough width for the Grid
- use larger column widths

The Grid width and/or appropriate column widths can even be set, according to the user's screen resolution.

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