0

I'm using jqGrid verison 4.5.0 and I noticed by default, the pop-up single field search dialog doesn't look like this:

enter image description here

Is there a way to move "+" button to the right of "-" button and move match-rule dropdown to the bottom, both of them to look like this snapshot? We like it this way as it is less messy to some of our customers.

Many thanks..

JQuery v2.0 JQuery-UI v1.10.3 jqGRID v4.5.0

$('#Spreadsheet').navGrid('#Pager', 
{edit:false,add:false,del:false,search:true,view:false,refresh:false}, 
{}, {}, {}, 
{multipleSearch:true,multipleGroup:true,closeOnEscape:true,closeAfterSearch:true,
    searchOnEnter:true,showQuery:false,width:800,caption:"Search Records"
}, 
{}
Oleg
  • 220,925
  • 34
  • 403
  • 798
fletchsod
  • 3,560
  • 7
  • 39
  • 65
  • [single field search](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching) dialog contains *no* "+" or "-" buttons. Do you use `multipleSearch: true` and `multipleGroup: true`? – Oleg May 15 '13 at 05:46
  • One use "single field search" only in case of `multipleSearch: false, multipleGroup: false`. If you use `multipleSearch: true` then the created dialog are named as "Advanced Searching". It's the terminology used in jqGrid documentation. The code which you posted contains syntax error: `closeAfterSearch:true:searchOnEnter:true` must be fixed to `closeAfterSearch:true,searchOnEnter:true`. Moreover you wrote that you use `multipleGroup:false`, but posted the code with `multipleGroup:true`. – Oleg May 15 '13 at 13:50
  • Moreover I really can't understand what you mean with "to move "+" button to the right of "-" button and move match-rule dropdown to the bottom". There are **only one** "+" button and multiple "-" (one "-" for exiting rule). It could be **multiple** "match-rule dropdown". Where you want to have all there? Probably what you really need is something like in [the answer](http://stackoverflow.com/a/10062849/315935)? – Oleg May 15 '13 at 13:54
  • Okay, I updated the script here and we're gonna stick w/ multipleGroup:true for now. Okay, forget what I said. (It is hard for me to type on a different computer since the original computer, w/ source code, have no Internet access.) If you look at the "+" button and the "match [all >] rules" dropdown selection in both picture, you'll see they are in wrong position. I want them in http://www.bhph.com/zsnapshot1.png to look like this in http://www.trirand.com/jqgridwiki/lib/exe/detail.php?id=wiki%3Afeatures&media=wiki:advsearch.png . Thanks... – fletchsod May 15 '13 at 14:04
  • I tried to explain you that [old style dialog](http://www.trirand.com/jqgridwiki/lib/exe/detail.php?id=wiki%3Afeatures&media=wiki:advsearch.png) not exist more. There are **absolutely new code** since many last versions of jqGrid. I don't understand *why* you find the position of "match [all >] rules" dropdown *wrong*? What should do *multiple* "+" button in the same group? Do you looked in dialog from [the asnwer](http://stackoverflow.com/a/10062849/315935) which I referenced in my last comment? – Oleg May 15 '13 at 14:21
  • Oh, I didn't know the old style dialog doesn't exists anymore. Nobody mentioned that before. Okay, I think I can keep the "+" button position for now. So, 2 questions left. What is the purpose of "all"/"any" dropdown option? Is there a way to hide that dropdown selection? Most of our customers aren't very smart and it is too confusing to them. I can hide that to make it easier for the customer to use. Thanks. – fletchsod May 15 '13 at 14:37
  • I want be sure that I understand you correctly. Do you want to use `multipleGroup:false` and use *always* only "ALL" (AND) operation, so you want to hide the dropdown which allows the user to choose between "All/Any"? – Oleg May 15 '13 at 14:44
  • Yes. You got all of the questions right. – fletchsod May 15 '13 at 15:04

1 Answers1

1

After some discussion in the comment we clarified that the The searching dialog are used with options multipleSearch: true, but without multipleGroup: true. The goal is the hiding of the dropdown which allows the user to choose between "All/Any".

In the answer I showed how one can use afterRedraw to change Searching Dialog.

The demo displays the dialog in the form

enter image description here

It uses the following afterRedraw

afterRedraw: function () {
    $("input.add-rule", this)
        .button()              // use jQuery UI button
        .val("Add rule");      // change text of "+" button
    $("input.delete-rule", this).button(); // use jQuery UI button
    $("select.opsel", this).hide();
}

Only the last line ($("select.opsel", this).hide()) is really important. Other lines just improve a little the look of the Searching Dialog.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Oh wow! That looks great. It is the afterRedraw object you were trying to say. Nice. I like it. Thanks man! – fletchsod May 15 '13 at 19:54
  • @fletchsod: You are welcome! To be exact `afterRedraw` it's callback function and not an object, but the terminology is not really important. The callback `afterRedraw` is the best place of customization of Searching Dialog: you can change the style of buttons, the text of buttons move the buttons on another place if it's really needed or hide some buttons and so on. The demo which I created for you just demonstrate an example of such customization. How you can see the code is very simple and you can implement the most of your requirements in the way. – Oleg May 15 '13 at 20:07