How to open a Popup with TextArea in JqGrid on click of an Icon?

Question

I am new to JqGrid, trying to achieve below functionality. I tried looking for a demo to open a pop up, but no luck. Please let me know if there are any demo's out there that I can refer to.

I Have a JqGrid as shown in the below image. I just added "Notes" column using below code

                {
                    name: 'Notes',
                    width: 60,
                    sortable: false, resizable: false,
                    search: false,
                    formatter: function() {
                        return "<span id='notes' class='ui-icon ui-icon-document' style='margin-left: 20px;'></span>";
                    }
                },

When Notes icon is clicked, I want to open a pop-up to add some notes, the pop up should include a TextArea, Save and Cancel buttons to save Notes.

Answer 1

You can return a button instead of the span element and have a function bound onClick event. For example :

{
                name: 'Notes',
                width: 60,
                sortable: false, resizable: false,
                search: false,
                formatter: function() {
                    return "<button onclick='OpenDialog()' style='margin-left:12px'>Pop Up Dlg</button>";
                }
            },

and then the function you need to call

function OpenDialog(){ 
    //Assuming you have Jquery Dialog already set. (http://jqueryui.com/dialog/)
    $("#myDialogBox").dialog("open");
}