I have an igGrid setup like follows:
var buttonTemplate = '<button onclick="doSomething()">My Button</button>'; $('#myGrid').igGrid({ columns: [ { headerText: "Button", key: "Button", template: buttonTemplate } ], dataSource: myDataSource, features: [ { name: "Updating", editMode: "row", columnSettings: [ { columnKey: "Button", editorOptions: { disabled: true } } ] } ] });
Basically, I would like to be able to click on the button that is rendered in the grid column 'Button', without triggering this edit row event. Any suggestions as to how I can achieve this?
Hi Arden,
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Awesome, works great. Thanks!
Hello Arden,
Thank you for posting in our community.
You have to specify the column where the button is located to be readOnly in the columnSettings definition. Example:
features: [ { name: "Updating", editMode: "row", columnSettings: [ { columnKey: "Button", readOnly: true } ] } ]
However the rowEditStarting event will still fire. To cancel entering edit mode when the button cell is clicked, you can make a check if the column index of the cell that fired the event is the one with the button. In that case the event can be canceled and the grid will not enter edit mode for the other cells in this row. Example:
features: [ { name: "Updating", editMode: "row", columnSettings: [ { columnKey: "Button", readOnly: true } ], editRowStarting: function (evt, ui) { if (evt.currentTarget.cellIndex === 0) return false; } } ]
Attached you will find a small sample illustrating my suggestion for your reference. Please test it on your side and let me know whether it helps you achieve your requirement.
6012.Sample.zip