1

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"));
                });
            }

2 Answers 2

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.

2
  • 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?? Sep 18, 2013 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, 2013 at 22:24
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)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.