Category / Section
How to display checkbox for boolean column in Template EditMode
1 min read
Solution:
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.
- Render the Grid control.
JS
<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>
MVC
@(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(); } } }
ASP.NET
[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(); } }
2. You can bound the “Verified” field name (column) value to the checkbox element using jsrender.
JS
<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>
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