Adding a custom icon to jqgrid action column with onclick event

Question

Here is a demo to add a custom icon in Actions column of jQgrid. In my case if I add 3 rows gridComplete is called 3 times. So I am getting 3 custom Icons in 1st row , 2 in 2nd row and 1 in 3rd row. Is there anyway we can add custom Icons based on Row and Column???

gridComplete: function () {
                var iCol = getColumnIndexByName(grid, 'act');
                $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
                    .each(function() {
                        $("<div>", {
                            title: "Custom",
                            mouseover: function() {
                                $(this).addClass('ui-state-hover');
                            },
                            mouseout: function() {
                                $(this).removeClass('ui-state-hover');
                            },
                            click: function(e) {
                                alert("'Custom' button is clicked in the rowis="+
                                    $(e.target).closest("tr.jqgrow").attr("id") +" !");
                            }
                        }
                      ).css({"margin-right": "5px", float: "left", cursor: "pointer"})
                       .addClass("ui-pg-div ui-inline-custom")
                       .append('<span class="ui-icon ui-icon-document"></span>')
                       .prependTo($(this).children("div"));
                });
            }

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

Look at the modified demo created for the answer. It uses jqGrid 4.4.4, but the same code (see the demo) works for jqGrid 4.5.2 too.

edited May 23 '17 at 11:57

Community

1
1

answered Sep 18 '13 at 19:05

Oleg

220,925
34
403
798

Thank you Oleg! I successfully added the custom icon using the above Demo. Is there anyway we could open a pop up(with Textarea and save, cancel buttons) onclick of that custom icon. So that user enters some notes in text area and when he click save I want to save it to some hidden column?? – Naveen Reddy Sep 18 '13 at 21:56
@minnu4515: You are welcome! In the demo I bound separate `click` event handler and calls `alert`. Additionally I shown how to get `rowid` from the `e` parameter of the event. So you can display any jQuery UI Dialog or some other popup and call `setCell` or `setRowData` to modify jqGrid column in the same row (a hidden row too). You need just use `rowid`. So I don't see any problem in implementing your requirements. – Oleg Sep 18 '13 at 22:24

score 0 · Answer 2 · answered Sep 18 '13 at 17:42

0

I think there is an error in the line:

$(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")

should be

$(this).find("tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")

(removing the ">" before the tbody)

answered Sep 18 '13 at 17:42

Mark

3,123
4
20
31

Adding a custom icon to jqgrid action column with onclick event

2 Answers2