Table of Contents
Custom Buttons
Custom Buttons are a way to define your own button and action in the pager.
Definition
Calling Convention:
<script> ... jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}); ... </script>
or using the new API
<script> ... jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters}); ... </script>
The default parameters are
{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}
where
- caption: (string) the caption of the button, can be a empty string.
- buttonicon: (string) is the ui icon name from UI theme icon set. If this option is set to “none” only the text appear.
- onClickButton: (function) action to be performed when a button is clicked. Default null.
- position: (“first” or “last”) the position where the button will be added (i.e., before or after the standard buttons).
- title: (string) a tooltip for the button.
- cursor : string (default pointer) determines the cursor when we mouseover the element
- id : string (optional) - if set defines the id of the button (actually the id of TD element) for future manipulation
In order to use navButtonAdd method a navGrid method should be called before that as seen in the example above
Multiple buttons can be added by continuing the chain.
... jQuery("#grid_id") .navGrid('#pager',{edit:false,add:false,del:false,search:false}) .navButtonAdd('#pager',{ caption:"Add", buttonicon:"ui-icon-add", onClickButton: function(){ alert("Adding Row"); }, position:"last" }) .navButtonAdd('#pager',{ caption:"Del", buttonicon:"ui-icon-del", onClickButton: function(){ alert("Deleting Row"); }, position:"last" }); ...
Separator
It is possible to group some action adding separator. This can be done using the navSeparatorAdd method
Syntax:
<script> ... jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}}; ... </script>
The default separator_parameters are
{sepclass : “ui-separator”,sepcontent: ''}
Where:
- sepclass represent the separator class defined in ui-jqgrid. You cancustomize your own class
- sepcontent the content that can be put in the separator element
Discussion
How to remove a custom button?
Sometimes it can be necessary to remove a custom button you just created in the pager. Just pass a (optional) parameter to indicate the id of this button:
Like this, it's easy to remove or manipulte this button!
How do I add custom icon/image? There was a parameter “buttonimg” in versions prior to 3.5 to use custom image but it is not there any more.
Workaround:
give it an id and then upon loadComplete, change the css:
how to change the button size?
Any way to enable/disable custom buttons depending if the user select a row?
Is there a way to add/remove buttons, like in response to an event?
Problem: loadonce:true disables pagination by making datatype to local from json if loadonce:false pagination will work but filteration(search) will not happen.
So is there a way to enable mouseover event on pager button. through which i can trigger the loadonce:false and reset the datatype as json. And in loadcomplete i ll set loadonce:true which n turn makes datatype local and filteration works.
Helo All i a newbie to jquery- i wondered i have a jqgrid with multiselect option and i have added the nav grid to call a function when pushing the button - the problem is i can figure out how to send the jqgrid data(the checked box selected) to the function i just need to send its id
this is the line i use
$(”#TableName”).navGrid(”#Pager”,{edit:false,add:false,del:true,search:false}).navButtonAdd(”#Pager”,{caption:“Exclude”, buttonicon:“ui-icon-newwin”, onClickButton:myFunction, position: “last”, title:“test”, cursor: “pointer”});
Thank all
If I try to specify position option to separator it throws error: Uncaught TypeError: Object #<Object> has no method 'indexOf'
This is useful if I'm adding a button as first and want to separate it from rest of buttons.
when authority control,How to control the Enable or No Enabled of the custom button?
How to clone a custom button to the toppager?