Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 149643 | Dec 4,2019 09:59 AM UTC | Dec 12,2019 05:54 AM UTC | ASP.NET Core - EJ 2 | 1 |
|
Tags: DataGrid |
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> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
