Categories

.uiContentlist()

Categories: UI

.uiContentlist( [ options ] )

Subclass: ep

Inherit: (Subclass: ep) .widget()

Plugin: ep.ui.contentlist

Description: Make table cell content editable.

  • .uiContentlist( [ options ] )

    version added: 6.12.0

    options   A map of additional options pass to the method.

The .uiContentlist() method makes table cells editable, which are marked with the attribute data-ep-editable="true".

The cells content must be wrapped in a HTML-Element as span or div. The data-ep-attribute-value represents the name of the objects attribute on which the saveAction should be executed. The innerHTML will be saved.

If the edited values should be saved, the Input in the first cell in the following example must be an input-element, containing the object id of the destinated object in the value-attribute. First cell and input-element must have the class Checkbox.

<td class="Checkbox"><input type="checkbox" class="Checkbox" value="12345" /></td>
  • Apply editable feature to a table.

    HTML:
    <table id="contentTable" class="ContentList">
      <tr>
        <td class="Checkbox">Input</td>
        <td class="OneQuarter" data-ep-editable="true"><span data-ep-attribute="Name">Text</span></td>
        <td class="OneQuarter AlignRight editable50" data-ep-editable="true"><div data-ep-attribute="Price" data-ep-additional="CurrencyID">199,95 &euro;</div></td>
        <td class="OneQuarter AlignRight editable40" data-ep-editable="true"><div data-ep-attribute="StockLevel">0</div></td>
      </tr>
    </table>
    
    Code:
    ep('#contentTable').uiContentlist({
      'saveAction': 'Save',
      'region': jQuery.i18n.settings.region,
      'editIcon': true
    });
    
    
  • saveAction

    version added: 6.12.0

    Name of the SaveAction

    Default: Save

  • region

    version added: 6.12.0

    region-string like de-DE

    Default: de-DE

  • currency

    version added: 6.12.0

    currency-string representing the current currency

    Default: EUR

  • editIcon

    version added: 6.12.0

    A boolean indication whether an edit icon should be shown.

    Default: true

  • alterIcon

    version added: 6.12.0

    A boolean indicator whether the edit icon should always be shown on the right side (false) or depending by the horizontal alignment (true)

    Default: false