jqGrid search throwing exception

Im using jquery and jqGrid plugin. When i try to use form search in jqGrid a javascript exception is thrown in firebug.

uncaught exception: Syntax error, unrecognized expression: [@selected]

and reset is also not working anyone please help me out....

Thanks, Sandeep

edit:

    jQuery("#list").jqGrid({
    url:'/getdata.jsp',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['PSM ID','PSM Name','Responsibility','Dat开发者_如何学Pythone of Join(MM/dd/yyyy)','Date of Leaving(MM/dd/yyyy)','Designation','Organisation','Location','Phone Number','Email'],
    colModel :[ 
      {name:'PSM_EMP_ID',index:'PSM_EMP_ID',editable:false, width:75},
      {name:'PSM_EMP_Name',index:'PSM_EMP_Name',editable:true,width:100,editrules:{required:true,edithidden:false}}, 
      {name:'RESPONSIBILITY',index:'RESPONSIBILITY',editable:true,width:100}, 
      {name:'DATE_OF_JOIN',index:'DATE_OF_JOIN',width:90,editable:true,edittype:'text',editrules:{required:true},editoptions: {
          size: 10, maxlengh: 10,id:'datepicker1',dataInit: $(function(elem) {
          $("#datepicker1").datepicker({showOn: 'button',buttonImage:'/images/calendar.gif',
                buttonImageOnly: true});
          })
      }
      },
      {name:'DATE_OF_LEAVING', index:'DATE_OF_LEAVING', editable:true,width:110},
      {name:'DESIGNATION', index:'DESIGNATION',editable:true,editrules:{required:true},width:100},
      {name:'ORGANISATION', index:'ORGANISATION',editable:true,editrules:{required:true},width:180}, 
      {name:'LOCATION', index:'LOCATION', editable:true,editrules:{required:true},width:100}, 
      {name:'PSM_PHONE_NUMBER', index:'PSM_PHONE_NUMBER',editrules:{required:true},editable:true,width:100}, 
      {name:'PSM_EMAIL', index:'PSM_EMAIL', editable:true,editrules:{required:true},width:220}],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'user',
    sortorder: "desc",
    viewrecords: false,
    multiselect:false,
    imgpath: '/themes/steel/images',
    caption: 'PSM',
    editurl: '/update.jsp', shrinkToFit: true
    /*width:1200 */}).navGrid('#pager',{add:true,addtext:'Add',edit:true,edittext:'Edit',del:true,deltext:'Del', search:true,searchtext:'Find'/*,refresh:true*/}, /*options*/
{height:300,width:500,reloadAfterSubmit:true}, /* edit options*/
{height:300,width:500,reloadAfterSubmit:true}, /* add options*/
{reloadAfterSubmit:true}, // del options
{} // search options
);

This is the code used...

You should add following property to the 'DATE_OF_JOIN' column

searchoptions: {
    size: 10, maxlengh: 10,
    dataInit: function(elem) {
        setTimeout(function() {
            $(elem).datepicker({ showOn: 'button' });
        },100);
    }
}

and use jqGrid 4.0, where showOn: 'button' setting will work in searching dialog.

It will be additionally very good if you remove all unsed parameters of jqGrid (like very very old deprecated imgpath parameter) and parameters having default values (like multiselect:false and so on).

See the demo here.