jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Related Topics sp_TopicIcon

Dynamic Search

Tags: integrated searchtoolbar event

31/08/2010
12:30

Carlo

Hamburg

Member

Members

Forum Posts: 7

Member Since:
31/08/2010

Offline

Hello Everybody,

first of all I want to compliment the jqGrid developers and contributors. I've been using jqGrid for a while now and I must say it's by far the best grid out there.

Now for my Problem:

I'm using jqGrid to realise a dynamic search grid, which has to be reloaded/rebuild with new collumns when selecting a certain search type.

Before selecting type

After selecting type

My Problem is that I can't figure out how I can cath the 'select'-event in the integrated searchtoolbar.

Until now I did trigger the reload by using another select outside the grid (which I wanna get rid of 😛 )

Any help is welcome

Regards

Carlo

31/08/2010
14:28

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Try to define in the colModel for the column with 'select' additional options

searchoptions: {
    dataEvents: [ {
        type: 'change',
        fn: function(e) {
          var v=$(e.target).val();
            // do what yoou need
        }
   } ]
}

Regards
Oleg

31/08/2010
16:52

Carlo

Hamburg

Member

Members

Forum Posts: 7

Member Since:
31/08/2010

Offline

Hi Oleg!

thanks for your Help. I was just about to reply the answer myself (stupid me for not reading the manual right Confused )

-> http://www.trirand.com/jqgridw.....rch_config

Anyway maybe you can help me again.

I still get an error with the following configuration.

Firebug says "break on error: d is undefined" and the grid is loaded without the searchtoolbar

{
                   "colNames":["Name","Type","Description"],
                   "colModel":[
                                {
                                   "name":"name",
                                   "index":"name",
                                   "width":"450",
                                   "classes":"cross_link"
                                },
                                {
                                   "name":"type",
                                   "index":"type",
                                   "stype":"select",
                                   "editoptions":{"value":":All;Interface:Interface;Technical Team:Technical Team;Stream:Stream;"},
                                   "searchoptions":{
                                       "dataEvents":
                                           [
                                              {
                                                  "type":"change",
                                                  "fn":"function(e) {reloadGrid($(e.target).val()); }"
                                              }
                                          ]},
                                      "width":"110″},
                                      …
               }

thanks for your time

Carlo

01/09/2010
00:24

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Probably you forgot to include some jqGrid js-file. You should post your full code inclusive HTML with the headers which shows the order of js files and CSS which are loaded.

Look at this example http://www.ok-soft-gmbh.com/jq.....Filter.htm, which was the answer to http://stackoverflow.com/quest.....ery-jqgrid.

It shows another things, but it is a working example used searching in the toolbal. In the code I included some debug versions of the jqGrid files. Debug versions you find in src directory of the jqGrid.

Regards
Oleg

01/09/2010
16:26

Carlo

Hamburg

Member

Members

Forum Posts: 7

Member Since:
31/08/2010

Offline

hmm are you sure? the whole grid works great and is fully functional ONLY the integrated searchtoolbar disapears, when I try to set the searchoptions like this:

"searchoptions":{
       "dataEvents":
        [
              {
                    "type":"change",
                    "fn":"function(e) {reloadGrid($(e.target).val()); }"
              }
        ]}

I repeat: usually the Grid is fully functional, also the integrated searchtoolbar works great so I guess it's a configuration problem, but maybe I'm wrong Smile .

I can't post the full HTML cause I'm working on a Intranet Project (which is also pretty big), but I will post all relevant Parts.

I'am using the full 3.7.1 package (minified skript)

Here my includes

<head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>Insert title here</title>

       <!– blueprint grid –>
       <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
       <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
       <!– blueprint grid fluid –>
       <link rel="stylesheet" href="css/blueprint/liquid.css" type="text/css" media="screen">
       <!–[if lt IE 8]>
            <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
        <![endif]–>

       <!– JQuery theme –>
       <link type="text/css" href="css/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
       <!– jqGrid –>
       <link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.jqgrid.css" />
       <!– JQuery Multiselect plugin –>
       <link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css" />
       <!– Own css –>
       <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

       <!– JQuery script –>
       <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
       <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
       <!– JQuery Plugin Multiselect –>
       <script src="js/plugins/localisation/jquery.localisation-min.js" type="text/javascript"></script>
       <script src="js/plugins/scrollTo/jquery.scrollTo-min.js" type="text/javascript"></script>
       <script src="js/ui.multiselect.js" type="text/javascript"></script>
       <!– jqGrid scripts –>
       <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
       <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
       <!– jqGrid fluid adapter script –>
       <script src="js/jquery.jqGrid.fluid.js" type="text/javascript"></script> </head>

The following function should be trigered the moment the 'select' is changed, and rebuilds the grid with the new ColModel and ColNames.

function reloadGrid(){
var colNameseAndColModel=null;

colNameseAndColModel= getColNamesAndColModel();

$('#fo_search').GridUnload();

                createSearchGrid(colNameseAndColModel);

               resize_the_grids();
}

colNames and colModel are generated serverside and look exactly like in Post 3

Here is the function which builds my grid:

function createSearchGrid(res) {
                jQuery("#fo_search")
                   .jqGrid(
                       {
                           url : 'Listener',
                           id : 'fo_search',
                           datatype : 'json',
                           mtype : 'POST',
                           colNames : res.colNames,
                           colModel : res.colModel,
                           pager : '#fo_search_pager',
                           rowNum : 25,
                           rowList : [ 25, 50, 100 ],
                           sortable : true,
                           sortname : 'invid',
                           sortorder : 'asc',
                           viewrecords : true,
                            shrinkToFit : false,
                            autowidth : true,
                           toppager : true,
                           height : 'auto',
                           postData : {
                               action : 'fo_search',
                               //type : $('#search_type').val()
                           },
                           beforeRequest: function (){
                               //reloadGrid();
                               //if ($('#gs_type').val())
                           },
                           onCellSelect : function(rowid, iCol,cellcontent, e) {
                               var isLink = $(
                                       ".//tr[id='" + rowid + "']")
                                       .children().eq(iCol).hasClass(
                                               "cross_link");

                               if (isLink) {
                                   openInfoDialog('testType',
                                           'testName', rowid);
                               }
                           }
                       }
               );

Greetings

Carlo

03/09/2010
12:28

Carlo

Hamburg

Member

Members

Forum Posts: 7

Member Since:
31/08/2010

Offline

Problem Solved by taking the easy way out :

instead of trying to catch the select event through the jqgrid functionality, I removed all events which were bind to the select element and attached my own change event.

$('#gs_type').unbind();
$('#gs_type').change(
function() {
reloadGrid();

}

);

I still wonder what I did wrong in my previous attempts :S

it would be great if someone could have a look at my configuration.

Thanks in advance

Carlo

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
53 Guest(s)

Currently Browsing this Page:
1 Guest(s)