剑道网格无法在移动设备上调整大小

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

我使包裹剑道网格的 div 的左/右边缘溢出。通过这样做，我可以将网格保留在屏幕内并滚动浏览它以查看列。

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