Add button to jqgrid column header

Question

Is there a way to add a button just next to column header? lets say just after the \'Sort indicators\' ?

for a example

| Id (button) | Name (button) |

Answer 1

I suppose that you knows that you can include HTML markup in the column headers. One should just place HTML fragment instead of the text in the colNames. I suppose that you want to add in all column headers some button with an icon and do some custom actions if the button are clicked.

You can implement the requirement in many ways. In the demo I show just one from many possible implementation:

on clicking on the custom button an alert will be displayed which shows the name of the column which header was clicked.

The corresponding code is

var $grid = $("#list");
//... here the grid will be created
$grid.closest("div.ui-jqgrid-view").find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-jqgrid-labels > th.ui-th-column > div.ui-jqgrid-sortable")
    .each(function () {
        $('<button>').css({float: "right", height: "17px"}).appendTo(this).button({
            icons: { primary: "ui-icon-gear" },
            text: false
        }).click(function (e) {
            var idPrefix = "jqgh_" + $grid[0].id + "_",
                thId = $(e.target).closest('div.ui-jqgrid-sortable')[0].id;
            // thId will be like "jqgh_list_name"
            if (thId.substr(0, idPrefix.length) === idPrefix) {
                alert('Clicked the button in the column "' + thId.substr(idPrefix.length) + '"');
                return false;
            }
        });
    });

Answer 2

.append may be helpful. Add a class to the column and then append button to that with requisite css.

Answer 3

In the past, I have used jquery to add a button to the header. Where my column name was "id":

$('#gs_id').after('<button id="clear_filters" class="button blue">Reset</button>');