Kendo Grid - 没有数据时不出现水平滚动条

Question

我有一个 Kendo UI 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;
}

结果

---

Answer 1

请尝试使用以下代码 sn-p。请在您的网格中添加以下 OndataBound 事件。

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

或

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

尝试添加此 CSS 以强制始终启用水平滚动条：

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

Answer 3

我使用了 noRecords: true 选项，其他解决方案对我不起作用（标签不在网格容器中，而是在下方）。

已找到其他解决方案 - 通过 kendo 模板设置 noRecords 标签的宽度等于网格宽度：

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

它有副作用——当网格宽度改变时标签宽度不会动态改变

Answer 4

使用以下代码。它的作用就像魅力:)

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