|
[index.cshtml]
<ejs-grid id="Grid" dataSource="ViewBag.data" allowPaging="true" load="load" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" queryCellInfo="queryCellInfo">
<e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" ></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="Reoffering" headerText="Reoffering" editType="booleanedit" template="#chktemplate" displayAsCheckBox="true" headerTextAlign="Center" width="150" textAlign="Center"
edit="@(new {create="Create",read="Read",write="Write",destroy="Destroy" })" ></e-grid-column>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<div id="chktemplate">
<div>
<div class="fa"></div>
</div>
</div>
<script type="text/javascript">
var parentDiv;
function Create(args) {
var div = document.createElement("div");
if (args.type && args.type == "add") {
div.className = "fa fa-microphone-slash";
div.classList.add("i-uncheck");
} else {
switch (args.data.Reoffering) {
case 0:
div.className = "fa fa-microphone-slash";
div.classList.add("i-uncheck");
break;
case 1:
div.className = "fa fa-microphone";
div.classList.add("i-check");
break;
case 2:
div.className = "fa fa-minus";
div.classList.add("i-intermediate");
break;
}
}
div.addEventListener("click", checkBoxClick);
parentDiv = document.createElement("div");
parentDiv.className = "check-head";
parentDiv.append(div);
return parentDiv;
}
function Read(args) {
var changestate = args.querySelector(".fa").classList;
var val;
if (changestate.contains("i-uncheck")) {
val = 0;
} else if (changestate.contains("i-check")) {
val = 1;
} else if (changestate.contains("i-intermediate")) {
val = 2;
}
return val;
}
function Write(args) {
}
function Destroy() {
}
function queryCellInfo(args) {
// Create a checkbox with icon in the Reoffering cell
if (args.column.field == "Reoffering") {
var targetEle = args.cell.querySelector(".fa");
switch (args.data[args.column.field]) {
case 0:
targetEle.classList.add("fa-microphone-slash");
targetEle.classList.add("i-uncheck");
targetEle.classList.add("e-disabled");
break;
case 1:
targetEle.classList.add("fa-microphone");
targetEle.classList.add("i-check");
targetEle.classList.add("e-disabled");
break;
case 2:
targetEle.classList.add("fa-minus");
targetEle.classList.add("i-intermediate");
targetEle.classList.add("e-disabled");
break;
}
targetEle.addEventListener("click", checkBoxClick);
args.cell.append(targetEle);
}
}
function checkBoxClick(e) {
// Handle the checkbox click action while click that customized the checkbox
if (e.target.classList.contains("e-disabled")) {
e.stopImmediatePropagation();
e.stopPropagation();
return;
}
var cell = e.target.classList;
if (cell.contains("i-check")) {
ej.base.classList(e.target, ["i-uncheck"], ["i-check"]);
} else if (cell.contains("i-uncheck")) {
ej.base.classList(e.target, ["i-intermediate"], ["i-uncheck"]);
} else if (cell.contains("i-intermediate")) {
ej.base.classList(e.target, ["i-check"], ["i-intermediate"]);
}
}
</script>
<style>
.i-uncheck, .i-check, .i-intermediate {
height: 20px;
width: 20px;
border: 2px solid rgb(117, 117, 117);
line-height: 20px;
box-sizing:border-box;
}
.i-check::before {
content:"\f130";
}
.i-uncheck::before {
content: "\f131";
}
.i-intermediate::before {
content: "\f068";
}
i-check e-disabled {
cursor:default;
pointer-events:none !important;
}
</style> | 
