adding button adjacent to filter toolbar

Question

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

Please show printscreen of the way your jqgrid looks now because it's not clear from the code you've posted.. — Greg Oks, Feb 11 '13 at 16:53

score 1 · Accepted Answer · answered Feb 12 '13 at 13:15

1

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

answered Feb 12 '13 at 13:15

Oleg

220,925
34
403
798

thansk a lot for your effort and reply Oleg. Your answers are all over the net for jquery. It has really helped me understand jqgrid. You truly are a genius. For this requirement though my requirement changed after posting the question. Also i wanted to put button on an existing column with search as false. I am sure this demo of urs will be useful in future. – Kamayani Mar 01 '13 at 08:21
@Oleg Can I do something like when I click search the icon get pressed and again when I click on the icon it returns to normal unclicked style with setting the search attributes in the search filter bar to blank??..It would be a great help if you reply on this coz when you reply the work is done :) – Pravat Panda Jun 17 '13 at 21:40
@Oleg I think we can keep the search button pressed for the first click on it, and then on the second click(when search button is still pressed) we can call reload on grid. Please suggest and it would be kind of you if you can change the above demo accordingly. – Pravat Panda Jun 17 '13 at 21:56
@Oleg I read that adding ui-button-disable class to a button will prevent it from clickable in jqgrid, so adding a custom class will do the work? – Pravat Panda Jun 17 '13 at 23:01

score 0 · Answer 2 · answered Feb 23 '13 at 19:13

0

Try this:

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

answered Feb 23 '13 at 19:13

Wooya

23
4

adding button adjacent to filter toolbar

2 Answers2

Linked