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.
Unfortunately, activation email could not send to your email. Please try again.

Column with tri-state checkbox

Thread ID:

Created:

Updated:

Platform:

Replies:

130494 May 15,2017 11:11 PM May 16,2017 05:58 AM ASP.NET Core 1
loading
Tags: Grid
R Brian Lindahl
Asked On May 15, 2017 11:11 PM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On May 16, 2017 05:58 AM

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. 


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.

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.

;