view release on metacpan or  search on metacpan

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

  <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,
        can_delete : 0
    }
  }</pre>


    </div>
  </div>
  <div class="TN_node" id="HTML">
    <h3 class="TN_label">HTML</h3>
    <div class="TN_content">
      <pre>  &lt;div id="ex_container"&gt;
     
   &lt;div tabindex="0" id="ex_grid_list"&gt;
     &lt;table class="dmweb-grid"&gt;
       &lt;thead&gt;
         &lt;tr&gt;
           &lt;th class="grid-marker"&gt;&#xa0;&lt;/th&gt;
           &lt;th class="grid-header"&gt;Full Name&lt;/th&gt;
           &lt;th class="grid-header"&gt;Gender&lt;/th&gt;
        &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
        &lt;tr id="ex_grid_list.CL_choice.0" class="CL_choiceItem liste_highlight"&gt;
           &lt;td class="grid-marker"&gt;&#xa0;&lt;/td&gt;
           &lt;td valign="top" class="grid-cell index_0"&gt;John Stiles&lt;/td&gt;
           &lt;td valign="top" class="grid-cell index_0 tcenter"&gt;m&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr id="ex_grid_list.CL_choice.1" class="CL_choiceItem"&gt;
           &lt;td class="grid-marker"&gt;&#xa0;&lt;/td&gt;
           &lt;td valign="top" class="grid-cell index_1"&gt;Mary Major&lt;/td&gt;
           &lt;td valign="top" class="grid-cell index_1 tcenter"&gt;f&lt;/td&gt;
        &lt;/tr&gt;
         &lt;tr id="ex_grid_list.CL_choice.3" class="CL_choiceItem"&gt;
           &lt;td class="grid-marker"&gt;&#xa0;&lt;/td&gt;
           &lt;td valign="top" class="grid-cell index_0"&gt;Richard Miles&lt;/td&gt;
           &lt;td valign="top" class="grid-cell index_0 tcenter"&gt;m&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
   &lt;/div&gt;
  
   &lt;div id="ex_grid_toolbar" class="dmweb-grid-toolbar"&gt;
    &lt;div class="dmweb-paginatorbar"&gt;
      &lt;div title="Derni&#xe8;re page" class="last"&gt;&lt;/div&gt;
      &lt;div title="Page suivante" class="forward"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;1 &#xe0; 3 de 15&lt;/div&gt;
      &lt;div title="Page pr&#xe9;c&#xe9;dente" class="back inactive"&gt;&lt;/div&gt;
      &lt;div title="Premi&#xe8;re page" class="first inactive"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dmweb-grid-actionsbar"&gt;
      &lt;span id="grid_id_btn_0" class="dmweb-btn-container"&gt;
        &lt;span class="left"/&gt;
        &lt;span class="center"&gt;
          &lt;button class="btn" style="width: auto;" type="button"&gt;Add&lt;/button&gt;
        &lt;/span&gt;
        &lt;span class="right"/&gt;
      &lt;/span&gt;
    &lt;/div&gt;
   &lt;/div&gt;
 
  &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;