HI,
I have a igGrid with one requirement. In that Grid i have a two columns one is checkbox and another one is Textbox,
if checkbox is checked then next field(Textfield) should be editable and it is a mandatory field.
Thanks,
Ashok.
Hello Ashok,
Thank you for posting in our community.
What I can suggest for achieving your requirement is handling editCellStarting event. In this event you could check what is the value of the checkbox column and if false cancel editing. Please keep in mind that when the edit mode is set to "row" this event is going to be fired for every cell in this row. In order to handle this event only for the column that you are looking for you will have to check the column key of event target. Regarding the validation what I can propose is initially setting this columns required option to true. For example:
$("#grid").igGrid({ dataSource: data, primaryKey: "ID", renderCheckboxes : true, columns: [ {headerText: "ID", key: "ID", dataType: "number", hidden:true}, {headerText: "Name", key: "Name", dataType: "string" }, {headerText: "DisableEdit", key: "DisableEdit", dataType: "bool"} ], features: [ { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, columnSettings: [ { columnKey: "Name", required: true } ], editCellStarting: function (evt, ui) { var columnKey = ui.columnKey; var rowIndex = ui.rowID; var editColumnValue = $("#grid").igGrid("getCellValue",rowIndex, "DisableEdit" ); if(columnKey == "Name") { if(!editColumnValue) { return false; } } } }] }); });
I am also attaching a sample project illustrating mu suggestion for your reference. Please have a look at this sample and let me know if you have any additional questions regarding this matter.
Thanks for your reply.
I have the code on MVC. Can you tell me how to add the above mentioned functionality on ColumnUpdatingSetting method of GridUpdating function.
Attached you will find a sample project using MVC. The required functionality is achieved using the same approach with handling editCellStarting event.
Please have a look at the provided sample and let me know if you have any additional questions afterwards.
Hello Ashock,
Please let me know if you need any further assistance with this matter.
Hello Vasya,
When i check the check box then Name column need to be editable at the same time automatically.
But here after clicking Done button it is going to edit mode. Which will not work in my case.
Thank you for getting back to me.
Achieving your requirement would require some custom implementation since the new value of the checkbox is not yet going to be committed in the igGrid.
What I can suggest is manually handle the setValue call of the editor`s checkbox. There you could check what is the new value of the checkbox and trigger start editing for the other cell or respectively end edit. For example:
$.ig.EditorProviderCheckbox.prototype.setValue = function (val, updating) { origCheckboxSetValue.apply(this, [val, updating]); if (this.value) { startEditForColumn(updating); } else { endEditForColumn(updating); } };
I modified my sample and I am attaching it for your reference.
Please keep in mind that this is not supported scenario and my suggested solution contains some private functions that might be internally changed without any public notice.
Please have a look at my sample and let me know if you need any further assistance with this matter.
What I can suggest regarding your first requirement is instead of changing the prototype before the igGrid is initialized is changing it in the editRowStared event of the corresponding grid. For example:
features: [ { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, columnSettings: [ { columnKey: "Name", required: true } ], editRowStarted: function (evt, ui) { var provider, editor = ui.owner.editorForKey("DisableEdit"); provider = editor.igEditorFilter("option", "provider"); provider.setValue = modifiedSetCellValue; }, editCellStarting: function (evt, ui) { if (ui.columnKey === "Name") { if (ui.rowAdding) { return false; } return ui.owner.grid.element.igGrid("getCellValue", ui.rowID, "DisableEdit"); } } } ]
I am attaching a sample with two grids on order to illustrate that changes are applied only to the first grid without affecting the behavior of the second one.
In regards to your second query what I can suggest is handling the selectionChanging event of the combo provider in order to set the required option for particular editor. For example:
features: [ { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, columnSettings: [ { columnKey: "TestField", validation: true }, { columnKey: "Selected", editorType: "combo", editorOptions: { dataSource: cdata, valueKey: "Key", textKey: "ShouldBeMandatory", selectionChanging: function (evt, ui) { var editor = $("#grid").igGridUpdating("editorForKey", "TestField"); if (ui.items[0].data.ShouldBeMandatory === "true") { editor.igEditor("option", "required", true); } else { editor.igEditor("option", "required", false); } } } } ] } ]
Attached you will find a sample achieving the desired functionality.
I hope you find my suggestions helpful.
Please let me know if you need any further assistance regarding this matter.
Thanks Vasya
This attached solution is working fine. But in UI i am displaying more than one grid. On other grids also i have check box and it is throwing Script error like unable to find closest in the grid.
And i have one more requirement like I have a Combobox in child grid of igHieraricalGrid. when i change the text in Combobox the next column would be mandatory field.
Please suggest the possible solution in these two cases.