arame3333
arame3333

Reputation: 10193

JqGrid - how to make the clear search button visible?

I have a filter toolbar in my JqGrid, and the Clearfield "x" hyperlink is not showing. There is not enough room for the ui-search-clear cell to show. If I could control the size of the input textbox for the search inside the cell with the class ui-search-input then it would show. I would have thought this would work by default. So how do I fix this? My grid is defined as follows;

var populateGrid = function (data) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["No", "Company", "Trade", "Recommendation", ""],
        colModel: [
            { name: "AssessmentNo", label: "AssessmentNo", width:80, align:"center" },
            { name: "Company", label: "Company", width:400, searchoptions: { sopt: ["cn"] } },
            { name: "Trade", label: "Trade", width: 220, searchoptions: { sopt: ["cn"] } },
            { name: "Recommendation", label: "Recommendation", width: 150 },
            { name: "Links", label: "Links", search: false, align: "center" }
        ],
        cmTemplate: { width: 100, autoResizable: true },
        loadonce: true,
        forceClientSorting: true,
        rowNum: 20,
        pager: "#pager",
        gridview: true,
        ignoreCase: true,
        shrinkToFit: false,
        rownumbers: true,
        sortname: "AssessmentNo",
        viewrecords: true,
        sortorder: "asc",
        height: "100%"
    });

    grid.jqGrid("filterToolbar", {
        beforeSearch: function () {
            return false; // allow filtering
        }
    }).jqGrid("gridResize");
}

And my toolbar looks like; enter image description here

Upvotes: 4

Views: 1430

Answers (3)

djplaistow
djplaistow

Reputation: 41

I encountered the same issue, but only when the jQgrid is rendered as a subgrid. The style on the table cell containing the filter reset icon was set to one pixel. The following jQuery resolved the issue for jqGrid 4.15.5 - free:

$("td.ui-search-clear").attr('style', 'width:10px;');

Upvotes: 1

arame3333
arame3333

Reputation: 10193

I found the problem. One of my CSS style sheets had this setting;

table {
    margin: 1em;
    border-collapse: collapse;
    table-layout: inherit;
}

So I removed the margin, the problem is solved and an important lesson is learnt about generic style settings like the one above.

Upvotes: 0

Arvind Sisara
Arvind Sisara

Reputation: 861

 grid.jqGrid({

}).navGrid('#grid', {search: true}

Write search:true in your filterGrid

Upvotes: 0

Related Questions