jQuery Grid Plugin - jqGrid

Dear OlegK,

Thank you for your fast responce but that can not solve the problem. It only works when we change the value of select dropdown.

If I push the reset toolbar search, only the grid can reload but not the select value. The select value can be reloaded by refreshing the web page.

let say our country select consist of: USA, Australia and our city select consist of: NewYork, Washington, Brisbane, Perth.

If I choose Australia, the sub category select will consist of Brisbane and Perth only.

And then I want to clear my toolbar search to return original value of country select and city select.

I think it should use ajax to reset select toolbar value. How to make it works?

Best Regards,

Candra

Dear OlegK,

Sorry for misunderstanding.

I mean the reset toolbar search is the sixth button of six jqgrid navigation buttons on pager which looks like recycled icon. They are:

1) Add New Row,

2) Edit Selected Row,

3) View Selected Row,

4) Delete Selected Row,

5) Find Records, and

6) Reload Grid

Best Regards,

Candra

Dear OlegK,

I have not succeeded yet to do your guide.

I see that if I change country of select dropdown to 'All', the city of select dropdown will return to original value ( get all cities).

I have an idea to insert your change event function into reset jqgrid section:

jQuery("#list").jqGrid('navButtonAdd',"#pager",{caption:"Reset",title:"Reset Filter",buttonicon :'ui-icon-refresh',
    onClickButton:function(){
        //do something to change the country of select dropdown to 'All', so I do not need to clear search criteria(filter)

        // set getSelectFilterUrl='filterselect/filterselectcity.php'; // get all cities

        mygrid[0].clearToolbar()
    } });

Could you help me do this, please?

Best Regards,

Candra

Dear OlegK,

Happy New Year too guys.

Yes, that works. awesome but I found a new problem here.

If I choose USA of country select dropdown, the city select dropdown should consist of New York and Washington.

From here, I cann`t use multiple search. If I choose New York of city select dropdown, the contry select dropdown will change to 'All'.

How to keep the value of country select dropdown just like the original multiple search from jqgrid demo?

Thank you OlegK, you have spent a lot of your time for me.

Best Regards,

Candra

Hello Candra,

Sorry, but I am just a user of jqGrid. I started with JavaScript development and with jqGrid about 1,5 year ago for one project. Because I studied JavaScript and jqGrid quickly and in the next project (like in all before) I don't need it, I started to answer to the question of other people mostly to keep and to expand my current knowledge in JavaScript and jqGrid. Slowly it becomes my hobby to help other people to use jqGrid. I answer on different jqGrid question in the stackoverflow.com and in the forum. But you should understand, that I have a lot of other things to do and have to do my main job which brings money for me and my family.

Your question is interesting for me. I think that other people could have the same requirements. So I tried to help you. But the problems which you describes in your last post are more specific to your existing code. You posted only pieces of the code. To be able to help you I have to write a small web service (I can not use your code fragments in PHP because PHP is not a language which I use for development) and of course the client code. I posted you many code fragments for the client and I don't know what from there you use currently, so I would have to write the client code based on the information which I have. All will take relatively much time which I don't have currently. Later I could go back to the problem, but currently I have to implement one project till the end of January, so I am not sure that I could help you before.

If you will make my work easy and post most code which can be used to reproduce your problem, probably I could find time before, but I can not promise you that.

Best  regards
Oleg 

Dear OlegK,

I am sorry for bothering you. I really appreciate your help so far. Please apologize my fault and please check my code:

jQuery(document).ready(function(){
  var mygrid =
  jQuery("#list").jqGrid({
        url:'table.php?q=1',
        datatype: 'json',
        mtype: "POST",
        colNames:['Country','City'],
        colModel :[
          {name:'Country', index:'Country', width:100, editable:true, editoptions:{size:20, maxlength:'40'}, editrules:{required:true}, 

          formoptions:{elmprefix:"(*)"}, sortable:true, stype:'select', search:true, searchoptions:

          {dataUrl:'filterselect/filtercountry.php',
          dataEvents: [ {
                type: 'change',
                fn: function(e) {
                var thisval = $(e.target).val();
                var getSelectFilterUrl='filterselect/filtercity.php'; // get all cities
                if (thisval !=='') {
                  // not "All" is choosed
                  getSelectFilterUrl += '?Country='+encodeURIComponent(thisval);
                }
                // do what yoou need
                $.get('filterselect/filtercity.php?Country='+thisval, function(data)
                  { var res = $(data).html();
                  $("select#gs_City").html(res);
                  }); // end get
                } //end func
          } ] // end type, dataevents
          }},

         {name:'City', index:'City', width:70, editable:true, editoptions:{size:15}, editrules:{required:true}, formoptions:

         {elmprefix:"(*)"}, sortable:true, stype:'select', search:true, searchoptions:{dataUrl:'filterselect/filtercity.php?myid=initialid',

          dataEvents: [ {
                type: 'change',
                fn: function(e) {
                var thisval = $(e.target).val();
                var getSelectFilterUrl='filterselect/filtercity.php'; // get all cities
                if (thisval !=='') {
                  // not "All" is choosed
                  getSelectFilterUrl += '?City='+encodeURIComponent(thisval);
                }
                // do what yoou need
                $.get('filterselect/filtercity.php?City='+thisval, function(data)
                  { var res = $(data).html();
                  $("select#gs_Country").html(res);
                  }); // end get
                } //end func
          } ] // end type, dataevents
      }},
      {name:'Postal Code'      , index:'PostalCode'      , width:90,  align:'right'                , editable:true, editoptions:{size:15,

      maxlength:'30'}, editrules:{required:true}, formoptions:{elmprefix:"(*)"}}
        ],
        multiselect: true,
        altRows: true,
        pager: '#pager',
        rowNum:50,
        rownumbers: true,
        gridview: true,
        height: 260,
        shrinkToFit: false,
        width: 1105,
        rowList:[50,100,200],
        sortname: 'Country', 
        sortorder: 'asc',
        viewrecords: true,
        caption: 'POSTAL CODE',
        editurl:"edit/editpostalcode.php"
  }
  });
   
  jQuery("#list").jqGrid('navGrid','#pager',{edit:true, edittext:'Edit',add:true,addtext:'Add',del:true, deltext:'Delete',search:false, refresh:false, view:true, viewtext:'View'},
  {jqModal:true, top: 120, left: 480, width: 350, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true, checkOnUpdate:true, savekey: [true,13], navkeys: [true,38,40], checkOnSubmit : true, closeAfterEdit: true},// edit options
  {jqModal:true, top: 120, left: 480, width: 350, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true,                     savekey: [true,13], navkeys: [true,38,40]                      ,  closeAfterAdd: true}, // add options
  {jqModal:true, top: 120, left: 480, drag:false, resize:false, reloadAfterSubmit:true, closeOnEscape:true}, // del options
  {multipleSearch:true}, // enable the advanced searching
  {jqModal:true, top: 120, left: 480, drag:false, resize:false, navkeys: [true,38,40], closeOnEscape:true}); // view options
   
  jQuery("#list").jqGrid('navButtonAdd',"#pager",{caption:"Reset",title:"Reset Filter",buttonicon :'ui-icon-refresh',  
    onClickButton:function(){
            mygrid[0].clearToolbar()
            // remove current selection in the 'Jenis Alat' column
                var sel = $('select#gs_Country option:selected', mygrid[0].grid.hDiv)
                        .removeAttr('selected').parent();
                // select 'All' having option with the empty ('') value
                // and trigger 'change' to refresh all
                $("option[value='']", sel[0]).attr('selected', 'selected').trigger('change');
                 
                // remove current selection in the 'City' column
                var sel = $('select#gs_City option:selected', mygrid[0].grid.hDiv)
                        .removeAttr('selected').parent();
                // select 'All' having option with the empty ('') value
                // and trigger 'change' to refresh all
                $("option[value='']", sel[0]).attr('selected', 'selected').trigger('change');    
    } });
    
  jQuery("#list").jqGrid('filterToolbar',{searchOnEnter : false});   
});

filtercity.php

<?php
include '../config/connections.php';
$Country     = $_GET['Country']; //some variable
 
echo "<select>
<option value=''>All</option>";
if ($Country <> '')
{$query="SELECT * FROM table WHERE Country = '$Country' GROUP BY City";}
else
{$query="SELECT * FROM table GROUP BY City";}
$result = $db->query($query);
$numresult=$result->num_rows;
for ($i=0; $i<$numresult; $i++)
    {
    $row = $result->fetch_assoc();
       echo "<option value='$row[City]'>$row[City]</option>";
    }
echo "</select>";
?>

filtercountry.php

<?php
include '../config/connections.php';
$City     = $_GET['City']; //some variable
 
echo "<select>
<option value=''>All</option>";
if ($Kota <> '')
{$query="SELECT * FROM table WHERE City = '$City' GROUP BY City";}
else
{$query="SELECT * FROM table GROUP BY City";}
$result = $db->query($query);
$numresult=$result->num_rows;
for ($i=0; $i<$numresult; $i++)
    {
    $row = $result->fetch_assoc();
       echo "<option value='$row[City]'>$row[City]</option>";
    }
echo "</select>";
?>

Thank you for your help

Best Regards,

Candra

Dear OlegK,

Excuse me, where should I put the recreateForm:true? I am sorry I don`t understand

Best Regards,

Candra

Dear OlegK,

I have tried but nothing happend. I think the problem is on event change function.

dataEvents: [ {
                type: 'change',
                fn: function(e) {
                var thisval = $(e.target).val();
                var getSelectFilterUrl='filterselect/filtercity.php'; // get all cities
                if (thisval !=='') {
                  // not "All" is choosed
                  getSelectFilterUrl += '?Country='+encodeURIComponent(thisval);
                }
                // do what yoou need
                $.get('filterselect/filtercity.php?Country='+thisval, function(data)
                  { var res = $(data).html();
                  $("select#gs_City").html(res);
                  }); // end get
                } //end func
          } ] // end type, dataevents

When I choose USA of country select dropdown, the city select dropdown should consist of New York and Washington.

From here, I cann`t use multiple search. When I back to choose New York of city select dropdown, I want the country select dropdown should consist of country which New york city lies and keep selected on New York. but it always refreshed to 'all' selected.

Best Regards,

Candra

Hello!

You can use Developer Tools of Internet Explorer or Google Chrome or Firebug in Firefox to examine the current modified HTML code any time. If you use Toolbar Filtering, then you will see that ids of all items from the toolbar have prefix "gs_". Probably you try use it in form editing of inline editing.

By the way Tenerife is my favorite island from the Canary Islands (I visited almost all from there).

Best wishes from Germany
Oleg 

$("#dependences") works fine xDDDDDD oh my god, one hour lost with this !!

thanks to show me the path 😉