view release on metacpan or  search on metacpan

lib/Alien/GvaScript/Grid.pod  view on Meta::CPAN

C<HTMLElement> container of the grid list 

=head2 toolbar_container

  grid.toolbar_container

C<HTMLElement> container of the toolbar (pagination links + action buttons)

=head2 paginatorbar_container

  grid.paginatorbar_container 

C<HTMLElement> container of the pagination links

=head2 actionsbar_container

 grid.actionsbar_container 

C<HTMLElement> container of the action buttons

=head1 METHODS

=head2 clearResult

  grid.clearResult(msg)

This method clears the grid result container and displays C<msg> instead.

=head2 clearToolbar

  grid.clearToolbar()

This methods clears the grid toolbar container.

=head2 clearActionButtons

  grid.clearActionButtons()

This method clears the action buttons container and thus removes the buttons

=head2 clear

  grid.clear(msg)

This method is equivalent to C<grid.clearResult(msg)> and C<grid.clearToolbar()>

=head2 addActionButtons

  grid.addActionButtons()

This method renders the action buttons based on the grids actions. 
NOTE that the actions conditions will be re-evaluated.


=head2 destroy

  my_grid.destroy();

This method will unregister the Grid in the GvaScript.Grids namespace and 
will iteratively call the destructor on all the grid's depedencies
this removing all handlers attached.
Call this method when the grid is removed
from the DOM.


=head1 EVENTS

=head2 onShow

This event is triggered of the table is rendered and displayed.
Useful for attaching custom events on table records/cells.

=head2 onHighlight

This event is triggered when a choice in the list is highlighted.
The event handler may use C<event.index> to know the index of the
highlighted choice.

=head2 onPing

This event is triggered when a choice in the list is "ping-ed", i.e.
either by dblclicking, clicking on selected row or by pressing the C<RETURN> key.
The event handler will recieve 1 arguement C<target> which is the record object that has been "Pinged".

Ex: C<{'fname': 'Mary', 'lname': 'Major', 'gender': 'f'}>

=head2 onCancel

This event is triggered when the user presses the C<ESCAPE> key.

=head2 onEmpty 

This event is triggered when the list is empty.

=head1 EXAMPLE

=head2 JAVASCRIPT

  var my_url  = "/app/path/to/data/list";
  var my_grid = new GvaScript.Grid("ex_grid", my_url, {
    grid_container: 'ex_grid_list',
    toolbar_container: 'ex_grid_toolbar',
    dto: {VUE: 'JSON'},
    pagesize: 3,
    columns: [
        {label: 'Full Name', value: function(e) { 
            return e.fname + ' ' + e.lname;
        }},
        {label: 'Gender', value: 'gender', css: 'tcenter', default_value: 'unknown'}
    ],
    actions: [
        {
            label: 'Add', 
            condition: function() {return this.rights.can_create},
            callback: function()  {alert('Add action has been called')}
        }
    ]
  });

  // my_url response : Content-type "application/json"
  {
    'liste'  : [
        {'fname': 'John',    'lname': 'Stiles', 'gender': 'm'},
        {'fname': 'Mary',    'lname': 'Major',  'gender': 'f'},
        {'fname': 'Richard', 'lname': 'Miles',  'gender': 'm'}
    ], 
    'total'  : 15,
    'rights' : {
        can_create : 0,
        can_update : 1,
        can_delete : 0