Я не вижу примеров создания сетки кендо с вкладками кендо. Разве это невозможно? Когда я попробовал демо-версию kendo-tabstrip и демо-версию kendo-grid. Оба работают круто по отдельности, но когда я объединяю вкладки кода, они не отображаются должным образом.
Сетка кендо заполняется под вкладками кендо
- Демо: demos.kendoui.com/web/grid/detailtemplate.html 16.09.2013
Ответы:
Я успешно использую сетку кендо внутри вкладки. Сетка не будет отображаться внутри вкладки, если я не удалю "‹!DOCTYPE html›". Если присутствовал DOCTYPE, вкладка всегда была пустой. Я не уверен, почему это решило проблему. Что именно вы подразумеваете под "не показывает должным образом"?
Редактировать: я думаю, что моя проблема на самом деле была вызвана тем, что у нас был разделитель и сетка внутри вкладки.
Мне удалось добавить сетку кендо внутрь вкладки кендо. После добавления необходимых файлов js jquery-3.2.1/kendo.all.min.js и необходимых файлов css kendo.common-bootstrap.min.css/kendo.black.min.css.
Мой HTML
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
$("#grid1").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
<div id="tabstrip">
<ul>
<li>Tab with Grid</li>
<li>Tab without Grid</li>
</ul>
<div>
<div id="grid1"></div>
</div>
<div>
<div>Normal content</div>
</div>
</div>
Мне не пришлось удалять ‹!DOCTYPE html›. Код табуляции и сетки был взят из демонстраций кендо. здесь: https://demos.telerik.com/kendo-ui/tabstrip/index и здесь: https://demos.telerik.com/kendo-ui/grid/index