ejGrid editMode batch. enable or disable the input

[Luis Carlos]

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

[Saravanan Arunachalam]

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. 

https://help.syncfusion.com/js/grid/editing#batch--excel-like  

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.   

[Luis Carlos]

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. 

https://help.syncfusion.com/js/grid/editing#batch--excel-like  

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.

[Vignesh Natarajan]

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 

Sample: https://jsplayground.syncfusion.com/svrnch1z 

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. 

https://help.syncfusion.com/api/js/ejgrid#events:celledit  

https://help.syncfusion.com/api/js/ejdropdownlist#methods:disable  

https://help.syncfusion.com/api/js/ejdropdownlist#methods:enable  

 

Regards, 

Vignesh Natarajan  

[Luis Carlos]

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 

Sample: http://jsplayground.syncfusion.com/svrnch1z 

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. 

https://help.syncfusion.com/api/js/ejgrid#events:celledit  

https://help.syncfusion.com/api/js/ejdropdownlist#methods:disable  

https://help.syncfusion.com/api/js/ejdropdownlist#methods:enable  

 

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.

[Luis Carlos]

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 

Sample: http://jsplayground.syncfusion.com/svrnch1z 

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. 

https://help.syncfusion.com/api/js/ejgrid#events:celledit  

https://help.syncfusion.com/api/js/ejdropdownlist#methods:disable  

https://help.syncfusion.com/api/js/ejdropdownlist#methods:enable  

 

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. 

[Saravanan Arunachalam]

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> 

 

 

https://jsplayground.syncfusion.com/p42qdzbv  

Regards, 

Saravanan A.