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.
Unfortunately, activation email could not send to your email. Please try again.

Problem with boolean in editMode batch

Thread ID:

Created:

Updated:

Platform:

Replies:

130586 May 19,2017 04:47 AM May 22,2017 07:39 AM JavaScript 1
loading
Tags: ejGrid
Luis Carlos
Asked On May 19, 2017 04:47 AM

Hi.

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 07:39 AM

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 


CONFIRMATION

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.

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.

;