how to add refresh button to jqgrid toolbar? - jqgrid

Question

i am working on jqgrid. i want to add refresh button to jqgrid toolbar to refresh the grid.
here is my js code:
jQuery(document).ready(function () {
var grid = jQuery("#gridemp");
grid.jqGrid({
url: '/Admin/GetTimeInOut_ForAdmin',
datatype: 'json',
mtype: 'Post',
height: '100%',
multipleSearch: false,
rownumbers: true,
//formatCell: emptyText,
colNames: ['User', 'Date', 'TimeIn', 'TimeOut'],
colModel: [
{ name: 'User', index: 'User', align: "center", sorttype: 'text', resizable: true, editable: false },
{ name: 'Date', index: 'Date', align: "center", sorttype: 'text', resizable: true, editable: false, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'mm/dd/yy' }).change(function () { $('#gridemp')[0].triggerToolbar(); }); } } },
{ name: 'TimeIn', index: 'TimeIn', align: "center", sorttype: 'text', resizable: true, editable: false },
{ name: 'TimeOut', index: 'TimeOut', align: "center", sort:false, resizable: true, editable: false }
],
//shrinkToFit: true,
// loadonce: false,
//ignoreCase: true,
width: '690',
pager: '#emppager',
caption: 'Employee Time IN/OUT',
rowNum: 10,
rowList: [10, 20, 50, 100],
viewrecords: true,
hidegrid: false,
}
);
grid.jqGrid('filterToolbar',{ stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
grid.jqGrid('navGrid', '#emppager',
{ resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }
).jqGrid('navButtonAdd', '#pager');
});
actually i need 2 refresh buttons one for to clear the search bar text boxes without refreshing the jqgrid, and one for refreshing the whole grid. i will mark your answer if it works for me. thanks in advance. happy coding :), if you the question is not clear please comment i will explain.

Answer 1

First of all it seems your code contains typing error: you use pager: '#emppager' during creating grid, in navGrid but not in navButtonAdd.
To add "standard" reload button which reset filter toolbar and reload the grid you need just remove refresh: false option.
To add custom clear filter you need call navButtonAdd in the way like below
.jqGrid("navButtonAdd", "#emppager", {
caption: "", // no text near the button
title: "Clear filters in toolbar without reloading of data",
buttonicon: "ui-icon-close", // an example of icon
onClickButton: function () {
this.clearToolbar(false); // don't reload grid
}
});
You can change icon used by Refresh button by usage refreshicon option (at the same place where you specify del, refresh, alerttext etc). Default value is refreshicon: "ui-icon-refresh". Moreover you can consider to use refreshstate: "current" (default is refreshstate: "firstpage").