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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tristate checkbox in grid

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
loading
Tags: DataGrid
Stefan
Asked On December 4, 2019 09:59 AM UTC

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 [Syncfusion]
Replied On December 12, 2019 05:54 AM UTC

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> 


Help Documentation: 

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

Regards, 
Thavasianand S. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon