view release on metacpan or  search on metacpan

doc/html/Grid.html  view on Meta::CPAN

  <a class="TN_label" href="#clear">clear</a>
  <div class="TN_content"></div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#addActionButtons">addActionButtons</a>
  <div class="TN_content"></div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#destroy">destroy</a>
  <div class="TN_content"></div>
</div>
</div>
</div>
<div class="TN_node">
  <a class="TN_label" href="#EVENTS">EVENTS</a>
  <div class="TN_content"><div class="TN_leaf">
  <a class="TN_label" href="#onShow">onShow</a>
  <div class="TN_content"></div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#onHighlight">onHighlight</a>
  <div class="TN_content"></div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#onPing">onPing</a>
  <div class="TN_content"></div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#onCancel">onCancel</a>
  <div class="TN_content"></div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#onEmpty">onEmpty</a>
  <div class="TN_content"></div>
</div>
</div>
</div>
<div class="TN_node">
  <a class="TN_label" href="#EXAMPLE">EXAMPLE</a>
  <div class="TN_content"><div class="TN_leaf">
  <a class="TN_label" href="#JAVASCRIPT">JAVASCRIPT</a>
  <div class="TN_content"></div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#HTML">HTML</a>
  <div class="TN_content"></div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#CSS">CSS</a>
  <div class="TN_content"></div>
</div>
</div>
</div>
<div class="TN_leaf">
  <a class="TN_label" href="#DEPENDENCIES">DEPENDENCIES</a>
  <div class="TN_content"></div>
</div>

       </div>
     </div>
     <hr/>
   </div>
  </div>
  <div class="TN_node" id="NAME">
    <h2 class="TN_label">NAME</h2>
    <div class="TN_content">
      <p>Alien::GvaScript::Grid - ChoiceList based Grid with Pagination</p>

    </div>
  </div>
  <div class="TN_node" id="SYNOPSIS">
    <h2 class="TN_label">SYNOPSIS</h2>
    <div class="TN_content">
      <pre>  var my_url  = "/app/path/to/data/list";
  var grid_id = "my_unique_grid_id";
  
  var my_grid = new GvaScript.Grid(grid_id, my_url, {
        css: 'grid-class-name',
        grid_container: 'grid_will_display_here',
        toolbar_container: 'grid_toolbar_will_display_here',
        dto: {VUE: 'JSON'},
        columns: [
            {label: 'Full Name', value: function(e) { 
                return e.lname.toUpperCase() + ' ' + e.name;
            }},
            {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')}
            }
        ],
        grabfocus: true,
        onShow: function() {
        
        },
        onEmpty: function() {
            $('grid_will_display_here').update('empty list was retrieved');
        },        
        onPing: function(target) {
            alert('record:\n'+$H(target).inspect() + '\nin grid has been pinged!')}
        }, 
        onCancel: function() {alert('ESC pressed')}
    });</pre>


    </div>
  </div>
  <div class="TN_node" id="DESCRIPTION">
    <h2 class="TN_label">DESCRIPTION</h2>
    <div class="TN_content">
      <p>Displays a dataset in a grid format.  
Dataset is bound to a JSON datasource retrieved via an AJAX request.</p>
<p>JSON object has a predefined format that the Grid class understands and renders.</p>
<p>A Grid is made up of two components:</p>
<ul>
<li><a name="item_Grid_Result"></a><b>Grid Result</b>
<p>The grid (table) that would be the container to display the result dataset.
Result is displayed with the help of <code>GvaScript.ChoiceList</code>.</p>