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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Problem with boolean in editMode batch

Thread ID:





130586 May 19,2017 08:47 AM UTC May 22,2017 11:39 AM UTC JavaScript 1
Tags: ejGrid
Luis Carlos
Asked On May 19, 2017 08:47 AM UTC


I must use component "ejGrid" with editMode = "batch".

The last colum is a boolean, and it has a special behaviour.

The value could be 'S' or 'N'.

The final user see it like 'Si' or 'No'.

The edit mode has to show a checkbox cheked or uncheked.

How can I do it? I was loking for in the documentation and communitiy forums, but I could find anything related ti this problem.

I will be awaiting for your reply, thanks in advance.

Best regards,
Luis Carlos Díaz.

Prasanna Kumar Viswanathan [Syncfusion]
Replied On May 22, 2017 11:39 AM UTC

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> 
          <div> No </div> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            var element = $("#Grid"); 
                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,  

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:  
                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 }); 
                                        args.element.ejCheckBox({ checked: false }); 
                            }, width: 90 
Refer to the Help documents.  

Prasanna Kumar N.S.V 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon