CODEWITHSUNDEEP
jqgrid
Kamayani
Kamayani

Reputation: 47

adding button adjacent to filter toolbar

the button should be exactly in the same row as the filter toolbar text boxe exactly after the filter toolbar ends i.e. i want a button exatly in the same row as the filter toolbar text boxes. i tried this but it is not working

$('#gridTable').after("div.ui-jqgrid-view").find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-search-toolbar").each(function () {
        $('<button>').css({ float: "right", height: "16px", width: "16px" }).appendTo(this).button({
            icons: { primary: "ui-icon-refresh" },
            text: false,
            title: "Clear Filters"
        }).click(function (e) {
            alert("hi");
                   });
    });

Upvotes: 1

Views: 2238

Answers (2)

Wooya
Wooya

Reputation: 23

Try this: 

$(".ui-search-toolbar th:last").find("div:first").html("<button id='button' style='width:20px;height:20px' title=''>Button<\/button>");

Upvotes: 0

Oleg
Oleg

Reputation: 221997

jqGrid don't support currently stype: "custom" in searching toolbar (only in Searching Dialog). So to add custom element like button in the searching toolbar you have to do following. First of all one need to have place in the searching toolbar for the custom element. If you want to have button at the end of searching toolbar you can add dummy last column in the grid (in colModel):

{ name: 'sbutton', width: 20, fixed: true, search: false, sortable: false }

The definition will place empty div inside of the searching toolbar over the column. To place button in the div one can use for example the following code

var $th = $($grid[0].grid.hDiv).find(".ui-jqgrid-htable>thead>.ui-search-toolbar>th:nth-child(" +
        $grid[0].grid.headers.length + ")");
$th.find(">div").append($("<button id='mySearch' style='margin-top:1px;height:20px;width:20px'></button>").button({
    text: false, icons: {primary: "ui-icon-search"}
}));

where $grid defined like var $grid = $("#gridId");.

The demo demonstrate the approach:

enter image description here

Upvotes: 1

Related Questions