List edit

Controls in the head line:

• Clear: empties the tabulator-list (url reload: all records are displayed again)
• Delete: selected? yes deletes selected rows, otherwise deletes all rows
• Save: selected? yes saves selected rows, otherwise saves all rows

Controls in the title line:

• ☐: select or deselet all
• sort: ▲ ascending, ▼ decending
• filter: write in your string, < and > are also allowed
•   ⋮  :Attention choose decimal point manual
• : new row (record)

Controls in the rows (record):

• ☐: select or deselet the row
• : original record
• : changed record, save it
• : delete record
• : delete row, (record not saved yet)

Keyboard, table navigation

• ↑ ↓: row up or down
• ↹ ⇧Shift: next cell or cell back

Keyboard, edit

• ← →: move between the caracters
• ↑ ↓: number or date counts up or down
• space: by datetime opens the wizard

Copy & paste

• ctrl-c: Copy to the clipboard (seleted rows are copied
• ctrl-v: Paste from the clipboard (click a free space of the list (tabulator) first.

<div class="row"> <div id="masterdata1"></div> </div> <script> // settings k8.datadefAddlistedit(settings); let mytableTab=k8.displaytabulator("#masterdata1",settings); </script>

The listedit element is made with the tabulator library.

The basic tabulator data structure is extended by the list edit element:

• k8.datadefAddlistedit(settings)

The element is displayed by the function:

• k8.displaytabulator(selector,settings)

It returns a tabulator object:

• mytableTab

{ "masterdata": { "tabulatoreditajax": 0, "tabulatormode": 2, "tabulatorbinsert": true, "tabulatordeletepos": "right", "tabulatorwrapper": true, "tabulatoredit": 0, "bresize": false } }

tabulatoreditajax

• 0: no ajax, save by yourself
• 1: (default) adds a save button to the right of each row. If a cell is edited, it needs to be saved by button click.
• 2: save the edited column directly

tabulatortabsave

Only with tabulatoreditajax 1: the save button of the row in the Tab order.

• 1: (default) after the last field Tab moves to the save button, Enter or Space press it. The changed row is saved by the keyboard.
• 0: Tab moves to the next row, the row is saved by a click on the button.

tabulatorenter

Enter in the editor of a datalist column (the page is not loaded again):

• 1: (default) to the next cell, like Tab
• 2: saves the row
• 0: nothing

tabulatormode

• 0: none
• 1: adds a save button in the foot
• 2: adds a save button in the foot and removew the row after save

tabulatorbinsert

tabulatorbinsert defines the position of a new row:

• true: adds new row at the top
• false: adds new row at the bottom

tabulatordeletepos

tabulatordeletepos defines the position of the column with the new / delete buttons:

• right: the column is the last one (default in listedit, tabulatoreditajax > 0)
• left: the column is the first one (default in the other modes)

tabulatorwrapper

True, adds a tabulatorwrapper with headline.

tabulatoredit

it's adds an icon to open a form for the record

• 0: none
• 1: icon to the left
• 2: icon to the right

bresize

True, adds a resizer.

This is the json definition for the row selection:

{ "tabulator": { "height": "311px", "clipboard": true, "tabEndNewRow": true } }

height

A specific height can be configured.

clipboard

Enables copy and paste from the table (cursor need to be placed in the table):

• strg-c copies to the clipboard
• strg-v pastes into the table

Please, pay attention to the ⋮ in the headline for the decimal numbers:

• decimal point
• auto
• decimal komma

tabEndNewRow

Automatically adds a new row by leaving the last input field.

This is the json definition of a joined tabulator column:

{ "tabulator": { "columns": [ { "title": "categoryID", "field": "categoryID", "responsive": 2, "minWidth": 120, "headerFilter": "list", "headerFilterParams": { "values": [ {"value": "","label": "please select"}, {"value": 59,"label": "customer asia"}, {"value": 60,"label": "supplier world"} ] }, "formatter": "lookup", "formatterParams": { "59": "customer asia", "60": "supplier world" }, "editor": "list", "editorParams": { "values": [ {"value": "","label": "please select"}, {"value": 59,"label": "customer asia"}, {"value": 60,"label": "supplier world"} ] } } ] } }

The joined tabulator column categoryID consist of the following properties:

• headerFilter: list
  • headerFilterParams
    • values[]
      • value: "your value", text: "your text"
• formatter: lookup
  • formatterParams{}:
    • "<value>":"<text>"
• editor: list
  • editorParams
    • values[]: same headerFilterParams

For more details look to:

• tabulator editor list
• tabulator formatter

This is the json definition for the row selection:

{ "tabulator": { selectableRows: true, rowHeader: {formatter:"rowSelection", titleFormatter:"rowSelection", titleFormatterParams:{ rowRange:"active" //only toggle the values of the active filtered rows }, hozAlign:"center", headerSort:false } } }

selectableRows allows to select rows; for example by click on the row.

The rowHeader adds a checkbox to:

• row header
• left side of the row

For more details look to:

• row selection

This is the json definition for a movable rowHandler:

{ "tabulator": { movableRows: true, //enable user movable rows rowHeader:{headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle" } } }

movableRows allows to move rows.

The row handler adds a drag handler to the rows.

For more details look to:

• movable rows

The row handler can also declared in the columns:

{ "tabulator": { movableRows: true, //enable user movable rows columns:[ { formatter:function(){return "↕";}, "hozAlign": "center", "field": "icon_handle", rowHandle: true, headerSort:false, width:40, } ] } }

The row handler adds a drag handler to the rows. Here, the icon is changed to an arrow.

For more details look to:

• movable rows