We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
Hi
I’ve seen a couple of examples of tristate checkboxes in a grid but I’m not able to get it to
work.
Do you have
a working sample of tristate checkbox in an editable grid for .Net Core?
Is it
possible to show font awesome icons or other icons instead of a checkbox?
Every state of the checkbox is represented by an icon instead of a checkbox.
|
[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> |
