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