How to display checkbox for boolean column in Template EditMode

<div id="Grid"></div>
<script type="text/javascript">
    $(function () {// Document is ready.        
        $("#Grid").ejGrid({
            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  }, 
              ]
    });
    });
</script>
 

@(Html.EJ().Grid<object>("Grid")            
            .Datasource((IEnumerable<object>)ViewBag.data))
            .AllowPaging() 
            .EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting().EditMode(EditMode.Dialog))
            .ToolbarSettings(toolbar =>
            {
                toolbar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Add);
                    items.AddTool(ToolBarItems.Edit);
                    items.AddTool(ToolBarItems.Delete);
                    items.AddTool(ToolBarItems.Update);
                    items.AddTool(ToolBarItems.Cancel);
                });
            })
      })
            .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("Freight").Width(100).Format("{0:C}").Add();                
                col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add(); 
               col.Field("Verified").HeaderText("Verified").Width(100).Add();                
          })
)
[Controller]
namespace EJGrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var DataSource = OrderRepository.GetAllRecords();
            ViewBag.data = DataSource;
            return View();
        }        
    }
}

[aspx]
<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>           
            <Columns>
                <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" />                
             </Columns>
</ej:Grid>  
[CS]
public partial class _Default : Page
{    
    protected void Page_Load(object sender, EventArgs e)
    {
            this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;
            this.OrdersGrid.DataBind();
    }
}

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