CODEWITHSUNDEEP
jqgrid
arame3333
arame3333

Reputation: 10193

Free JqGrid - width of search filters

I am using the free JqGrid, and the problem I have is that the search filter fields do not lengthen to fit the width of the column, as you can see for the title below. How do I achieve this? enter image description here

The grid is created by the following code;

$(function () {
    getGrid();
});

var populateGrid = function (data) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["Contract No", "Title", ""],
        colModel: [
            { name: "FullContractNo", label: "FullContractNo", width: 80, align: "center" },
            { name: "ContractTitle", label: "ContractTitle", width: 500, searchoptions: { sopt: ["cn"] } },
            { name: "Link", label: "Link", width: 60, search: false, align: "center" }
        ],
        cmTemplate: { autoResizable: true },
        rowNum: 20,
        pager: "#pager",
        shrinkToFit: true,
        rownumbers: true,
        sortname: "FullContractNo",
        viewrecords: true
    });

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

var getGrid = function () {
    var url = GetHiddenField("sir-get-selected-contract-list");
    var callback = populateGrid;
    dataService.getList(url, callback);
}

Upvotes: 0

Views: 190

Answers (1)

Oleg
Oleg

Reputation: 221997

The most easy way to set the width of the searching field is the usage of attr property of searchoptions:

{
    name: "ContractTitle",
    label: "ContractTitle",
    width: 500,
    searchoptions: {
        sopt: ["cn"],
        attr: { style: "width:100px;" }
    }
}

In the way one can set any attribute on the searching field, inclusive style attribute.

Upvotes: 1

Related Questions