Я новичок в bootstrap
, и весь наш интерфейс в основном с KendoGrid's
.KendoGrid внутри бутстрап
Мы хотели встроить KendoGrid внутри Modal Window
бутстрапа и попытались под кодом, который размещен в Kendo Grid in Bootstrap 2 or 3 Modal - IE Filters do not work. Но здесь кнопка close
и header
вышла из окна Modal и выглядит странно. Я думаю, что это из-за версии bootstrap css. При попытке с bootstrap_2.3.2.min.css эта проблема решена. Но мы должны использовать v3.2.0. Пожалуйста, дайте мне знать, если есть какое-либо решение.
<div class='modal fade' id='myModal'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h3><strong>$heading</strong></h3>
</div>
<div class='modal-body'>
<div id="grid"></div>
</div>
</div>
<script>
var products = [{
ProductID: 1,
ProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
},
popupPermission: true,
somethingElsePermission: false
}, {
ProductID: 2,
ProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
},
popupPermission: true,
somethingElsePermission: true
}
];
columnsettings = [
"ProductName",
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "130px"
},
{
field: "UnitsInStock",
title: "Units In Stock",
width: "130px"
},
{
field: "Discontinued",
width: "130px"
}
];
var gridDataSource = new kendo.data.DataSource({
data: products,
schema: {
model: {
id: "uid",
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
sort: {
field: "",
dir: "desc"
},
pageSize: 50
});
$(document).on('click', '#openModal', function() {
$('#myModal').modal('show');
if (!$('#grid').data('kendoGrid')) {
createGrid();
}
});
function createGrid() {
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
reorderable: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: [50, 100, 200]
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with"
},
number: {
lt: "Is less than",
eq: "Is equal to",
gt: "Is greater than"
},
date: {
lt: "Is less than",
eq: "Is equal to",
gt: "Is greater than"
}
}
},
sortable: {
mode: "single",
allowUnsort: false
}
});
}
</script>
Спасибо you.I Интересно, как он работал со старой версией. – Interstellar
Вы можете посмотреть старый документ здесь: http://getbootstrap.com/2.3.2/javascript.html#modals -> разметка как раз обновляется между версиями v2.3.2 и v3.2.0 ... –
Это (и многие другие изменения) также рассматриваются в документах миграции 2-> 3 Bootstrap: http://getbootstrap.com/migration/ – cvrebert