CODEWITHSUNDEEP
kendo-ui
Spidey
Spidey

Reputation: 1613

Header and column mis aligned after implementing virtual scrollbar in kendo grid

I have implemented scroll bar in the grid successfully, once I implement the scroll bar header and the column is misaligned since the scrollbar only push to left the column but not the header. Any advise, Thank you

Thank you

@(Html.Kendo().Grid<HH.BookModel>()

        .Name("Book")
        .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:495px" })
        .Columns(columns =>
        {


            columns.Bound(p => p.Description);
            columns.Bound(p => p.SessionCreateDate).EditorTemplateName);
            columns.Command(commands => commands.Destroy()).Width(100);



        })


        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Sortable()


        .Selectable()
        .Scrollable(scrollable => scrollable.Virtual(true))
        .ColumnMenu(c => c.Columns(false))
        .DataSource(dataSource => dataSource
            .Ajax()//bind with Ajax instead server bind
            .PageSize(5)
            .ServerOperation(true)
                .Model(model =>
                {
                    model.Id(p => p.BookID);

                })
                                     .Sort(sort => sort
                          .Add(x => x.Description).Descending())

            .Read(read => read.Action("GetBookData", "BookDetails").Type(HttpVerbs.Get))
            .Destroy("DeleteBook", "BookDetails")
            )



    )

Upvotes: 4

Views: 3895

Answers (2)

Rafael Kayser Smiderle
Rafael Kayser Smiderle

Reputation: 690

I used a small code to let me control que header position. Hope that this helps a little. This is for Kendo Js Library.

function correctGridHeader() {
  if ($('#grid table.k-selectable').height() > $('#grid .k-grid-content').height()) {
    $('.k-grid .k-grid-header').css('padding-right', '17px');
  } else {
    $('.k-grid .k-grid-header').css('padding-right', '0px');
  }
}

Upvotes: 2

Atanas Korchev
Atanas Korchev

Reputation: 30671

Try setting the width of two of the columns. The third would occupy the rest of the space. This would also properly set the width of the header cells.

Upvotes: 2

Related Questions