view release on metacpan or  search on metacpan

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

  </div>
  <div class="TN_node" id="clear">
    <h3 class="TN_label">clear</h3>
    <div class="TN_content">
      <pre>  grid.clear(msg)</pre>

<p>This method is equivalent to <code>grid.clearResult(msg)</code> and <code>grid.clearToolbar()</code></p>

    </div>
  </div>
  <div class="TN_node" id="addActionButtons">
    <h3 class="TN_label">addActionButtons</h3>
    <div class="TN_content">
      <pre>  grid.addActionButtons()</pre>

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

    </div>
  </div>
  <div class="TN_node" id="destroy">
    <h3 class="TN_label">destroy</h3>
    <div class="TN_content">
      <pre>  my_grid.destroy();</pre>

<p>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.</p>

    </div>
  </div>

    </div>
  </div>
  <div class="TN_node" id="EVENTS">
    <h2 class="TN_label">EVENTS</h2>
    <div class="TN_content">
        <div class="TN_node" id="onShow">
    <h3 class="TN_label">onShow</h3>
    <div class="TN_content">
      <p>This event is triggered of the table is rendered and displayed.
Useful for attaching custom events on table records/cells.</p>

    </div>
  </div>
  <div class="TN_node" id="onHighlight">
    <h3 class="TN_label">onHighlight</h3>
    <div class="TN_content">
      <p>This event is triggered when a choice in the list is highlighted.
The event handler may use <code>event.index</code> to know the index of the
highlighted choice.</p>

    </div>
  </div>
  <div class="TN_node" id="onPing">
    <h3 class="TN_label">onPing</h3>
    <div class="TN_content">
      <p>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 <code>RETURN</code> key.
The event handler will recieve 1 arguement <code>target</code> which is the record object that has been "Pinged".</p>
<p>Ex: <code>{'fname': 'Mary', 'lname': 'Major', 'gender': 'f'}</code></p>

    </div>
  </div>
  <div class="TN_node" id="onCancel">
    <h3 class="TN_label">onCancel</h3>
    <div class="TN_content">
      <p>This event is triggered when the user presses the <code>ESCAPE</code> key.</p>

    </div>
  </div>
  <div class="TN_node" id="onEmpty">
    <h3 class="TN_label">onEmpty</h3>
    <div class="TN_content">
      <p>This event is triggered when the list is empty.</p>

    </div>
  </div>

    </div>
  </div>
  <div class="TN_node" id="EXAMPLE">
    <h2 class="TN_label">EXAMPLE</h2>
    <div class="TN_content">
        <div class="TN_node" id="JAVASCRIPT">
    <h3 class="TN_label">JAVASCRIPT</h3>
    <div class="TN_content">
      <pre>  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,

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

      <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>
 
  &lt;/div&gt;</pre>


    </div>
  </div>
  <div class="TN_node" id="CSS">
    <h3 class="TN_label">CSS</h3>
    <div class="TN_content">
      <pre>  /* 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 */
  .dmweb-grid-toolbar {
    background:#C5CCE8 url(glass-bg-n.gif) repeat-x scroll left top;
    border:1px solid #A3BAD9;
    height:28px;
  }
  .dmweb-grid-actionsbar {float:left;}
  .dmweb-paginatorbar {float:right;width:250px;}
  .dmweb-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;}
  .dmweb-paginatorbar div.first {background:url(page-first.gif) no-repeat top center;}
  .dmweb-paginatorbar div.last {background:url(page-last.gif) no-repeat top center;}
  .dmweb-paginatorbar div.back {background:url(page-prev.gif) no-repeat top center;}
  .dmweb-paginatorbar div.forward {background:url(page-next.gif) no-repeat top center;}
  .dmweb-paginatorbar div.inactive {cursor:default;opacity:0.25;filter:alpha(opacity=25);}
  .dmweb-paginatorbar div.text {text-align:center;width:140px;color:#4b34c5;font-size:10pt;}
  .dmweb-paginatorbar span.dmweb-btn-container {display:block;margin-right:4px;}
  
  /* grid table */
  .dmweb-grid {width:100%;}
  .dmweb-grid th.grid-header {
    text-align:center;
    padding:2px;
    font-size:75%;
    color: #183E6C;
    background-color: #D0D6ED;
    border:1px solid #6F82A5;
  }
  .dmweb-grid td {font-size:75%;color:#183E6C;}
  .dmweb-grid .grid-marker {width:15px;background-color: #D0D6ED;border:1px solid #6F82A5;}
  .dmweb-grid tr.liste_highlight td.grid-marker {
    background: #D0D6ED url(selector.gif) no-repeat center center;
  }
  .dmweb-grid tr.liste_highlight td.grid-cell {background-color: #6F82A5 !important;color:#f5f5f5 !important;}
  .dmweb-grid td.grid-cell {padding:2px !important;border:1px solid #e8e8e8;}
  .dmweb-grid td.grid-cell.index_1 {background-color:#EFEFEF;}
  .dmweb-grid td.grid-cell.center {text-align:center;float:none;}
  .dmweb-grid td.grid-cell.right {text-align:right;float:none;}
  .dmweb-grid td.grid-cell.red {color:red;}</pre>


    </div>
  </div>

    </div>
  </div>
  <div class="TN_node" id="DEPENDENCIES">
    <h2 class="TN_label">DEPENDENCIES</h2>
    <div class="TN_content">
      <p>This class depends on the following GvaScript classes:</p>
<ul>
<li><a name="item_GvaScript_ChoiceList"></a><b>GvaScript.ChoiceList</b>
</li>
<li><a name="item_GvaScript_Paginator"></a><b>GvaScript.Paginator</b>
</li>
<li><a name="item_GvaScript_CustomButtons"></a><b>GvaScript.CustomButtons</b>
</li>
</ul>

    </div>
  </div>

</div>
</body>
</html>