Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
wiki:custom_buttons [2009/08/14 08:32] tony |
wiki:custom_buttons [2010/05/04 11:51] (current) 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 |