1. Home
  2. Forum
  3. ASP.NET Core
  4. Column with tri-state checkbox

Column with tri-state checkbox

Is it possible to use a tri-state checkbox in a grid? If so, what do the values need to be in the datasource?

1 Reply
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 16, 2017 09:58 AM UTC

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. 


Loader.
Up arrow icon