Hi Luis,
Thanks for contacting Syncfusion support.
To achieve your requirement, use columnTemplate and editTemplate feature of ejGrid. In columnTemplate HTML templates can be specified in the template property of the particular column as a string (HTML element). In Grid we have update the dataSource as “S” and “N” for the verified(checkbox) column and using this value we have specified the HTML templates in columnTemplate.
Find the code example:
<script type="text/x-jsrender" id="template"> {{if Verified == "S" }} <div> Si </div> {{else}} <div> No </div> {{/if}} </script> <script type="text/javascript"> $(document).ready(function () { var element = $("#Grid"); element.ejGrid({ dataSource: [{ OrderID: 100, CustomerID: "SDSFH", Verified: "S" }, { OrderID: 101, CustomerID: "ASSFG", Verified: "N" }, ----------], allowPaging: true, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: "true", editMode: "batch" }, columns: [ { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 }, { field: "CustomerID", headerText: "Customer ID", width: 120 }, { field: "Verified", headerText: "Verified", template: "#template", width: 90, ----------------------------- } ] }); }); </script>
|
In this you also mentioned that you need to display the checkbox while editing the column. To achieve this, use editTemplate feature of ejGrid. On editing the column values, custom editor can be created by using editTemplate property of columns.
Create – It is used to create the control at the time of initialize.
read - It is used to read the input value at the time of save.
write – It is used to assign the value to control at the time of editing.
In create function we render the input element and in write function we render the ejCheckBox based on the value of Verified column.
Find the code example:
| element.ejGrid({ dataSource: [{ OrderID: 100, CustomerID: "SDSFH", Verified: "S" }, -------], allowPaging: true, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: "true", editMode: "batch" }, ------------------------------- columns: [ --------------------------- { field: "Verified", headerText: "Verified", template: "#template", width: 90, editType: ej.Grid.EditingType.Boolean, textAlign: ej.TextAlign.Right, editTemplate: { create: function () { return "<input type='checkbox'>"; }, read: function (args) { var value = args.ejCheckBox("model.checked") ? "S" : "N" return value; }, write: function (args) { if (args.rowdata.Verified == "S") args.element.ejCheckBox({ checked : true }); else args.element.ejCheckBox({ checked: false }); } }, width: 90 } ] }); }); |
Refer to the Help documents.
Regards,
Prasanna Kumar N.S.V
