VegUI Tutorial - The Dataset Widget

code: js

DSet.ListPanel.T.className = 'dset_list_panel';

/* we set it up so that the panel will come into view
 * in the center of the dataset
 */

DSet.ListPanel.set('div', 50, 50, 100, 100);
DSet.ListPanel.set_marg(100,100);

/* setting the z-index to make sure it is on top of everything else
 * in the dataset
 */

DSet.ListPanel.T.z = 100;

code: js

DSet.Scaler.set('div');
DSet.Scaler.T.className = 'dset_scaler';

code: js

DSet.T.columns = {
 
  /* first column, the name is up to you and is
   * not linked to the caption that will be displayed, something
   * that makes you recognize that its the first column
   * might be good tho ;)
   */

  column_1 : {
    
    /* the caption of the column */
  
    caption : 'boolean',

    /* the width of the column in percent */
    
    width : 25,
    
    /* editType - the field type, if set will allow
     * the user to edit a field in this column
     */
    
    editType : VUI_DSET_INPUT_BOOL
  },
  
  /* second column */
  
  column_2 : {
    caption : 'text',
    width : 25,
    editType : VUI_DSET_INPUT_TEXT
  },

  /* third column */
  
  column_3 : {
    caption : 'list',
    width: 25,
    editType : VUI_DSET_INPUT_LIST,

    /* this is the function that will be used to fill
     * the list that will be shown when input mode is started
     * for the third column.
     *
     * The argument submitted to the function is always
     * pointing to the list element it is supposed to fill
     */

    fill_list : function(List) {
  
      /* clear the list */
  
      List.flush();
  
      /* add 100 entries to the list */
  
      for(i = 0; i < 100; i++)
        List.add_item_txt('Some Item '+i, i, true);
  
      /* adjust the list to make sure it's scrollbars
       * are working correctly
       */
  
      List.adjust();
    }
  },

  /* fourth column */
  
  column_4 : {
    caption : 'custom',
    width : 25,

    /* the custom function that will return the
     * value for the field when the field is 
     * double clicked 
     */
    
    fetch : function() { return vui_rand(1,2500); },
    editType : VUI_DSET_INPUT_CUSTOM
  },

  /* the detailed column, which should be hidden
   * and its input type is text. The name is not optional if
   * you want to set up the detailed field 
   */
  
  detailed : {
    hidden : true,
    editType : VUI_DSET_INPUT_TEXT
  }
};

code: js

row = {
    column_1 : true,
    column_2 : 'Col 2, Row '+1,
    column_3 : 1,
    column_4 : 0,
    detailed : 'This is some rather long text that will be displayed in the detailed field!',
    id : 1
};

code: js

var i;
for(i = 0; i < 10; i++) {
  DSet.T.rows[i] = {
    column_1 : true,
    column_2 : 'Col 2, Row '+i,
    column_3 : i,
    column_4 : 0,
    detailed : 'This is some rather long text that will be displayed in the detailed field!',
    id : i
  }
}

code: js

DSet.T.multiSelect = true;

code: js

DSet.T.forceExpand = true;

code: js

Manager.build_element(DSet);

code: js

/* change value of second column in row 6 (starts at 0) */
DSet.rows[5].column_2 = 'Hello world!';
/* rebuild dataset
DSet.rebuild();

code: js

/* the argument submitted to the function is the value (id)
 * of the currently selected row
  */

DSet.delete_req = function(value) {
  var d = this;
  /* send request to the server for deletion */  
  this.Manager.Bridge.send('delete.php?v='+value,'','GET',
    function() { 
      if(this.request.responseText == '1')
        d.delete_item(value); 
    } 
  );
};

/* or for multiple items, sItems is the like the
 * sItems property in the list widget and holds all
 * selected rows */

DSet.delete_req_m = function(sItems) {
  var d = this, i, values = [];
  
  /* build value string */
  for(i in sItems) 
     values.push(sItems[i].itemValue);
  
  var vStr = values.join(',');
 
  /* send request to the server for deletion */  
  this.Manager.Bridge.send('delete.php?v='+vStr,'','POST',
    function() { 
      if(this.request.responseText == '1')
        d.delete_items(sItems); 
    } 
  );
};