Kendo Grid не изменяет размер на мобильном телефоне

Question

Я использую Kendo Grid в одном из моих приложений с Bootstrap. За исключением сетки Kendo, все остальные автоматически изменяются. Я пробовал .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");