jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Can I display search form?

Tags: advanced searching search Modal

04/04/2014
19:14

HarmonicApps

New Member

Members

Forum Posts: 2

Member Since:
04/04/2014

Offline

I am using jqGrid 4.6.0, JavaScript version. I would like to display the search form directly above the grid instead of having to click the search icon.

Is this possible?

04/04/2014
22:40

HarmonicApps

New Member

Members

Forum Posts: 2

Member Since:
04/04/2014

Offline

I think I solved my own problem, but there might be a better way to do this.

I defined my grid like normal and then added a call to searchGrid. Additionally, I want to search on fields not included in my grid, exactly, so I added a column array.

HTML

<div id="gridsearch" class="ui-widget ui-widget-content ui-corner-all">
   <div class="inherit-bradius-top ui-widget-header ui-helper-clearfix" style="border:none;">
       <span class="ui-jqdialog-title floatleft"> Search</span></div>
   <div class="ui-jqdialog-content">
       <div>
           <div class="searchFilter" id="fbox_grid-table"></div>
           <table id="fbox_grid-table_2" style="border:0px none;margin-top:5px" class="EditTable">
               <tr><td colspan="2"><hr style="margin:1px" class="ui-widget-content"></td></tr>
               <tr><td style="text-align:left" class="EditButton"><a class="fm-button ui-state-default ui-corner-all fm-button-icon-left ui-search" id="fbox_grid-table_reset"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span>Reset</a></td>
                   <td class="EditButton"><a class="fm-button ui-state-default ui-corner-all fm-button-icon-right ui-reset" id="fbox_grid-table_search"><span class="ui-icon ui-icon-search"></span>Find</a></td></tr>
           </table>
       </div>
   </div>
</div>

jQuery('#grid-table').jqGrid({
… // define as usual
})
.navGrid('#grid-pager', {add:false, edit:false, view:false, del:false, search:false, refresh:true, cloneToTop: true},
   {}, // use default settings for edit
   {}, // use default settings for add
   {}, // delete instead that del:false we need this);
   {}
)
.searchGrid({closeOnEscape:false, multipleSearch:true, searchOnEnter:true, columns: [
   $('#grid-table').getColumnByName('visit_date'), // get grid column data
   $('#grid-table').getColumnByName('user_str'),
   {name:'c.name',index:'c.name',label:'Customer'}, // create column def
   {name:'s.name',index:'s.name',label:'Site'}]
});
$.jgrid.hideModal('#searchmodfbox_grid-table');

Now my advanced search is displaying on page load.

06/04/2014
13:12

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thank you very much for sharing this usefull script.

Kind Regards

Tony

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.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
31 Guest(s)

Currently Browsing this Page:
1 Guest(s)