<style>
.e-chkbox-wrap .e-chk-image.e-checkmark:before {
background-color: black;
}
.e-icon.e-righttick:before, .e-icon.e-checkmark:before {
color: #ffe559
}
.e-chk-image.e-icon {
background-color: black;
}
</style>
<div id="Grid"></div>
<script type="text/x-jsrender" id="columnTemplate">
{{if Verified}}
<input type="checkbox" class="success e-checkbox" checked="checked" />
{{else}}
<input type="checkbox" class="danger e-checkbox"/>
{{/if}}
</script>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
templateRefresh: "template",
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "Verified", template: "#columnTemplate", headerText: 'Checkbox', width: 75 },
]
});
});
function template(args) {
$(args.cell).find(".e-checkbox").ejCheckBox({ size: "medium" });
}
</script>
|