<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">Bootstrap Editable jQuery Grid <span class="fa fa-edit pull-right bigicon"></span></h4>
</div>
<div class="panel-body text-center">
<div id="grid"></div>
</div>
</div>
</div>
<div>
This template uses the ShieldUI-Lite open source Suite.<br />
It renders a responsive grid component, which has editing capabilities.<br />
The sample uses the <a href=\"https://github.com/shieldui/shieldui-lite/\">ShieldUI-Lite</a> jquery Grid component for visualization of data.<br />
To see more examples of this type of widget, please go <a href=\"https://demos.shieldui.com/web/grid-editing/editing-custom-editor\">here</a>.
</div>
</div>
<!-- you need to include the shieldui css and js assets in order for the grids to work -->
<link rel="stylesheet" type="text/css" href="http://www.prepbootstrap.com/Content/shieldui-lite/dist/css/light/all.min.css" />
<script type="text/javascript" src="http://www.prepbootstrap.com/Content/shieldui-lite/dist/js/shieldui-lite-all.min.js"></script>
<script type="text/javascript" src="http://www.prepbootstrap.com/Content/data/shortGridData.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#grid").shieldGrid({
dataSource: {
data: gridData,
schema: {
fields: {
id: { path: "id", type: Number },
age: { path: "age", type: Number },
name: { path: "name", type: String },
company: { path: "company", type: String },
month: { path: "month", type: Date },
isActive: { path: "isActive", type: Boolean },
email: { path: "email", type: String },
transport: { path: "transport", type: String }
}
}
},
sorting: {
multiple: true
},
rowHover: false,
columns: [
{ field: "name", title: "Person Name", width: "120px" },
{ field: "age", title: "Age", width: "80px" },
{ field: "company", title: "Company Name" },
{ field: "month", title: "Date of Birth", format: "{0:MM/dd/yyyy}", width: "120px" },
{ field: "isActive", title: "Active" },
{ field: "email", title: "Email Address", width: "250px" },
{ field: "transport", title: "Custom Editor", width: "120px", editor: myCustomEditor },
{
width: "104px",
title: "Delete Column",
buttons: [
{ cls: "deleteButton", commandName: "delete", caption: "<img src='http://www.prepbootstrap.com/Content/images/template/BootstrapEditableGrid/delete.png' /><span>Delete</span>" }
]
}
],
editing: {
enabled: true,
event: "click",
type: "cell",
confirmation: {
"delete": {
enabled: true,
template: function (item) {
return "Delete row with ID = " + item.id
}
}
}
},
events:
{
getCustomEditorValue: function (e) {
e.value = $("#dropdown").swidget().value();
$("#dropdown").swidget().destroy();
}
}
});
function myCustomEditor(cell, item) {
$('<div id="dropdown"/>')
.appendTo(cell)
.shieldDropDown({
dataSource: {
data: ["motorbike", "car", "truck"]
},
value: !item["transport"] ? null : item["transport"].toString()
}).swidget().focus();
}
});
</script>
<style type="text/css">
.sui-button-cell
{
text-align: center;
}
.sui-checkbox
{
font-size: 17px !important;
padding-bottom: 4px !important;
}
.deleteButton img
{
margin-right: 3px;
vertical-align: bottom;
}
.bigicon
{
color: #5CB85C;
font-size: 20px;
}
</style>
