1. Home
  2. Forum
  3. jQuery
  4. ejGrid editMode batch. enable or disable the input

ejGrid editMode batch. enable or disable the input

Hi.

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

When a user click on a cell, it becomes to input. Therefore, I use the event "cellEdit" in order to manage the input.

I would like to know how I can difference between a cell was already saved (image 2) and a cell was not saved yet (image 1), when both cells have value, in order that, I can enable or disable the input.

         IMAGE 1

        IMAGE 2

6 Replies
SA Saravanan Arunachalam Syncfusion Team May 11, 2017 05:35 AM UTC

Hi Luis, 
Thanks for contacting Syncfusion’s support. 
We understood from your query that you need to know, how the edited cell different with other cells. In the batch edit mode, we can edit each cell in the Grid which are indicated by red indicator on the top left corner of that cell and these indicators are removed automatically once the edited cell values are saved. Please refer to the below documentation link. 
Note: Batch edit mode saves the bulk changes. 
If we misunderstood your query, please provide following details. 
1.       Provide clear details of your requirement. 
2.       Do you want to differenciate the saved cells? 
3.       Please provide the screenshot of expected output. 
Regards, 
Saravanan A.   


LC Luis Carlos replied to Saravanan Arunachalam May 11, 2017 07:44 AM UTC

Hi Luis, 
Thanks for contacting Syncfusion’s support. 
We understood from your query that you need to know, how the edited cell different with other cells. In the batch edit mode, we can edit each cell in the Grid which are indicated by red indicator on the top left corner of that cell and these indicators are removed automatically once the edited cell values are saved. Please refer to the below documentation link. 
Note: Batch edit mode saves the bulk changes. 
If we misunderstood your query, please provide following details. 
1.       Provide clear details of your requirement. 
2.       Do you want to differenciate the saved cells? 
3.       Please provide the screenshot of expected output. 
Regards, 
Saravanan A.   



Hi again.

 

Maybe, I did not explain well. 

 

In the next image, we can see two rows with five columns, where only the first row has been recently added. I would like the behavior was as follows:

 

When I click on the first row of the first column (cell: A), it should becomes to dropdownlist, in order to change the cell value. However, if I click on the second row of the first colum (cell: B), it shouldn't become to any type of input, in order to not change the cell value.




I hope you understand the differences between both rows and also the differences of the behaviors. 

I'll be awating for your reply, thank you again.

Best regards, 

Luis Carlos Díaz.


VN Vignesh Natarajan Syncfusion Team May 12, 2017 07:30 AM UTC

Hi Luis, 
 
Thanks for contacting syncfusion support. 
We have analyzed your query and that you want to render dropdownlist only when adding a record and disable dropdownlist when editing. We have prpared sample that can be viewed through 
While editing Dropdownlist is rendered by setting the editType property of grid columns as ej.Grid.EditingType.Dropdown. 
columns: [ 
                         { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 
                         { field: "CustomerID", headerText: 'Customer ID', width: 90 }, 
                         { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 80,editType: ej.Grid.EditingType.Dropdown, }, 
                         { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" }, 
                         { field: "ShipName", headerText: 'Ship Name', width: 150 }, 
                         { field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90 } 
                ], 
 
In cellEdit event, we have disbaled and enabled the dropdownlist using the “enable” and “disable” methods of DropDownList control. 
cellEdit: function (args) { 
                   setTimeout(function () { 
                            if (args.row.hasClass("e-insertedrow")) 
                                $("#GridEmployeeID").ejDropDownList("enable"); 
                            else  
                                $("#GridEmployeeID").ejDropDownList("disable"); 
                        }, 1); 
                   } 
Please refer the documntation for your reference. 
 
Regards, 
Vignesh Natarajan  


LC Luis Carlos replied to Vignesh Natarajan May 16, 2017 12:01 PM UTC

Hi Luis, 
 
Thanks for contacting syncfusion support. 
We have analyzed your query and that you want to render dropdownlist only when adding a record and disable dropdownlist when editing. We have prpared sample that can be viewed through 
While editing Dropdownlist is rendered by setting the editType property of grid columns as ej.Grid.EditingType.Dropdown. 
columns: [ 
                         { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 
                         { field: "CustomerID", headerText: 'Customer ID', width: 90 }, 
                         { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 80,editType: ej.Grid.EditingType.Dropdown, }, 
                         { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" }, 
                         { field: "ShipName", headerText: 'Ship Name', width: 150 }, 
                         { field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90 } 
                ], 
 
In cellEdit event, we have disbaled and enabled the dropdownlist using the “enable” and “disable” methods of DropDownList control. 
cellEdit: function (args) { 
                   setTimeout(function () { 
                            if (args.row.hasClass("e-insertedrow")) 
                                $("#GridEmployeeID").ejDropDownList("enable"); 
                            else  
                                $("#GridEmployeeID").ejDropDownList("disable"); 
                        }, 1); 
                   } 
Please refer the documntation for your reference. 
 
Regards, 
Vignesh Natarajan  


Hi again.

I have been trying to do your example on my web page, however the variable "args.row" is undefined, so I have been checking your documentation out (https://help.syncfusion.com/api/js/ejgrid#events:celledit)  and there is not any argument "row".

 

Despite of, I found the argument "cell" which it contains almost the same as "row", therefore, I would like to give  another solution.



I've used "args.cell.closest('tr').hasClass('e-insertedrow')" instead of "args.row.hasClass('e-insertedrow')".

I hope to help other people. Thank you very much.

Best regards,
Luis Carlos Díaz.


LC Luis Carlos replied to Vignesh Natarajan May 16, 2017 02:37 PM UTC

Hi Luis, 
 
Thanks for contacting syncfusion support. 
We have analyzed your query and that you want to render dropdownlist only when adding a record and disable dropdownlist when editing. We have prpared sample that can be viewed through 
While editing Dropdownlist is rendered by setting the editType property of grid columns as ej.Grid.EditingType.Dropdown. 
columns: [ 
                         { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 
                         { field: "CustomerID", headerText: 'Customer ID', width: 90 }, 
                         { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 80,editType: ej.Grid.EditingType.Dropdown, }, 
                         { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" }, 
                         { field: "ShipName", headerText: 'Ship Name', width: 150 }, 
                         { field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90 } 
                ], 
 
In cellEdit event, we have disbaled and enabled the dropdownlist using the “enable” and “disable” methods of DropDownList control. 
cellEdit: function (args) { 
                   setTimeout(function () { 
                            if (args.row.hasClass("e-insertedrow")) 
                                $("#GridEmployeeID").ejDropDownList("enable"); 
                            else  
                                $("#GridEmployeeID").ejDropDownList("disable"); 
                        }, 1); 
                   } 
Please refer the documntation for your reference. 
 
Regards, 
Vignesh Natarajan  


Hi again, Vignesh Natarajan.

First of all, thank you again for your answer.

I am using a big framework with a lot of libraries in order to create a web page which contains multiple and complexity user interfaces, therefore, I do not see your solution viable. 

I was wondering if there is another way without setTimeOut() method.

I will be awaiting for your answer.

Best regards, 
Luis Carlos Díaz. 

SA Saravanan Arunachalam Syncfusion Team May 18, 2017 11:23 AM UTC

Hi Luis, 
We have achieved your requirement by overriding the editCell method ejGrid and please refer to the below code example and jsplayground sample. 
<script type="text/javascript"> 
            $("#Grid").ejGrid({ 
                . . . 
            }); 
         
        var original = ej.Grid.prototype.editCell; 
        //Overriding the editCell method to prevent the particular field from editing 
 
        ej.Grid.prototype.editCell = function (index, fieldName) { 
            original.apply(this, [index, fieldName]); 
            //Enable or disable the input 
            if (this.getRowByIndex(index).hasClass("e-insertedrow")) 
                 $("#GridEmployeeID").ejDropDownList("enable"); 
            else  
                 $("#GridEmployeeID").ejDropDownList("disable"); 
        } 
    </script> 
 
 
Regards, 
Saravanan A. 


Loader.
Up arrow icon