Bootstrapw。 Kendo UI - 响应表
Bootstrap w. Kendo UI - Responsive Tables
我正在使用 Bootstrap 和 Kendo UI。我正在寻找创建响应式 table.
Bootstraps 文档说只用 .table-responsive[=40 包装 .table =] class.
Create responsive tables by wrapping any .table in .table-responsive
to make them scroll horizontally on small devices (under 768px). When
viewing on anything larger than 768px wide, you will not see any
difference in these tables.
Source: Bootstrap Documentation
不幸的是，这在使用 Kendo UI 的网格时似乎不起作用。
在下面的示例中，我将 .table class 应用于我的 Kendo 网格，并用 .table-responsive class 根据文档。
长话短说，我的 table 没有响应。容器看起来是，但不会水平滚动。有人知道解决这个问题的方法吗？
我的代码：
<div class="col-md-10 col-md-offset-1 table-responsive">
@(Html.Kendo().Grid<HolsteinWebsite_Herdbook.Models.MainAwardsModel>()
.Name("TopClassifyingCows_ReportGrid")
.Columns(columns =>
{
columns.Bound(c => c.tccGrid.animalName);
columns.Bound(c => c.tccGrid.classValue).Width(80);
columns.Bound(c => c.tccGrid.score).Width(80);
columns.Bound(c => c.tccGrid.sireName);
columns.Bound(c => c.tccGrid.owners);
})
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Grid"))
)
.HtmlAttributes(new { @class = "table" })
)
</div>
生成的代码：
...
<table class="table" role="grid">
<colgroup>
<col>
<col style="width:80px">
<col style="width:80px">
<col>
<col>
</colgroup>
<tbody>
<tr class="k-no-data">
<td colspan="5"></td>
</tr>
</tbody>
</table>
...
来自http://docs.telerik.com/kendo-ui/web/grid/walkthrough#scrolling
To achieve horizontal scrolling, all columns must have set widths and their sum must exceed the Grid width. Otherwise widthless columns will shrink to fit in the space determined by the Grid's width.
此外，这些链接可能对您在将 Kendo UI 与 bootstrap 一起使用时提供参考：
我正在使用 Bootstrap 和 Kendo UI。我正在寻找创建响应式 table.
Bootstraps 文档说只用 .table-responsive[=40 包装 .table =] class.
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Source: Bootstrap Documentation
不幸的是，这在使用 Kendo UI 的网格时似乎不起作用。
在下面的示例中，我将 .table class 应用于我的 Kendo 网格，并用 .table-responsive class 根据文档。
长话短说，我的 table 没有响应。容器看起来是，但不会水平滚动。有人知道解决这个问题的方法吗？
我的代码：
<div class="col-md-10 col-md-offset-1 table-responsive">
@(Html.Kendo().Grid<HolsteinWebsite_Herdbook.Models.MainAwardsModel>()
.Name("TopClassifyingCows_ReportGrid")
.Columns(columns =>
{
columns.Bound(c => c.tccGrid.animalName);
columns.Bound(c => c.tccGrid.classValue).Width(80);
columns.Bound(c => c.tccGrid.score).Width(80);
columns.Bound(c => c.tccGrid.sireName);
columns.Bound(c => c.tccGrid.owners);
})
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Grid"))
)
.HtmlAttributes(new { @class = "table" })
)
</div>
生成的代码：
...
<table class="table" role="grid">
<colgroup>
<col>
<col style="width:80px">
<col style="width:80px">
<col>
<col>
</colgroup>
<tbody>
<tr class="k-no-data">
<td colspan="5"></td>
</tr>
</tbody>
</table>
...
来自http://docs.telerik.com/kendo-ui/web/grid/walkthrough#scrolling
To achieve horizontal scrolling, all columns must have set widths and their sum must exceed the Grid width. Otherwise widthless columns will shrink to fit in the space determined by the Grid's width.
此外，这些链接可能对您在将 Kendo UI 与 bootstrap 一起使用时提供参考：