JQgrid on refresh button click

Question

I want to write code on Refresh button click of JQGrid. Is there any event for that?

Dissimulate

Answer 1

If you need to do some actions before refresh will be started you should use beforeRefresh callback:

$("#grid_id").jqGrid('navGrid', '#gridpager', {
    beforeRefresh: function () {
        // some code here
    }
});

If you need absolute another implementation of grid Refreshing where you will not call $("#grid_id").trigger("reloadGrid"); (which sound strange) you can do this by the usage of refresh: false option to remove the standard Refresh button and using navButtonAdd to add your custom button which looks exactly like the original one:

$("#grid_id").jqGrid('navGrid', '#gridpager', {refresh: false});
$("#grid_id").jqGrid('navButtonAdd', "#gridpager", {
     caption: "", title: "Reload Grid", buttonicon: "ui-icon-refresh",
     onClickButton: function () {
         alert('"Refresh" button is clicked!');
     }
});

Barham

Thank you! I needed it too. This doesn't clone the icon to the top nav bar even if I have cloneToTop set to true. I have custom save implementation on the grid where I push all the changes to the server at the end on an external button click. I needed this implementation to warn users of any unsaved changes (and probably stop refresh depending on response) when they try to reload the grid using the refresh icon. I dont get any option with beforeRefresh function to stop from refreshing the grid...odd!! – Lowboy

@justcurious: You are welcome! I understand your problem with stopping of Refresh process. What you can do is to usage beforeRequest callback. If you would return false from the callback you can stop the refreshing. For example if you use paging of data and the user click on the column sorting you can have the same problem like with refreshing. The usage of beforeRequest seem to me could be the solution of such problems. If you have two pager and want to add some button to both pagers you should just call navButtonAdd twice (see the answer). – Barham

sweet..that was a quick reply! both your ideas are good. Thanks! – Lowboy

oops...the ver of jqGrid (4.1.2) that I'm using doesn't handle the beforeRequest callback properly. I even hardcoded return false to test if it can stop the refresh...didn't work. I will have to go back to handling onSortCol and onPaging event for now and use the custom refresh. Thanks for the suggestions though! – Lowboy

@justcurious: It's correct. One extended the beforeRequest callback later. You can modify the code of grid.base.js or jquery.jqGrid.src.js. You should just search for ts.p.beforeRequest.call(ts); and replace it with new code var bfr = ts.p.beforeRequest.call(ts); if(bfr === undefined) { bfr = true; } if ( bfr === false ) { return; } – Barham

Tested and verified all 3 scenarios:Paging, sorting and refresh. All works great with the jqGrid source code update. Thanks for helping me avoid unfortunate coding in my codebase. – Lowboy

@justcurious: You are welcome! I'm glad to hear that I could help you. – Barham

How to call method which is in my aspx.cs file on refrsh button click? – Dissimulate

Oleg. I was wondering about refreshing the entire page. If you click on the reload page at the top of most browsers, and you have edited the postData information, the Browser reloads the page that was input. How can I make it load the current page? It looks like this beforeRefresh is an event in the navGrid. Will that apply if a users refreshes the entire page? – Palmer

@DmainEvent: navGrid can be used to add some buttons in the navigator bar of the grid. One from the buttons will be used to reload the grid body. beforeRefresh event help in case of clicking of the button only. It can't help in case of reloading the whole page. What problem you try to solve? Most scenarios which one implements are without reloading of the page. – Barham

That is what I feared. If I keep from reloading the page I think I should be good. But I made this post to describe my problems https://mcmap.net/q/1921481/-refreshing-entire-page-jqgrid-paging/729820 – Palmer

Thanks a lot for the solution. It helped me to resolve the issue :). – Cabbageworm

Answer 2

The css for refresh button is ui-icon-refresh

so you can write your custom code on this css like

jQuery('.ui-icon-refresh').click(function(){
  // do your work
});

Grubstake