Tristate checkbox in grid

[Stefan]

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.

[Thavasianand Sankaranarayanan]

Hi Stefan, 

Greetings from Syncfusion support, 

Query #1: Do you have a working sample of tristate checkbox in an editable grid for .Net Core? 

 

By default, EJ2 Checkbox Component is not user interaction support in tristate mode. 

 

Query #2: 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.  

 

Yes, we have achieved the tristate behavior in the Grid editing using cellEditTemplate feature in the Grid and we have bound the tristate with icons in the Grid column using columnTemplate with queryCellInfo event of EJ2 Grid. you can do the CRUD operation with checkbox editing in the Grid column with customized the icons based on checkbox state instead of checkbox. Please refer the below code example, sample and Documentation for more information. 

[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> 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/149643/ze/EJ2Grid-customsample437646569.zip 

Help Documentation: 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/?no-cache=1#column-template 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

https://ej2.syncfusion.com/documentation/api/grid/#querycellinfo 

Please get back to us, if you need further assistance. 

Regards, 

Thavasianand S.