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'll be awating for your reply, thank you again.
Best regards,
Luis Carlos Díaz.
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 } ], |
cellEdit: function (args) { setTimeout(function () { if (args.row.hasClass("e-insertedrow")) $("#GridEmployeeID").ejDropDownList("enable"); else $("#GridEmployeeID").ejDropDownList("disable"); }, 1); } |
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 throughWhile 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 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 throughWhile 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
<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> |