Guriddo » Topic: Add search icon on column header

Add search icon on column header

Guriddo
column header
Add search icon on column header

Tagged: column header

This topic has 6 replies, 2 voices, and was last updated 9 years, 8 months ago by guriddo.support.

Creator

Topic
August 2, 2016 at 8:36 pm #125434

ramuk
Participant

I am new to JQuery and JqGrid. I am trying to add search icon next to the sort icon on each of the column header. How do I do that, also on clicking the icon the toolbar search texbox should appear. Given below is my JScode:
<pre class=”default prettyprint prettyprinted”>$(function () {
$("#ListGrid").jqGrid({ url: "/Student/GetStudents", datatype: 'json', mtype: 'Get', colNames: ['StudentId', 'FirstName', 'LastName', 'Age', 'Gender'], colModel: [ { key: true, hidden: false, name: 'StudentId', index: 'StudentId', editable: true }, { key: false, name: 'FirstName', index: 'FirstName', editable: true }, { key: false, name: 'LastName', index: 'LastName', editable: true }, { key: false, name: 'Age', index: 'Age', editable: true }, { key: false, name: 'Gender', index: 'Gender', editable: true }], pager: jQuery('#pager'), rowNum: 10, rowList: [10, 20, 30, 40], height: 250, viewrecords: true, loadonce: true, caption: "Student List", emptyrecords: 'No records to display', jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, Id: "0" }, loadComplete: function () { $("tr.jqgrow:odd").css("background", "LightBlue"); }, autowidth: true,
multiselect: false});
})
<pre class=”default prettyprint prettyprinted”>.navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true })
Creator

Topic

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

Author

Replies

August 4, 2016 at 4:34 am #125435

guriddo.support

Participant

Hello,

The code you post is difficult to be read. Could you please post the code using the text tab and then select the text and click on code button.

Unfortunately there is no direct method to do this and adding icon next to the search one is difficult.

I recommend you to look at colmenu options here

Another solution is to show hide tool bar search menu at all using the command:

...
$(&quot;#gbox_jqGrid&quot;).find(&quot;.ui-search-toolbar&quot;).hide();
...

...

$("#gbox_jqGrid").find(".ui-search-toolbar").hide();

...

where jqGrid is the id of the grid

and use show to show it

Kind Regards,
Will

Guriddo Support Team

August 4, 2016 at 1:02 pm #125436

ramuk

Participant

Thanks for ur reply, I will try the code you posted. What I want is to have a search icon next to sort triangles on the column header and on clicking the search icon, the filter toolbar should appear. Something like the demo here http://stackoverflow.com/questions/8213162/add-button-to-jqgrid-column-header where they have a gear icon.

Thanks

$(function () {
$(&quot;#ListGrid&quot;).jqGrid({
url: &quot;/Student/GetStudents&quot;,
datatype: &#039;json&#039;,
mtype: &#039;Get&#039;,
colNames: [&#039;StudentId&#039;, &#039;FirstName&#039;, &#039;LastName&#039;, &#039;Age&#039;, &#039;Gender&#039;],
colModel: [
{ key: true, hidden: false, name: &#039;StudentId&#039;, index: &#039;StudentId&#039;, editable: true },
{ key: false, name: &#039;FirstName&#039;, index: &#039;FirstName&#039;, editable: true },
{ key: false, name: &#039;LastName&#039;, index: &#039;LastName&#039;, editable: true },
{ key: false, name: &#039;Age&#039;, index: &#039;Age&#039;, editable: true },
{ key: false, name: &#039;Gender&#039;, index: &#039;Gender&#039;, editable: true}],
pager: jQuery(&#039;#pager&#039;),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: 250,
viewrecords: true,
loadonce: true,
caption: &quot;Student List&quot;,
emptyrecords: &#039;No records to display&#039;,
jsonReader: {
root: &quot;rows&quot;,
page: &quot;page&quot;,
total: &quot;total&quot;,
records: &quot;records&quot;,
repeatitems: false,
Id: &quot;0&quot;
},
loadComplete: function () {
$(&quot;tr.jqgrow:odd&quot;).css(&quot;background&quot;, &quot;LightBlue&quot;);
},
autowidth: true,
multiselect: false
}).navGrid(&#039;#pager&#039;, { edit: true, add: true, del: true, search: true, refresh: true })
})

$(function () {

$("#ListGrid").jqGrid({

url: "/Student/GetStudents",

datatype: 'json',

mtype: 'Get',

colNames: ['StudentId', 'FirstName', 'LastName', 'Age', 'Gender'],

colModel: [

{ key: true, hidden: false, name: 'StudentId', index: 'StudentId', editable: true },

{ key: false, name: 'FirstName', index: 'FirstName', editable: true },

{ key: false, name: 'LastName', index: 'LastName', editable: true },

{ key: false, name: 'Age', index: 'Age', editable: true },

{ key: false, name: 'Gender', index: 'Gender', editable: true}],

pager: jQuery('#pager'),

rowNum: 10,

rowList: [10, 20, 30, 40],

height: 250,

viewrecords: true,

loadonce: true,

caption: "Student List",

emptyrecords: 'No records to display',

jsonReader: {

root: "rows",

page: "page",

total: "total",

records: "records",

repeatitems: false,

Id: "0"

loadComplete: function () {

$("tr.jqgrow:odd").css("background", "LightBlue");

autowidth: true,

multiselect: false

}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true })

})

August 8, 2016 at 10:58 am #125440

guriddo.support

Participant

Hello,

I think you can use the code from the link you provided. Please let us know if you have success with this.

Kind Regards,

Will

Guriddo Support Team

August 8, 2016 at 1:55 pm #125443

ramuk

Participant

No sir, no luck with the code provided in the link, hence I am here for help….

August 8, 2016 at 3:20 pm #125444

guriddo.support

Participant

Hello,

Ok. We will look at this.

Kind Regards

Will

Guriddo Support Team

August 8, 2016 at 3:31 pm #125445

guriddo.support

Participant

Hello,

Not sure what you do, but using the last version and the code provided from

stackoverflow we have prepared this demo

Kind Regards,

Will

Guriddo Support Team

Author

Replies

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

You must be logged in to reply to this topic.

Stay connected with us in your favorite flavor!

Add search icon on column header

Search Forum

Recent Replies

Forum Statistics

UserOnline