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

---

Answer 1

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

Answer 2

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

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