Reload a JQGrid after Jquery Date Picker selection

Question

I am using a JQGrid in one of my ASP.NET projects where the grid shows a list of items that are sortable/filterable (That's all working fine)

The only problem im having with it is, one of the columns is a date field so I have the filter textbox using the date picker (using the below options)

{ name:'Due',
  index:'Due', 
  width:100, 
  align:"center",
  searchoptions:{
      dataInit:function(el){
          $(el).datepicker({dateFormat:'dd-mm-yy'});
      }
   }
 }

But when I select a date from the date picker it's not refreshing the grid automatically (like the dropdowns do) I have to click the textbox again and press enter.

Is there a way to fix this?

jqGrid 3.5 beta

Answer 1

I haven't used JQGrid, but from the documentation you should be able to do something like this:

{
    name:'Due',
    index:'Due', 
    width:100, 
    align:"center",
    searchoptions:{
        dataInit:function(el){
            $(el).datepicker({
                dateFormat:'dd-mm-yy',
                onSelect: function(dateText, inst){ $("#grid_id")[0].triggerToolbar(); }
            });
        }
    }
}

Don't forget to change the #grid_id to the selector that matches your grid.

Updated: Changed $("#grid_id").trigger("reloadGrid"); to $("#grid_id")[0].triggerToolbar();. Tested this on the jqGrid 3.5b demos and it works.