JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<div class="container">
<h3>Modal Example</h3>
<div> <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Kendo Not working on Modal</h3>
</div>
<div class="modal-body">
<div id="grid" style="height:300px;"></div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
CSS
.btn-group {
z-index: 1051;
}
JavaScript
var sharedDataSource = new kendo.data.DataSource({
data: [{
id: 1,
value: 10,
item: "Item1"
}, {
id: 2,
value: 12,
item: "Item2"
}, {
id: 3,
value: 15,
item: "Item3"
}, {
id: 4,
value: 18,
item: "Item4"
}, {
id: 5,
value: 22,
item: "Item5"
}, {
id: 6,
value: 11,
item: "Item6"
}],
schema: {
model: {
id: "id",
fields: {
id: {
type: "number",
editable: false
},
value: {
type: "number"
},
item: {
type: "string"
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: sharedDataSource,
autoBind: false,
editable: true,
filterable: true,
toolbar: ["save", "cancel"]
});
sharedDataSource.read();