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.

Field edit template

Thread ID:

Created:

Updated:

Platform:

Replies:

130855 Jun 7,2017 05:04 AM Jun 13,2017 04:44 AM JavaScript 8
loading
Tags: ejGrid
Nga
Asked On June 7, 2017 05:04 AM

Hi, I have a boolean field in my grid. When user add a new row, I would like to prevent edit on this field (other fields are still editable). After the record is added to the grid, user can edit this field. How to achieve that?

Thanks.

Nga
Replied On June 7, 2017 05:08 AM

The edit mode is normal.

Jayaprakash Kamaraj [Syncfusion]
Replied On June 8, 2017 05:19 AM

Hi Customer, 

Thank you for contacting Syncfusion support. 

We have achieved your requirement using actionComplete event and allowEditing columns property of ejGrid. We need to set allowEditing property as false for boolean column and then we need to remove disabled attribute and e-disable class in boolean column when args.requestType as beginedit in actionComplete event of ejGrid. Please refer to the below help document, code example and sample. 


<script type="text/javascript"> 
    $(function () { 
        $("#Grid").ejGrid({ 
            // the datasource "window.gridData" is referred from jsondata.min.js 
            dataSource: window.gridData, 
            allowPaging: true, 
            actionComplete: function (args) { 
                if (args.requestType == "beginedit") 
                    $("#" + this._id + "Verified").removeAttr("disabled").removeClass("e-disable"); 
            }, 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
            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", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 
             .. 
 
                  { field: "Verified", headerText: 'Verified', editType: ej.Grid.EditingType.Boolean, allowEditing: false, width: 90 } 
            ] 
        }); 
 
 
    }); 
 
 
</script> 


Regards, 

Jayaprakash K. 
 


Nga
Replied On June 8, 2017 10:56 AM

Thank you. Your sample works as expected.
Continue to this case, I would like to have one column displaying a button that will call custom command. I checked http://js.syncfusion.com/demos/web/#!/bootstrap/grid/columns/customcommand but the problem is: I would like the button to be displayed on some rows based on condition. How to achieve that?

Thanks.

Jayaprakash Kamaraj [Syncfusion]
Replied On June 9, 2017 02:56 AM

Hi Customer, 

We have achieved your requirement using rowDataBound event of ejGrid. In this event, we can display command button based on your condition. Please refer to the below help document, code example and sample. 


<script type="text/javascript"> 
    $(function () { 
        $("#Grid").ejGrid({ 
            // the datasource "window.employeeData" is referred from templatelocaldata.js 
            dataSource: window.employeeData, 
            enableRowHover: false, 
            allowSelection: false, 
            rowDataBound: function (args) { 
                if (args.rowData.Country == "UK") 
                    $(args.row).find(".e-detailsbutton").hide(); 
            }, 
            columns: [ 
.. 
                     { 
                         headerText: "Employee Details", 
                         commands: [ 
                             { 
                                 type: "details", 
                                 buttonOptions: { 
                                     text: "Details", 
                                     width: "100", 
                                     click: "onClick" 
                                 } 
                             } 
                         ], 
                         isUnbound: true, 
                         textAlign: ej.TextAlign.Left, 
                         width: 150 
                     } 
            ] 
        }); 
.. 
    }); 
</script> 


Regards, 

Jayaprakash K. 
 


Nga
Replied On June 11, 2017 11:56 AM

Hi, How to hide that custom Details button when user is adding or editing row?

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On June 12, 2017 08:58 AM

Hi Customer, 

You can hide the custom details button while add/edit the row by using “cssClass”  property  of the Grid. We can achieve it by giving the “display:none”  for .e-unboundcelldiv class while add/edit row. 

Please refer to the code example:- 
 
  <style> 
    .e-grid.hideEditUnbound .gridform .e-unboundcelldiv{ 
       display: none; 
    } 
  </style> 
    <script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                // the datasource "window.employeeData" is referred from templatelocaldata.js 
                dataSource: window.employeeData, 
                enableRowHover: false, 
                allowSelection: false, 
                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
               cssClass: "hideEditUnbound", 
                rowDataBound: function (args) { 
                    if (args.rowData.Country == "UK") 
                        $(args.row).find(".e-detailsbutton").hide(); 
                }, 
                columns: [ 
                      .  .  . 
                         { 
                             headerText: "Employee Details", 
                             commands: [ 
                                 { 
                                     type: "details", 
                                     buttonOptions: { 
                                         text: "Details", 
                                         width: "100", 
                                         click: "onClick" 
                                     } 
                                 } 
                             ], 
                             isUnbound: true, 
                             textAlign: ej.TextAlign.Left, 
                             width: 150 
                         } 
                ] 
            }); 
        }); 
   </script> 



Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 


Nga
Replied On June 12, 2017 11:26 AM

Thank you for your support.

Jayaprakash Kamaraj [Syncfusion]
Replied On June 13, 2017 04:44 AM

Hi Customer,  
 
Thanks for the update. 
 
Please get back to us if you need any further assistance.   
 
Regards,  
 
Jayaprakash K. 


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.

;