6

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

结果

在此处输入图像描述

4

4 回答 4

3

请尝试使用以下代码片段。请在您的网格中添加以下 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());
}
}
于 2013-10-05T09:07:40.323 回答
3

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

.k-grid-content {
    overflow-x: scroll;
}
于 2013-10-05T15:23:00.940 回答
2

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

通过剑道模板找到了其他解决方案 - noRecords 标签的宽度等于网格宽度：

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

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

于 2016-05-25T04:12:07.187 回答
-1

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

$('.k-grid-header, .k-grid-content').wrapAll('<div class="grid-wrapper" style="overflow: scroll" />');
于 2015-04-08T05:53:24.147 回答