templated.cell.view

TableCellView : d2/sdk/controls/table/cells/templated.cell.view

Interface for classes that want to implement a table's cell view.

After defining a new cell implementation, it has to be registered with CellRegistry. If column is an attribute of custom type, then use custom type prefix before the column name(Example: custom_type.modified_info) and use the same for registering the cell view. Created custom cell implementation module need to be included manually in other modules.

Extends: Marionette.View
See: TableCellRegistry

info

Limitation in table "List" mode

When table is having more column, then columns which fits in viewport will be shown in the table row. Rest of the columns will wrapped and shown as read only form. If the column is wrapped, then custom cell view won't be rendered inside the form. Custom Table cell will be rendered only in the visible table column.

Example

//In mybundle/table/cells/template/my.cell.hbs define the template as
<div class="my-cell-wrapper">
  <a class="my-cell-container" title="{{title}}">
     <span class="my-cell-data">{{data}}</span>
  </a>
</div>

//Then in a cell implementation module
define([
 'nuc/lib/underscore',
 'd2/sdk/controls/table/cells/cell.registry',
 'd2/sdk/controls/table/cells/templated.cell.view',
 'hbs!mybundle/table/cells/my.cell'
], function(_, CellRegistry, TemplatedCellView, template){
 'use strict';

 var MyCellView = TemplatedCellView.extend({
   template: template,
   renderValue: function() {
     var tmplData = {
       data: this.options.column ? TemplatedCellView.getValue(this.model, this.options.column): '',
       title: this.getValueText()
     };

     var html = '';
     if(!_.isEmpty(tmplData.data)) {
       tmplData.data = '' + tmplData.data;
       html = this.template(tmplData);
     }

     this.$el.html(html);
   }
 });
 //Whenever a table is rendered where the backing collection has 'd2_custom_column' in its column definition, this cell view implementation willl be linked.
 CellRegistry.registerByColumnKey('d2_custom_column', MyCellView);
 //Use custom type prefix before the column name for custom type columns.
 CellRegistry.registerByColumnKey('cust_type.d2_custom_column', MyCellView);
 return MyCellView;
});

// Then add Cell implementation module in startup.js
define([
  'mybundle/table/cell/modified.by/modified.by.view'
], function(){
  'use strict';

  return {
    beforeStartup: function() {},
    afterStartup: function() {}
  };
});

• TableCellView : d2/sdk/controls/table/cells/templated.cell.view
  • static
    • .columnClassName : string
    • .getValue(model, column)
  • inner
    • ~TemplatedCellView
      • new TemplatedCellView(options)
    • ~renderValue() ⇒ void
    • ~getValueText() ⇒ string

TableCellView.columnClassName : string

CSS classname to be added for this column

Kind: static property of TableCellView

TableCellView.getValue(model, column)

Kind: static method of TableCellView
Decription: Get value of this cell

Param	Type	Description
model	Backbone.Model	The model holding data for this cell
column	*	Column definition of this cell.

TableCellView~TemplatedCellView

Kind: inner class of TableCellView

new TemplatedCellView(options)

Param	Type	Description
options	object	Constructor options. Following are the options specifically supported by the list apart from those from its supertype.
options.column	*	Column definition for this table cell.

TableCellView~renderValue() ⇒ void

Render the value associated with this cell. Contains logic to render and sytlize the corresponding DOM element

Kind: inner abstract method of TableCellView

TableCellView~getValueText() ⇒ string

Get renderable formatted value for this table cell. Same value will be considered while performing inline filter on the table. When Columns are wrapped, the same value will be displayed.

Kind: inner abstract method of TableCellView