view release on metacpan or  search on metacpan

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

=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
    }
  }

=head2 HTML

  <div id="ex_container">
     
   <div tabindex="0" id="ex_grid_list">
     <table class="dmweb-grid">
       <thead>
         <tr>
           <th class="grid-marker"> </th>
           <th class="grid-header">Full Name</th>
           <th class="grid-header">Gender</th>
        </tr>
       </thead>
       <tbody>
        <tr id="ex_grid_list.CL_choice.0" class="CL_choiceItem liste_highlight">
           <td class="grid-marker"> </td>
           <td valign="top" class="grid-cell index_0">John Stiles</td>
           <td valign="top" class="grid-cell index_0 tcenter">m</td>
        </tr>
        <tr id="ex_grid_list.CL_choice.1" class="CL_choiceItem">
           <td class="grid-marker"> </td>
           <td valign="top" class="grid-cell index_1">Mary Major</td>
           <td valign="top" class="grid-cell index_1 tcenter">f</td>
        </tr>
         <tr id="ex_grid_list.CL_choice.3" class="CL_choiceItem">
           <td class="grid-marker"> </td>
           <td valign="top" class="grid-cell index_0">Richard Miles</td>
           <td valign="top" class="grid-cell index_0 tcenter">m</td>
        </tr>
      </tbody>
    </table>
   </div>
  
   <div id="ex_grid_toolbar" class="dmweb-grid-toolbar">
    <div class="dmweb-paginatorbar">
      <div title="Dernière page" class="last"></div>
      <div title="Page suivante" class="forward"></div>
      <div class="text">1 à 3 de 15</div>
      <div title="Page précédente" class="back inactive"></div>
      <div title="Première page" class="first inactive"></div>
    </div>
    <div class="dmweb-grid-actionsbar">
      <span id="grid_id_btn_0" class="dmweb-btn-container">
        <span class="left"/>
        <span class="center">
          <button class="btn" style="width: auto;" type="button">Add</button>
        </span>
        <span class="right"/>
      </span>
    </div>
   </div>
 
  </div>

=head2 CSS

  /* class given to grid list container when an AJAX request is being affected */
  .dmweb-loading {
    background:url(ajax_loading.gif) no-repeat center center;
    position:absolute;
    width:30px;height:30px;
    top:50%;left:50%;
  }

  /* grid toolbar */