Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:custom_buttons [2009/08/07 16:34]
fontzter
wiki:custom_buttons [2010/05/04 11:51]
tony
Line 1: Line 1:
 +====== Custom Buttons ======
  
 +Custom Buttons are a way to define your own button and action in the pager.
 +
 +===== Definition =====
 +
 +Calling Convention:
 +<code javascript>​
 +<​script>​
 +...
 +jQuery("#​grid_id"​).navGrid("#​pager",​...).navButtonAdd("#​pager",​{parameters});​
 +...
 +</​script>​
 +</​code>​
 +or using the new API
 +<code javascript>​
 +<​script>​
 +...
 +jQuery("#​grid_id"​).jqGrid('​navGrid',"#​pager",​...).jqGrid('​navButtonAdd',"#​pager",​{parameters});​
 +...
 +</​script>​
 +</​code>​
 +
 +The default //​parameters//​ are
 +<​code>​
 +{ caption:"​NewButton",​ buttonicon:"​ui-icon-newwin",​ onClickButton:​null,​ position: "​last",​ title:"",​ cursor: "​pointer"​} ​
 +</​code>​
 +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
 +
 +<​note>​In order to use navButtonAdd method a navGrid method should be called before that as seen in the example above</​note>​
 +Multiple buttons can be added by continuing the chain.
 +<code javascript>​
 +...
 +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"​
 +});
 +...
 +</​code>​
 +
 +===== Separator =====
 +
 +It is possible to group some action adding separator. This can be done using the navSeparatorAdd method
 +
 +Syntax:
 +<code javascript>​
 +<​script>​
 +...
 +jQuery("#​grid_id"​).navGrid("#​pager",​...).navButtonAdd("#​pager",​{parameters}).navSeparatorAdd("#​pager",​{separator_parameters}};​
 +...
 +</​script>​
 +</​code>​
 +
 +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

QR Code
QR Code wiki:custom_buttons (generated for current page)