Guriddo » Topic: jqGrid: search: no pop up

jqGrid: search: no pop up

Guriddo
jqgrid, search
jqGrid: search: no pop up

Tagged: jqgrid, search

This topic has 4 replies, 2 voices, and was last updated 8 years ago by publicGenome.

Creator

Topic

November 10, 2015 at 5:32 pm #124504

publicGenome

Participant

Hi JS-ers,

I’m new to web development, JQuery, jqGrid. Kindly bear with me. I’ve a grid displaying data from database. Data looks fine. But when I try to enable search button, it doesn’t work.
My header looks like:



&lt;!--  &lt;script type=&quot;text/javascript&quot; src=&quot;http://localhost/learn_routing/public/js/jquery.js&quot;&gt; &lt;/script&gt; --&gt;

&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;http://localhost/learn_routing/public/js/grid.locale-en.js&quot; type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
 
// ]]&gt;&lt;/script&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;script src=&quot;http://localhost/learn_routing/public/js/jquery.jqGrid.min.js&quot; type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
 
// ]]&gt;&lt;/script&gt;
&lt;script src=&quot;http://localhost/learn_routing/public/js/grid.common.js&quot; type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
 
// ]]&gt;&lt;/script&gt;
&lt;script src=&quot;http://localhost/learn_routing/public/js/grid.filter.js&quot; type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
 
// ]]&gt;&lt;/script&gt;
&lt;script src=&quot;http://localhost/learn_routing/public/js/grid.formedit.js&quot; type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
 
// ]]&gt;&lt;/script&gt;

&lt;script src=&quot;http://localhost/learn_routing/views/test/js/test.js&quot; type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
 
// ]]&gt;&lt;/script&gt;

// ]]></script>

// ]]></script>

// ]]></script>

// ]]></script>

// ]]></script>

// ]]></script>

My JS code looks like:


$(&quot;#grid_illume&quot;).jqGrid({

url:&#039;test/xhr_get_data&#039;,
datatype: &quot;json&quot;,
mtype: &quot;GET&quot;,
jsonReader: {
repeatitems: false,
id: &quot;&quot;,
root: function (obj) {
return obj;
},
records: function (obj) {
return obj.length;
},
page: function () {
return 1;
},
total: function () {
return 1;
}
},

datatype: &#039;json&#039;,
width: &#039;auto&#039;,
colNames:[&#039;study&#039;,&#039;Sample Name&#039;,&#039;Forward Primer&#039;,&#039;Reverse Primer&#039;],
colModel :[
{name:&quot;study&quot;,sortable: true},
{name: &quot;sample_name&quot;,sortable: true},
{name: &quot;forward_primer&quot;,sortable: true},
{name: &quot;reverse_primer&quot;,sortable: true}
],
rowNum:10, //this sets the default row in the pager
pager: &#039;#pager_illume&#039;,
shrinkToFit : false,
rownumbers: true, //row numbers on left
multiselect: true, //check box
height: &#039;100%&#039;, //height: &#039;auto&#039;,
gridview: true,
viewrecord:true, // don&#039;t know
sortorder:&quot;asc&quot;, //asc
autoencode: true, //don&#039;t know
sortable:true, //sort
loadonce: true, //loadonce is must
rowList:[10,20,30], //drop down
caption:&quot;jqGrid Illume Example&quot; //title of the grid
});

$("#grid_illume").jqGrid({

url:'test/xhr_get_data',

datatype: "json",

mtype: "GET",

jsonReader: {

repeatitems: false,

id: "",

root: function (obj) {

return obj;

records: function (obj) {

return obj.length;

page: function () {

return 1;

total: function () {

return 1;

}

datatype: 'json',

width: 'auto',

colNames:['study','Sample Name','Forward Primer','Reverse Primer'],

colModel :[

{name:"study",sortable: true},

{name: "sample_name",sortable: true},

{name: "forward_primer",sortable: true},

{name: "reverse_primer",sortable: true}

rowNum:10, //this sets the default row in the pager

pager: '#pager_illume',

shrinkToFit : false,

rownumbers: true, //row numbers on left

multiselect: true, //check box

height: '100%', //height: 'auto',

gridview: true,

viewrecord:true, // don't know

sortorder:"asc", //asc

autoencode: true, //don't know

sortable:true, //sort

loadonce: true, //loadonce is must

rowList:[10,20,30], //drop down

caption:"jqGrid Illume Example" //title of the grid

});

For Search:


jQuery(&quot;#grid_illume&quot;).jqGrid(&#039;navGrid&#039;,&#039;#pager_illume&#039;,
{edit:false,add:false,del:false,refresh:false,search: true},
{}, {}, {},
{
multipleGroup: true,
closeOnEscape: true,
caption: &quot;Search...&quot;,
multipleSearch: true,
Find: &quot;Find&quot;
}
);

jQuery("#grid_illume").jqGrid('navGrid','#pager_illume',

{edit:false,add:false,del:false,refresh:false,search: true},

{}, {}, {},

{

multipleGroup: true,

closeOnEscape: true,

caption: "Search...",

multipleSearch: true,

Find: "Find"

}

);

I can see a search button in the left bottom of the grid, however on click I do not get a modal to search. How do I enable, or fix it?

Thanks.

This topic was modified 8 years ago by publicGenome.

Creator

Topic

Viewing 4 replies - 1 through 4 (of 4 total)

Author

Replies

November 11, 2015 at 12:02 pm #124510

guriddo.support

Participant

Hello,

Your header contain call multiple times the same files which will cause a problems.

Secondly you call first jqGrid.min.js file which contain all the modules, but after this you call grid modules, which are by default included in the min files.

I can not see the reference to jqgrid CSS and jquery ui CSS file which are important too.

I highly recommend you to download our demo from here and see exactly what modules and CSS files are needed.

Alternatively you can look at the online demo here.

Please let us know if you have resolved the problem.

Kind Regards,

Will

P.S. When using jqGrid min file be a sure that all modules are included- i.e to be a sure you can use the one from the downloaded demo.

Guriddo Support Team

November 11, 2015 at 7:10 pm #124539

publicGenome

Participant

Hi There,

Thanks for your reply. Both URLs were pretty useful. I was able to get the pop-up, finally.
It was due to poor calling of JS/Jquery files in the header.
I’d like to add/change caption of the dialog box. My code looks like:


$(&#039;#grid_illume&#039;).jqGrid(&#039;navGrid&#039;, &quot;#pager_illume&quot;,
//grid_illume is my grid name
{ search: true, edit: false,
 add: false, del: false, 
refresh: true,
searchtext:&#039;Search&#039; //to show on the footer search
 },
{},
{},
{},
{recreateFilter: true, 
overlay: true, 
multipleSearch: true,
 multipleGroup: false,
searchCaption:&#039;Search Me!&#039; //change caption...
});

$('#grid_illume').jqGrid('navGrid', "#pager_illume",

//grid_illume is my grid name

{ search: true, edit: false,

add: false, del: false,

refresh: true,

searchtext:'Search' //to show on the footer search

{},

{recreateFilter: true,

overlay: true,

multipleSearch: true,

multipleGroup: false,

searchCaption:'Search Me!' //change caption...

});

Sadly, I’m unable to get the new caption in search dialog box. How do I fix it?

This reply was modified 8 years ago by publicGenome.
This reply was modified 8 years ago by publicGenome. Reason: Add more info

November 12, 2015 at 10:36 am #124547

guriddo.support

Participant

Hello,

Instead of searchCaption, you should use only caption. Please open the language files and find the search property. You will see the right names and possible text that can be changed.

In your case to work this you may need to change the code to this:

$(&#039;#grid_illume&#039;).jqGrid(&#039;navGrid&#039;, &quot;#pager_illume&quot;,
//grid_illume is my grid name
{ search: true, edit: false,
 add: false, del: false, 
refresh: true,
searchtext:&#039;Search&#039; //to show on the footer search
 },
{},
{},
{},
{recreateFilter: true, 
overlay: true, 
multipleSearch: true,
multipleGroup: false,
caption:&#039;Search Me!&#039; //change caption...
});

$('#grid_illume').jqGrid('navGrid', "#pager_illume",

//grid_illume is my grid name

{ search: true, edit: false,

add: false, del: false,

refresh: true,

searchtext:'Search' //to show on the footer search

{},

{recreateFilter: true,

overlay: true,

multipleSearch: true,

multipleGroup: false,

caption:'Search Me!' //change caption...

});

Kind Regards,
Will

Guriddo Support Team

November 13, 2015 at 4:26 pm #124552

publicGenome

Participant

Hi Will,

It works!
Thanks much fr your help and support.

Author

Replies

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Registered Users: 12,233
Forums: 7
Topics: 10,943
Replies: 23,132
Topic Tags: 323

5 Users Online

Users: 2 Guests, 3 Bots

Stay connected with us in your favorite flavor!

jqGrid: search: no pop up

Search Forum

Recent Replies

Forum Statistics

UserOnline