Kendo Grid不会在移动设备上调整大小

Question

我在我的一个使用Bootstrap的应用程序上使用了Kendo Grid。除了Kendo Grid之外，其他所有内容都会自动调整大小。我试过.Mobile（）,. Resizable（）,. Scrollable（）但没有运气（见图）。我该怎么做才能自动调整网格大小？

@(Html.Kendo().Grid<History>()
      .Name("History")
      .Columns(columns =>
      {
          columns.Bound(c => c.ID).Hidden();
          columns.Bound(c => c.Customer).Title("Client");
          columns.Bound(c => c.ReturnType).Title("Return Type");
          columns.Bound(c => c.Queue).Title("Queue");
          columns.Bound(c => c.NotifyType).Title("Notify Type");
          columns.Bound(c => c.MobilePhone).Title("Mobile Phone");
          columns.Bound(c => c.PreparerName).Title("Prepared By");
          columns.Bound(c => c.AssignedDt).Title("Assigned Time");
          columns.Bound(c => c.IsNoShow).Title("No Show");
          columns.Bound(c => c.IntakeCompletedBy).Title("Intake");
      })
      .Sortable()
      .Mobile(MobileMode.Auto)
      .Resizable(r=>  r.Columns(true))
      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
      .ClientDetailTemplateId("template")
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5))
      .DataSource(dataSource => dataSource
          .Ajax()
          .Sort(sort =>
          {
              sort.Add(request => request.ID).Descending();
          })
          .PageSize(10)
          .Read(read => read.Action("GetCustomerHistory", "DataSource")))
          .Events(e => e.DataBound("OnHistoryDataBound"))
)

Answer 1

我创建了包裹Kendo Grid的div的左/右边缘溢出。通过这样做，我可以将网格保持在屏幕内并滚动查看列。

$("table").parent().css("overflow-x", "auto");