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
Last revision Both sides next revision
wiki:custom_buttons [2009/08/07 16:34]
fontzter
wiki:custom_buttons [2009/12/05 13:43]
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.
 +  * 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)