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.

ejGrid editMode batch. enable or disable the input

Thread ID:

Created:

Updated:

Platform:

Replies:

130389 May 10,2017 12:06 PM May 18,2017 07:23 AM JavaScript 6
loading
Tags: ejGrid
Luis Carlos
Asked On May 10, 2017 12:06 PM

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 [Syncfusion]
Replied On May 11, 2017 01:35 AM

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.   


Luis Carlos
Replied On May 11, 2017 03:44 AM

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.


Vignesh Natarajan [Syncfusion]
Replied On May 12, 2017 03:30 AM

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  


Luis Carlos
Replied On May 16, 2017 08:01 AM

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.


Luis Carlos
Replied On May 16, 2017 10:37 AM

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. 

Saravanan Arunachalam [Syncfusion]
Replied On May 18, 2017 07:23 AM

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. 


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.

;