Want to get enter key to trigger search using jqgrid

Question

I am using JQgrid and I have the search dialog always open. I would like to have the enter key start the search when it is pressed. I have tried some other solutions like using the onbeforeshowseach method in the search but then it gets rid of my always open search box. Can anyone help me figure this out? Here is my grid and search dialog code:

//Create the grid
var grid = $("#list"), prmSearch = { multipleSearch: false, overlay: false };
    var url = window.URLS.get('MySample');
    $("#list").jqGrid({
        url: url,
        datatype: 'json',
        mtype: 'POST',
        postData: {
            ignoreCurrentSelectionPage: function () { return ignoreCurrentSelectionPage; },
            groupNo: '<%= ViewBag.value1%>',
            groupType: '<%= ViewBag.value2%>'
        },
        colNames: ['Col1', 'Col2', 'Col3','Col4', 'Col5','Col6', 'Col7'],
        colModel: [
      { name: 'Col1', index: 'Col1', width: 300, align: 'center', hidden: true },
      { name: 'Col2', index: 'Col2', width: 250, align: 'left', search: true, searchoptions: { sopt: ['bw', 'ew','cn','eq', 'ne' ]} },
      { name: 'Col3', index: 'Col3', width: 240, align: 'left' , search: true, searchoptions: { sopt: ['bw', 'ew','cn','eq', 'ne'  ]}},
      { name: 'Col4', index: 'Col4', width: 100, align: 'center', search: false },
      { name: 'Col5', index: 'Col5', width: 100, align: 'center', search: false },
      { name: 'Col6', index: 'Col6', width: 100, align: 'center', search: false },
      { name: 'Col7', index: 'Col7', editable: true, edittype: 'checkbox', editoptions: { value: "yes:no" },search:false,
          formatter: "checkbox", formatoptions: { disabled: false }, align: 'center', width: 50
      },
      ],
        pager: jQuery('#pager'),
        rowNum: 15,
        rowList: [10, 15, 25, 50, 100, 500],
        sortname: 'Col2',
        sortorder: "asc",
        viewrecords: true,
        multiselect: false,
        multikey: "ctrlKey",
        caption: 'Sample',
        width: "100%",
        height: "100%",
        loadError: function (xhr, textStatus, errorThrown) {
        },
        gridComplete: function () {

            prmSearch = { multipleSearch: true, overlay: false };
            ignoreCurrentSelectionPage = true;
            $("#list").setSelection(selectedRowId, true);



            },

    }).navGrid('#pager', 
        { edit: false, add: false, del: false, search: true, refresh: true },
        {},  //  default settings for edit
        {}, //  default settings for add
        {},  // delete instead that del:false we need this
        {overlay:0}, // search options
        {}, /* view parameters*/
        prmSearch);
        // create the searching dialog 
        grid.searchGrid(prmSearch);
        // find the div which contain the searching dialog 
        //var searchDialog = $("#searchmodfbox_" + grid[0].id);
        var searchDialog = $("#searchmodfbox_" + grid[0].id);
        // make the searching dialog non-popup 
        searchDialog.css({ position: "relative", "z-index": "auto"});
        searchDialog.addClass("ui-jqgrid ui-widget ui-widget-content ui-corner-all");
        searchDialog.css({ position: "relative", "z-index": "auto", float: "left"});
        var gbox = $("#gbox_" + grid[0].id);
        gbox.before(searchDialog);
        gbox.css({ clear: "left"});
        //remove the empty span in the search dialog box.
        //we may need to re-add this is advanced searching is turned on
        $("#fbox_list").find('span:empty').parent().remove();

        //remove the empty span in the search dialog box.
        //we may need to re-add this is advanced searching is turned on
        $("#fbox_list").find('span:empty').parent().remove();

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

I answered to the question here. The corresponding demo is here. I suppose that the answer is not easy to find per searching because the words "search", "dialog" and "enter" are too common.

edited May 23 '17 at 12:20

Community

1
1

answered Apr 04 '12 at 14:08

Oleg

220,925
34
403
798

@JPiasente: I can't reproduce the problem which you describe. Which version of IE you use? Could you describe the steps exactly. It's important which field you modify as the last. The control will have the focus. [The demo](http://www.ok-soft-gmbh.com/jqGrid/SearchOnEnter.htm) start searching on Enter only if the focus is on the data field (input or select). It it's your problem you should read the comments from [the answer](http://stackoverflow.com/a/9659066/315935). In the comments I describe how one can bind `keydown` event to **all** controls if it's needed. – Oleg Apr 06 '12 at 17:32
@JPiasente: I tried one more time [the demo](http://www.ok-soft-gmbh.com/jqGrid/SearchOnEnter.htm) which reference I posted in IE8 and it works without any problem. You wrote about "Description" and "Center". So I suppose that there are problem in *your* code. I suppose that the part with overwriting of `onChange` you didn't implemented. – Oleg Apr 06 '12 at 19:19
@JPiasente: I shown in [the demo](http://www.ok-soft-gmbh.com/jqGrid/SearchOnEnter.htm) which I multiple referenced above how to overwrite *internal* method `onChange`. You wrote: "if I change my search field to another field (change from description, to creator) in IE and then hit enter, it seems like it will not fire the search". I understand that "Description" and "Center" are in **your** code and not in my demo. **Try the same in my demo**. You will see that it works correctly. So you should compare your code with the code of my demo to find the differences. – Oleg Apr 10 '12 at 15:14

Want to get enter key to trigger search using jqgrid

1 Answers1