how to add refresh button to jqgrid toolbar?

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").