Locked columns div is too small

8 posts, 0 answers
  1. Jean-François
    Jean-François avatar
    26 posts
    Member since:
    Dec 2012

    Posted 04 Jun 2015 Link to this post

    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()
    )

     

  2. Jean-François
    Jean-François avatar
    26 posts
    Member since:
    Dec 2012

    Posted 04 Jun 2015 Link to this post

    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.

  3. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 05 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Gordon
    Gordon avatar
    5 posts
    Member since:
    Dec 2014

    Posted 25 Nov 2017 in reply to Dimo Link to this post

    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

  5. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 28 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Gordon
    Gordon avatar
    5 posts
    Member since:
    Dec 2014

    Posted 28 Nov 2017 in reply to Dimo Link to this post

    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.

     

     

     

     

     

     

  7. Gordon
    Gordon avatar
    5 posts
    Member since:
    Dec 2014

    Posted 28 Nov 2017 in reply to Dimo Link to this post

    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;

     

     

  8. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 29 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top