Articles in this section
Category / Section

How to display checkbox for boolean column in Template EditMode

1 min read


You can display checkbox for boolean column in Template EditMode by using jsrender.

The following code example shows how to display checkbox for boolean column in DialogTemplate EditMode.

  1. Render the Grid control.


<div id="Grid"></div>
<script type="text/javascript">
    $(function () {// Document is ready.        
            dataSource: window.gridData, 
            allowPaging: true,
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: ej.Grid.EditMode.Dialog, dialogEditorTemplateID: "#template" },
            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
            columns: [
                      { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 100} ,
                      { field: "CustomerID", headerText: "Customer ID", width: 130 },
                      { field: "Freight", headerText: "Freight", width: 100, format: "{0:C}" },                      
                      { field: "ShipCountry", headerText: "Ship Country", width: 100  }, 
                      { field: "Verified", headerText: "Verified", width: 100  }, 



            .EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting().EditMode(EditMode.Dialog))
            .ToolbarSettings(toolbar =>
                toolbar.ShowToolbar().ToolbarItems(items =>
            .Columns(col =>
            {                     col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true). TextAlign(TextAlign.Right).Width(100).Add();
                col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();                
                col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add(); 
namespace EJGrid.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            var DataSource = OrderRepository.GetAllRecords();
   = DataSource;
            return View();



<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >  
             <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Dialog" , dialogEditorTemplateID: "#template" ></EditSettings>
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>           
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True"/>                
                <ej:Column Field="CustomerID" HeaderText="Customer ID" />
                <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
                <ej:Column Field="ShipCountry" HeaderText="Ship Country" />
                 <ej:Column Field="Verified" HeaderText="Verified" />                
public partial class _Default : Page
    protected void Page_Load(object sender, EventArgs e)
            this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;


2.  You can bound the “Verified” field name (column) value to the checkbox element using jsrender.


<script id="template" type="text/template">
    <b>Order Details</b>
    <table cellspacing="10" style="width:450px">
            <td style="text-align: right;">
                Order ID
            <td style="text-align: left">
                <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" />
            <td style="text-align: right;">
                Customer ID
            <td style="text-align: left">
                <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" style="width: 116px; height: 28px" />
            <td style="text-align: right;">
            <td style="text-align: left">
                {{if Verified}}
                <input type="checkbox" id="Verified" name="Verified" checked="checked" class="e-field e-checkbox" style="width:30px" />
                <input type="checkbox" id="Verified" name="Verified" class="e-field e-checkbox" style="width:30px" />


The following output is displayed as a result of the above code example.


Figure: Display the checkbox for Verified column (Boolean column) in DialogTemplate Editmode



Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment