JQGrid default Search Dialog, input fields width

Question

Is there any option available in Jqgrid default search dialog to increase the width of the text box in search.

Here is the Image:

Updated Code for my search is as below:

jQuery("#subscriptions").jqGrid(
    'navGrid',
    '#pager',
    { del: false, add: false, edit: false },
    {},
    {},
    {},
    {
        multipleSearch: true,
        closeAfterSearch: true,
        beforeShowSearch: function ($form) {
            $(".searchFilter table td .input-elm").attr('style', 'width:400px');
            $('#searchmodfbox_subscriptions').width(750);
            return true;
        },
        afterRedraw: function ($form) {
            $(".searchFilter table td .input-elm").attr('style', 'width:400px');
            return true;
        }
    });

I am also using loadonce option as true in my grid therefore all my search is local and no server call is made.

Answer 1

You should change the style using the beforeShowSearch & afterRedraw event.

beforeShowSearch fires every time before the search dialog is shown and afterRedraw is fired when new search parameters are added.

I've modified the code with that. $(".searchFilter table td .input-elm") Where searchFilter is the class of the parent div and input-elm is the class of the text box. 300px is just a number I gave, feel free to change it to accommodate your change:

jQuery("#subscriptions").jqGrid(
    'navGrid',
    '#pager',
    { del: false, add: false, edit: false },
    {},
    {},
    {},
    {
        multipleSearch: true,
        closeAfterSearch: true,
        beforeShowSearch: function($form) {
           $(".searchFilter table td .input-elm").attr('style','width:300px');
           return true;
        },
        afterRedraw: function($form) {
          $(".searchFilter table td .input-elm").attr('style','width:300px');
          return true;
        }
    });