Locked columns div is too small

[Jean-François]

Hi, I use a kendo grid helper in MVC, and use locked columns.

when the grid is displayed, the div containing the locked columns hight is too small, and I have a white box at the bottom, not seeing my last row.

Can anyone tell me what I am doing wrong?

 I pasted the result of my grid here: http://dojo.telerik.com/Onod/8

Here is the source code

@(Html.Kendo.Grid(Model.Analyses).
Name("grilleCumulatifLabo").
Columns(Sub(columns)
columns.Bound(Function(x) x.AfficherGraphique).
ClientTemplate("<input class='chkGraphique' type=#= ContientResultatNumeriques ? 'checkbox': 'hidden' # #= AfficherGraphique ? checked='checked':'' # />").
Title("").Width(25).Locked()
columns.Bound(Function(x) x.Libelle).Title("Analyse").Width(250).Locked().
TronquerSansInfobulle(Function(y) y.Libelle).
InfobulleHtml(Function(y) y.Libelle).
HtmlAttributes(New With {.class = "tronquer-texte"})
columns.Bound(Function(x) x.ValeurReference).Title("Valeurs de<br />référence").Width(100).Locked().
HtmlAttributes(New With {.Class = "centrer"}).
Hidden(Not Model.ContientUnitesDifferentes)
columns.Bound(Function(x) x.Unite).Title("Unités").Width(100).Locked().
HtmlAttributes(New With {.Class = "centrer"}).
Hidden(Not Model.ContientUnitesDifferentes)
If Model.Analyses.Any Then
For Each resultat In Model.Analyses.Item(0).Resultats
Dim index = Model.Analyses.Item(0).Resultats.IndexOf(resultat)
columns.Bound(Function(x) x.Resultats.Item(index).Descripteur.DescriptionCourte).
ClientTemplate("<span class='#= Resultats[" & index & "].Descripteur.ClasseStyle #'>#=Resultats[" & index & "].Descripteur.DescriptionCourte #</span>").
InfobulleHtml(Function(x) x.Resultats.Item(index).InfoBulleHtml).
InfobulleEnteteHtml(Model.Analyses.Item(0).Resultats.Item(index).NomLaboratoire).
Title(CStr(index + 1) & "<br />" & resultat.DateCollecteFormatee & "<br />" & resultat.HeureCollecteFormatee).
Width(resultat.Descripteur.Largeur).
HtmlAttributes(New With {.Class = "resultatAnalyse"})
Next
End If
End Sub).
DataSource(Sub(x) x.Ajax.
ServerOperation(False).
Group(Function(group) group.Add(Function(analyse) analyse.Chapitre)).
Sort(Function(sort) sort.Add(Function(analyse) analyse.Rang))).
Scrollable(Function(s) s.Height("100%")).
Deferred()
)

 

[Jean-François]

Workaround:

Kendo evaluates the "k-grid-content-locked" div too small. I added this code on each databound

$(".k-grid-content-locked").height("");

But still think I shouldn't have to do that.

[Dimo]

Hi Jean-François,

The Grid should have an explicit height, when using frozen columns:

http://docs.telerik.com/kendo-ui/web/grid/appearance#locked-columns-frozen-columns

Here are two more notes worth mentioning:

- percentage height values are not valid in the Scrollable settings
- a scroll height is not needed when the Grid itself has a height

Regards,
Dimo
Telerik

 

 

[Gordon]

I pay you guys to do this stuff and I'm pretty frustrated with some of your responses.  In this case I follow your link and where you say that the height must not be specified, I find that the document says otherwise(Define the height of the grid):

The Grid allows you to lock columns on one side of the table. For the feature to work properly, provide the following configuration settings:
Enable scrolling.
Lock at least one column initially.
Define the height of the Grid.
Set explicit pixel widths to all columns to allow the Grid to adjust the layout of the frozen and non-frozen table parts.
Make sure that the total width of all locked columns is equal to or less than the width of the Grid minus three times the width of the scrollbar.
Make sure that the Grid is not initialized inside a hidden container.
These

[Dimo]

Hi Gordon,

It seems that my previous post was worded in a confusing manner, so I edited it. The Grid does need a height when frozen columns are enabled. Sorry about the misunderstanding and frustration.

Regards,
Dimo
Progress Telerik

[Gordon]

I finally found the cause (more or less) in my situation.  I was experiencing the div for the locked columns being to small and stumbled upon the realization that it was only happening for columns where my first column contained Icon buttons.

It appears that the Icons were forcing the height to be greater than for the non locked portion of the row.

my non working client template

<span title='Edit'><a href=" + @Url.Content("~/MonitoringReports/Edit/") + "#= MonitoringReportID # >  <i class='btn btn-default glyphicon glyphicon-edit'></i></a></span>"

My Working Client Template Removes the btn class:

<span title='Edit'><a href=" + @Url.Content("~/MonitoringReports/Edit/") + "#= MonitoringReportID # >  <i class=' btn-default glyphicon glyphicon-edit'></i></a></span>"

With the button not being larger than the text in the non locked side, all seems to be well.

 

The button class had the following, I suspect the line height was the culprit.

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

Not really happy that this type of issue is a problem although I recognize that the insanity of the underlying technologies is partially responsible.

 

 

 

 

 

 

[Gordon]

Figured it out finally. My locked columns included a button using glypicons, the button was taller than the other (non locked columns). I'm thinking that we have to make sure that the height's are consistent between the locked and non locked sides.

My client template before:

"<span title='Edit'><a href=" + @Url.Content("~/MonitoringReports/Edit/") + "#= MonitoringReportID # >  <i class='btn btn-default glyphicon glyphicon-edit'></i></a></span>"

Removing the btn class resolved the issue.  The btn class had a line height value that was probably the cause. line-height: 1.42857143;

 

 

[Dimo]

Hi Gordon,

Thanks for the follow-up, I am glad that you reached a solution.

Generally, the row heights on the locked and non-locked sides of the Grid are synchronized by the widget, in order to avoid misalignment in various cases, e.g. different amount of content. However, if this synchronizastion occurs before some elements are loaded, it can fail. Indeed, slow-loading images can be a reason for such a problem. In such cases, a good way to proceed is to ensure the respective HTML elements or containers inside the table cells have explicit dimensions, so that the overall content height remains the same before and after the images (or any other content) are loaded.

Regards,
Dimo
Progress Telerik