我有一个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;
}
结果
答案 0 :(得分: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());
}
}
答案 1 :(得分:3)
尝试添加此CSS以强制始终启用水平滚动条:
.k-grid-content {
overflow-x: scroll;
}
答案 2 :(得分:2)
我使用过noRecords:true选项,其他解决方案对我不起作用(标签不在网格容器中,但在下面)。
已找到noRecords标签的其他解决方案设置宽度,通过剑道模板等于网格宽度:
M <- c(1.0,1.5,2.0,2.5,3)
y <- c(0.0466,0.0522,0.0608,0.0629,0.0660)
plot(M, y, type="l", col="red", xlab="sdr",
ylab="simulated type I error rate")
abline(h=c(0.025,0.075),col=4,lty=2)
它有副作用 - 当网格宽度改变时,标签宽度不会动态变化
答案 3 :(得分:-1)
使用以下代码。它就像魅力一样:)
$('.k-grid-header, .k-grid-content').wrapAll('<div class="grid-wrapper" style="overflow: scroll" />');