6

以下にリストされている剣道UIグリッドがあります。レコードがある場合、水平スクロール バーが表示されます。ただし、レコードがない場合は表示されません。レコードがなくてもスクロールバーを表示する方法。

グリッド

     <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

-1

次のコードを使用します。それは魅力のように機能します:)

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