JQ Grid Tool bar search for Date column - asp.net

Question

I am new to JQGrid, i am developing a screen where i need to use a tool bar in JQ Grid and perform search operation accordingly.
I have a date field in my JqGrid and i have added the DtPicker in the Search option also.
But when i select the date from DTPicker, search for the selected date is not performed.
Please let me know how to perform search for selected date.
<table id="test">
</table>
<div id="divtest">
</div>
<div>
<asp:Label ID="count" runat="server" Text="Label"></asp:Label>
</div>
<script type="text/javascript">
$(document).ready
(
function CreateGrid()
{
var lastSel,lastSel1, Status = ["All", "Active", "InActive"],defaultStatus="Active";
jQuery("#test").jqGrid
(
{
url:'Test.aspx',
datatype:'json',
contentType: "application/json; charset=utf-8",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colNames:[ 'EMPID',
'EMPName',
'DOB',
'Designation',
'Genders',
'Status',
'Remarks',
'EMPType',
''
],
colModel:
[
{
name:'EMPID',
index:'EMPID',
width:120,
sorttype:'int',
editable:false,
key:true,
sortable: true,
search:true,
editoptions:{readonly:true}
},
{
name:'EMPName',
index:'EMPName',
width:250,
sortable: true,
align:"left",
editable:true,
size:100,
editrule:{custom:true,custom_func:checkName}
},
{
name:'DOB',
index:'DOB',
width:250,
sortable: true,
align:"left",
size:100,
editable:true,
sorttype:"date",
formatter: "date",
formatoptions: {newformat:'m/d/Y'},
editrule:{custom:true,custom_func:checkName}
,editoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui){
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
}
,searchoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui) {
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
},
search:true
},
{
name:'Designation',
index:'Designation',
width:250,
align:"left",
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value:"0:select;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer; 6:Tester;7:Sales;8:Others"}
,editrule:{custom:true,custom_func:checkDropDown}
,stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer;6:Tester;7:Sales;8:Others"
}
},
{
name:'Gender',
index:'Gender',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Male;2:Female"},
editrule:{custom:true,custom_func:checkDropDown},
stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:Male;2:Female"
}
},
{
name:'Status',
index:'Status',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Active;2:InActive"}
,editrule:{custom:true,custom_func:checkDropDown},
stype:'select'
,searchoptions: {
sopt:['eq'],value:":All;1:Active;2:InActive"
}
},
{
name:'Remarks',
index:'Remarks',
width:150,
sortable: true,
align:"left",
editable:true,
edittype:"textarea",
editoptions:{rows:'3',cols:'10'},
size:100
},
{
name:'Emptype',
index:'Emptype',
sortable: true,
formatter:'checkbox',
editable:true,
edittype:"checkbox",
stype:'select',
searchoptions: {
sopt:['eq','ne'],value:":All;true:In;false:Out"
}
},
{
name:'action',
index: 'action',
sortable:false,
align:'center',
formatter:"actions",
formatoptions:{key:true},
search:false
}
],
rowNum:10,
rowList:[2,5,10,15],
pager:'#divtest',
viewrecords:true,
width:0.96*screen.width,height:0.42*screen.height,
caption:'jqGrid',
emptyrecords: "No Results Found",
sortable:true,
sortorder: "desc",
search:true,
ignoreCase:true,
loadonce:true,
multiselect: true,
shrinkToFit:true,forceFit:true
,editurl:"Test4.aspx",
onAfterSaveCell:
function reload(result)
{
$("#grid").trigger("reloadGrid");
}
,onSelectRow:
function (id)
{ var tr;
if (id && id !== lastSel)
{
if (typeof lastSel !== "undefined")
{
$("#test").jqGrid('restoreRow', lastSel);
$("#test").trigger("reloadGrid",[{current:true}]);
}
lastSel = id;
}
}
}
).jqGrid('navGrid','#divtest',
{ edit:false,
add:true,
del:false,
search:false
},
//for Edit
{
},
//for Add
{
top:0.20*screen.height,
left:(screen.width-(0.65*screen.width)),
width: 0.35*screen.width,
align:'Center',
resizeable: true,
closeAfterAdd:true,
reloadAfterSubmit:true,
serializeEditData: function(data)
{
return (data);
},
beforeShowForm: function(form)
{
$("#DOB").datepicker
({
changeMonth: true,
recreateForm: true,
changeYear: true
});
}
},
//for Delete
{
},
//for Search
{ multipleSearch: true,
multipleGroup:true,
//showQuery: true,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0,
beforeShowSearch:function()
{
$("#test")[0].toggleToolbar();
},
onClose: function()
{
$("#test")[0].toggleToolbar();
}
}
).jqGrid('navButtonAdd','#divtest',
{
caption:" ",
width:'15',
buttonicon:"ui-icon-search",
onClickButton: function()
{
$("#test")[0].toggleToolbar();
},
position:"last"
})
//For displaying the blank tool bar on the grid
.jqGrid('filterToolbar',
{
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
}
)
.jqGrid('inlineNav',"#pager",{
edit:false,
editicon: "ui-icon-pencil",
add:true,
addicon:"ui-icon-plus",
cancel: true,
cancelicon:"ui-icon-cancel",
save: true,
saveicon:"ui-icon-disk"
}
);
//The Date DTPicker field in the Edit portion.
var initDateEdit =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
,
//The Date DTPicker field in the Search portion.
//But not working in this.
initDateSearch =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
;
//To hide the check box or select box in the Header of the JQGrid.
var myGrid = $("#test");
$("#cb_"+myGrid[0].id).hide();
var grid = $("#test"),
getColumnIndexByName = function (grid, columnName)
{
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++)
{
if (cm[i].name === columnName)
{return i;}
}
return -1;
};
}
);
</script>
Thanks and Regards,
NMB

Answer 1

You just need to add this after your Filter tool bar..
.change(function(){$("#table_ID")[0].toggleToolbar()})