Kendo Grid - Horizontal Scrollbar does not appear when there is no data

Question

I have a Kendo UI Grid as listed below. The horizontal scroll bar is appearing when there are records. But it does not appear when there are no records. How to bring the scroll – bar even if there are no records.

Grid

     <div class="GridSearch">

     @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.TransactionHistoryModel>()
    .Name("TransactionHistroyGrid")
     .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.UserId);
            model.Field(p => p.Comment).Editable(true);
        })

        .PageSize(25)
        .ServerOperation(true)
        .Read(read => read
            .Action("TransactionHistorySearch_Read", "Home")
            .Data("additionalData")
            )
     )
    .Columns(columns =>
    {

        columns.Command(c => c.Custom("Edit").Click("editDetails")).HeaderTemplate("Action").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Command(c => { c.Custom("Save").Click("saveDetails"); c.Custom("Cancel").Click("cancelDetails"); }).Hidden();
        columns.Bound(p => p.UserId).Filterable(false).Title("UserID").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Bound(p => p.Status).Filterable(false).Title("Status").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(70);
        columns.Bound(p => p.Reviewed).HeaderHtmlAttributes(new { style = "text-align: center;" }).Template(@<text></text>).ClientTemplate("<input id='checkbox'  class='chkbx' type='checkbox' disabled='disabled' />").Filterable(false).Title("Reviewed").Width(80);
        columns.Bound(p => p.ProjectCaseNumber).Filterable(false).Title("Project Case #").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(100);
        columns.Bound(p => p.CostPage).Filterable(false).Title("CP Page #").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Bound(p => p.ItemID).Filterable(false).Title("Item ID #").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Bound(p => p.TypeOfChange).Filterable(false).Title("Type of Change").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(100);
        columns.Bound(p => p.ChangeDescription).Filterable(false).Title("Change Description").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(120);
        columns.Bound(p => p.CreatedOnEnd).Format("{0:MM/dd/yyyy}").Filterable(false).Title("Created On").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(85);
        columns.Bound(p => p.UpdatedOnEnd).Format("{0:MM/dd/yyyy}").Filterable(false).Title("Updated On").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(85);
        columns.Bound(p => p.Comment).Filterable(false).Title("Comment").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(140);
        columns.Bound(p => p.Id).Hidden();

        currentIndex++;
    })
    .Pageable()
    .Sortable(sorting => sorting.AllowUnsort(false))
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Filterable()
    .HtmlAttributes(new { style = "height:325px;" }).Events(e => e.DataBound("onRowDataBound"))

)
  </div>

CSS

.GridSearch {
    float: left;
    width: 960px;
    height: 325px;
    padding: 2px 0 20px 0px;
    clear:left;
}

Result

enter image description here

Jayesh Goyani · Accepted Answer · 2013-10-05T09:19:15.850

Please try with the below code snippet. Please add below OndataBound event in your grid.

function onDataBound(arg) {
    if (arg.sender._data.length == 0) {
        var contentDiv = this.wrapper.children(".k-grid-content"),
        dataTable = contentDiv.children("table");
        if (!dataTable.find("tr").length) {
            dataTable.children("tbody").append("<tr colspan='" + this.columns.length + "'><td> </td></tr>");
            if ($.browser.msie) {
                dataTable.width(this.wrapper.children(".k-grid-header").find("table").width());
                contentDiv.scrollLeft(1);
            }
        }
    }
}

OR

function dataBound(e) {
if (this.dataSource.view().length == 0) {
  //insert empty row
  var colspan = this.thead.find("th").length;
  var emptyRow = "<tr><td colspan='" + colspan + "'></td></tr>";
  this.tbody.html(emptyRow);

  //workarounds for IE lt 9
  this.table.width(800);
  $(".k-grid-content").height(2 * kendo.support.scrollbar());
}
}

score 3 · Answer 2 · answered Oct 05 '13 at 15:23

3

Try adding this CSS to force the horizontal scroll bar to be enabled all the time:

.k-grid-content {
    overflow-x: scroll;
}

answered Oct 05 '13 at 15:23

CodingWithSpike

42,906
18
101
138

2

While that shows the scrollbar, the scrollbar can't be used because it doesn't have the proper width information. – Métoule Mar 27 '18 at 14:43

score 2 · Answer 3 · answered May 25 '16 at 04:12

2

I have used noRecords: true option, and other solutions doesn't work for me (label appears not in grid-container, but below).

Have found other solution- set width of noRecords label thru kendo templates equal to grid width:

    noRecords: {
        template: '<div style="width: #=this.table.width()#px">No records found.</div>'
    },

it has side effect- labels width wont changes dynamically when grid width is changed

answered May 25 '16 at 04:12

MarkosyanArtur

1,359
13
10

This works for me, and I like this solution the best anyway, I feel like there should always be a message when there are no records so that the user knows that he or she is not just seeing a squashed grid. – Matt Oct 04 '18 at 20:49

score -1 · Answer 4 · answered Apr 08 '15 at 05:53

-1

Use following code. It works like charm :)

$('.k-grid-header, .k-grid-content').wrapAll('<div class="grid-wrapper" style="overflow: scroll" />');

answered Apr 08 '15 at 05:53

Aniket

552
4
13

This does answer the question - the scroll bar does *appear*, however it is greyed out and you can't actually use it to scroll. – Matt Oct 04 '18 at 20:34

Kendo Grid - Horizontal Scrollbar does not appear when there is no data

4 Answers4