Kendo Grid - 데이터가 없으면 가로 스크롤 막대가 나타나지 않습니다.

Question

아래에 나열된 검도 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; 
} 

결과

---

Answer 1

다음 코드 스 니펫으로 시도해보십시오. 그리드에서 OndataBound 이벤트 아래에 추가하십시오. 가로 스크롤 막대를 강제로이 CSS를 추가

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

시도는 모든 시간을 사용할 수있다 : 다음 코드

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

Answer 3

사용. 내가 noRecords을 사용했다

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

Answer 4

매력 :)처럼 작동 : 사실 옵션 및 기타 솔루션 (라벨 그리드 컨테이너에없는 것처럼 보이지만 아래) 나를 위해 작동하지 않습니다.

유무는 noRecords의 다른 솔루션 - 세트 폭이 동일한 그리드 폭 검도 템플릿을 통해 라벨을 발견

그것의 측면 효과 - 라벨 늘 폭있다

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

는 동적으로 변경 그리드 폭이 변경 될 때