jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Enabling toolbar search icons/graphics

Tags: toolbar search

20/05/2013
01:47

rbsorensen

Member

Members

Forum Posts: 4

Member Since:
02/05/2013

Offline

Hi,

I am using the toolbar search facility in one of my grids and would like to enable the display of the icon/graphic for selecting the operation type ("=" for "eq", "<" for "lt" etc.) Two questions:

1. How do I turn on the display of these graphics?

2. How do I enable the selection of a different search operation from the list of operations allowed for a column?

Thank you

20/05/2013
11:07

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

You may need to look at demo

Open Searching and then Toolbar with Operations

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/05/2013
17:42

rbsorensen

Member

Members

Forum Posts: 4

Member Since:
02/05/2013

Offline

In regard to the demo, I have looked at it, and have implemented the features that, according to the instructions and example on the page, are necessary for toolbar searching, as follows:

1. Adding a "searchoptions:{sopt:['eq',...]}" item to the colModel field definition.

2. Including a "$('#mylist').jqGrid('filterToolbar',{searchOperators : true});" line to show the toolbar.

BTW, "search: true" is missing from the colModel in the example code on the page

When I implement the above logic in my page, the search fields appear, and can be used to submit a search to the server. But there are no operator selection graphics displayed on the left side of each search text box.

So I am missing something, but am not sure what it is.

05/07/2013
11:32

dgeyzonne

New Member

Members

Forum Posts: 2

Member Since:
05/07/2013

Offline

Hi,

I have the same problem : I put searchoptions in colmodel and searchOperators:true in filterToolbar but there is no icon operator that appears on the left side of the search textbox.

Below, css and js files that I use :

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.24.custom.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.searchFilter.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="js/jquery-ui.js" type="text/javascript"></script>

<script src="js/ui.multiselect.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-fr.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="js/jquery.searchFilter.js" type="text/javascript"></script>

Here is my code:

<div id="div_data" align="center">

<table id="tab"></table>

<div id="pager"></div>

</div>

<script>

var aWidth = document.getElementById("div_data").offsetWidth -20;

jQuery("#tab").jqGrid({

url:'log-data.php',

datatype: "json",

mtype: "POST",

height: '100%',

rowNum: 20,

rowList:[20,50,100,200,400,800,1500],

gridview: true,

width: aWidth,

toppager: true,

pager: '#pager',

viewrecords: true,

sortname: "Id",

sortorder: "desc",

sortable: true,

colNames:['ID', 'Date Heure', 'Utilisateur connecté', 'Login cible', 'Texte', 'Nécess. Transf.'],

colModel:[

{name:'Id', index:'Id', hidden:true},

{name:'Time', index:'Time', align:"center", width:"80"},

{name:'User', index:'User', align:"center", width:"100"},

{name:'Dest', index:'Dest', align:"center", width:"100", search:true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},

{name:'Comment',index:'Comment',align:"left", width:"200"},

{name:'Flag', index:'Flag', align:"center", width:"60"}

]

});

jQuery("#tab").jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:false,refresh:false});

jQuery("#tab").jqGrid('navButtonAdd','#pager',{

caption: "Colonnes",

title: "Réorganiser les colonnes",

onClickButton : function (){

jQuery("#tab").jqGrid('columnChooser');

}

});

jQuery("#tab").jqGrid('filterToolbar', {stringResult:true, searchOnEnter:false, searchOperators:true, defaultSearch : "cn"});

$(".ui-jqgrid-sortable").css('white-space', 'normal');

$(".ui-jqgrid-sortable").css('height', 'auto');

$(".ui-jqgrid tr.jqgrow td").css('white-space', 'normal');

$(".ui-jqgrid tr.jqgrow td").css('height', 'auto');

</script>

Maybe i forgot a js or css file ? please help me i didn't find anything... :'(

09/07/2013
16:56

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thanks. Will chek your code.

Can you pleaase check if you have the latest css and JS files. Note that the language file should be replaced too.

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

10/07/2013
10:56

dgeyzonne

New Member

Members

Forum Posts: 2

Member Since:
05/07/2013

Offline

Hi,

you were right, I downloaded new JS and CSS files and now it works very well !

Thanks !

10/07/2013
12:51

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Glad to hear this. Thank you.

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.