5

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

hetal gala
  • 249
  • 2
  • 5
  • 18

2 Answers2

18

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!');
     }
});
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 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!! – justcurious Apr 26 '12 at 18:20
  • 1
    @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](http://stackoverflow.com/a/8450272/315935)). – Oleg Apr 26 '12 at 18:26
  • sweet..that was a quick reply! both your ideas are good. Thanks! – justcurious Apr 26 '12 at 18:41
  • 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! – justcurious Apr 26 '12 at 20:26
  • 1
    @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; }` – Oleg Apr 26 '12 at 20:32
  • 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. – justcurious Apr 26 '12 at 20:49
  • @justcurious: You are welcome! I'm glad to hear that I could help you. – Oleg Apr 26 '12 at 20:51
  • How to call method which is in my aspx.cs file on refrsh button click? – hetal gala May 01 '12 at 04:52
  • 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? – SoftwareSavant Mar 05 '13 at 16:20
  • @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*. – Oleg Mar 05 '13 at 17:19
  • 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 http://stackoverflow.com/q/15229601/729820 – SoftwareSavant Mar 05 '13 at 17:42
  • Thanks a lot for the solution. It helped me to resolve the issue :). – santosh kumar patro Apr 03 '14 at 14:52
0

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
});