CODEWITHSUNDEEP
javascriptjqueryjqgrid
Sam
Sam

Reputation: 2065

Add button to jqgrid column header

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) |

Thanks in advance.

Upvotes: 3

Views: 13691

Answers (3)

Oleg
Oleg

Reputation: 222017

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:

enter image description here

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

Upvotes: 16

Premanshu
Premanshu

Reputation: 626

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

Upvotes: 0

Lucas Welper
Lucas Welper

Reputation: 2696

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>');

Upvotes: 0

Related Questions