Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Arden Williams
110
Button within an editable igGrid causes the edit mode to fire when clicked
posted

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?

Parents
No Data
Reply
  • 1080
    Verified Answer
    Offline posted

    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

Children