Column with tri-state checkbox
1 Reply
Hi Brian,
Thanks for contacting Syncfusion Support.
ejCheckBox control of the Syncfusion supports the tristate. Refer to the following API Reference.
So, the respective column must hold values check, uncheck and intermediate as shown in the following screenshot. To bind these values as a checkbox with the tri-state, we will use the Template property of the Grid Columns and TemplateRefresh event.
Refer to the following code example and API References.
|
<script type="text/x-jsrender" id="coltemp">
<input type="checkbox" id="{{:OrderID}}" disabled="disabled" />
</script>
@{Html.EJ().Grid<object>("Grid")
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
col.Field("State").Template("#coltemp").EditTemplate(temp =>
{
temp.Create("create")
.Read("read")
.Write("write");
}).HeaderText("State").Add();
})
.ClientSideEvents(eve =>
{
eve.TemplateRefresh("templateRefresh");
}).Render();
}
<script>
function templateRefresh(args) {
if (!$(args.cell).find("input").hasClass("e-checkbox"))
$(args.cell).find("input").ejCheckBox({
enableTriState: true,
checkState: args.data["State"]
})
}
</script> |
To edit the same column in the Grid, you can use the EditTemplate. Refer to the show case demo and API References.
|
@{Html.EJ().Grid<object>("Grid")
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
col.Field("State").Template("#coltemp").EditTemplate(temp =>
{
temp.Create("create")
.Read("read")
.Write("write");
}).HeaderText("State").Add();
})
.ClientSideEvents(eve =>
{
eve.TemplateRefresh("templateRefresh");
}).Render();
}
<script>
function create(args) {
return "<input>"
}
function read(args) {
return args.ejCheckBox("model.checkState");
}
function write(args) {
args.element.ejCheckBox({
enableTriState: true,
checkState: args.rowdata !== undefined ? args.rowdata["State"] : "uncheck"
});
}
</script> |
Refer to the following sample demo.
Regards,
Seeni Sakthi Kumar S.
SIGN IN To post a reply.
