This project is read-only.

Column configuration in vpGrid

 Columns are configured in a declarative manner by using a <TH> DOM element:

<th class="center"
data-vpgrid-column-name="price"
data-vpgrid-column-type="currency"
data-vpgrid-column-width="70"
data-vpgrid-column-fixed-width="true"
data-vpgrid-column-hidden="false"
data-vpgrid-column-editable="true"
data-vpgrid-column-required="true"
data-vpgrid-column-min-value="0"
data-vpgrid-column-max-value="6000"
data-vpgrid-column-align="right"
data-vpgrid-column-sortable="true"
data-vpgrid-column-filterable="true"
data-vpgrid-column-css="vpgrid-cell"
data-vpgrid-column-info="End user price. Does not include VAT">Price</th>
  
To see where to put this element in the web page, donwload the vpGrid Starter Project from the download page.
 
You can use any of the following data tags to configure a column :
  • data-vpgrid-column-name
    • defines the name of the column. This name must be unique among all other columns. This name must be valid string to create a javascript property, because the content of the column is derived from the deserialized javascript object sent by the server.
  • data-vpgrid-column-type
  • data-vpgrid-column-width
    • defines the min width of the column. If the vpGrid option fitToBrowserWidth is set to true, the actual width might be smaller in order to show the entire grid in the browser window
  • data-vpgrid-column-fixed-width
    • forces the width of the column to be fixed to the value defined by data-vpgrid-column-width, even when the fitToBrowserWidth is set to true.
  • data-vpgrid-column-hidden
    • when set to true, the column is not visible in the UI, but its content is present in the grid.
  • data-vpgrid-column-editable
    • when set to true, inline cell editing is automatically enabled. The auto generated input field is by default an input text but can be set to another type of input with the data tag data-vpgrid-column-edittype.
  • data-vpgrid-column-edittype
    • defines the type of the input field in cell editing mode when the type of the column is string.
    • possible values are :
      • select
      • autocomplete
    • For the other types of column, this data tag is not used :
      • when the type of the column is note the generated input is a TEXTAREA
      • when the type of the column is date the generated input is a textbox. This textbox is automatically bound to a datepicker.
      • when the type of the column is year the generated input is a select.
  • data-vpgrid-select-options
    • defines the content of the select element in cell editing mode.
    • this data tag is useful when the select is static and has only few elements
    • if the content of the select must be dynamically customized for each cell, then register an event handler to the vpGrid event onSelectCellRendering.
  • data-vpgrid-column-align
    • defines the position of the cell content. Possible values are :
      • left
      • center
      • right 
  • data-vpgrid-column-css
    • defines a set of CSS class names to be injected in the cell.
    • this data tag is usefull to setup a default content rendering and/or a default background color for all cells in the column.
  • data-vpgrid-column-min-value
    • defines the min value for numeric columns
    • when the grid loads a value that is below the min value, the cell is rendered with a red background color
    • when user is editing the cell, the automatic validation mechanism enforces this validation rule.
  • data-vpgrid-column-max-value
    • defines the max value for numeric columns
    • when the grid loads a value that is greater than the max value, the cell is rendered with a red background color
    • when user is editing the cell, the automatic validation mechanism enforces this validation rule.
  • data-vpgrid-column-required
    • this rules enforces the user to enter a value in the cell
  • data-vpgrid-column-sortable
    • enables the user to sort the column by clicking on the column header
  • data-vpgrid-column-filterable
    • enables to activate or de-activate the filter search input for the column.
  • data-vpgrid-column-info
    • enables to show a tooltip when the user hovers over the column header (not yet implemented)
  • data-vpgrid-column-locked
    • enables to prevent cell editing for all cells in the column. 
    • when set to true, a lock icon is displayed in the cells of the column.
  • data-vpgrid-column-placeholder
    • defines the placeholder showed in the input field when the user is in cell editing mode (not yet implemented)
  • data-vpgrid-column-summary-always-update
    • enables to force the update of the summary cell defined for this column
    • Useful when the grid contains a summary row that compute the sum of a few columns, and there is a column that holds the grant total : this enables the grant total column to automatically update whenever a total on another column has changed.
  • data-vpgrid-column-remote-validation-url
    • enables to set a remote validator for this column. The validation infrastructure will automatically call this remote validator and process its result when the user is in cell editing mode.
 
 

Last edited Sep 12, 2014 at 12:45 AM by HenridOrgeval, version 14