Skip to main content

Introducing Formengine - The New Formbuilder, try for FREE formengine.io.

Collection components

Grid view​

It is used to display data in table view and also can manage record editing forms display, which can be opened in modal windows or side panels or by changing the current page. There is no inline editing in this grid. This component can work with server paging. It is based on React Data Grid.

Additional General properties​

  • Edit type - defines whether Form or Business Flow will be opened to edit grid.
    • Form - form will be opened, which title is set in Edit form property.
    • Flow - business flow's form will be opened. Business Flow name is set in Edit flow property.
  • Edit form show type - defines method which will be used to show edit form.
    • Default - opens a page with form in the same browser tab. Url will be changed.
    • Modal - opens form in a modal window.
    • Sidebar - opens form in a sidebar. This function is based on this component.
  • Sidebar direction - defines direction side bar will slide out of. Relevant values here are Right or Left.
  • Pagination type - if selected Server, grid will load data from server progressively by page.
  • Page size - number of rows on a data page with server paging on.
  • Row key - attribute name in Data Model, which is primary key. This field is required if you're planning to change data using grid.
  • Multiselect - if on, column with checkboxes will be displayed for multiple choice of rows. It is reasonable to switch it on, if you are planning to delete several records via grid.
  • Disable sorting - turns off sorting in grid.
  • Default sort - sorting by default. For example, 'Name ASC, Value DESC', i.e. sorting by several columns is possible.
  • Auto height - if on, height will automatically be set by the height of the component grid is positioned in.
  • Offset - height will be reduced by this value, if Auto height is on.
  • Min height - minimal Grid View height.
  • Row height - sets grid height.
  • Columns - table in which all grid columns are described. Each column is described by the following properties:
    • Key - column name used in binding form to data or in code.
    • Name - displayed column name.
    • Type - column type, changes its drawing. Allowed values:
      • text - is used to display text.
      • number - is used to display numbers.
      • checkbox - is used to display boolean values as checkbox.
      • date, datetime or time - is used to display date and/or time.
      • custom - is used to install custom value formatters.
    • Width - column width in per cent or pixels.
    • Resizable - if on, you can resize column width.

Events​

  • onRowClick - is called by clicking on grid row once.
  • onRowDblClick - is called by double-clicking on grid row.
  • onSelectionChanged - is called when changing grid row selection.
  • onModalClosed - is called when modal editing window or modal window for creating a new grid record is closed. Is called only if Edit form show type = Modal or Edit form show type = Sidebar.

Collection editor​

It is used for inline data editing in a table view. This component doesn't support server paging. You can also use it to edit hierarchical data.

Additional General properties​

  • Id field - attribute name in Data Model, which is primary key. The field is required.
  • Draggable - allows you to drag rows and change their positions.
  • Hierarchical - allows you to edit hierarchical data. Turn on Draggable property to attach rows to another parent (i.e. to change hierarchy).
  • ParentId field - attribute name in Data Model, which is a link to parent. This field is required, if Hierarchical property is on.
  • Readonly - component cannot be edited.
  • Disable add - you can edit existing records, but you cannot add new records.
  • Collapse all - if hierarchy is displayed in component, it will collapse, and only highest level data will be displayed.
  • Columns - table in which all table columns are described. Each column is described by the following properties:
    • Key - column name used in binding form to data or in code.
    • Name - displayed column name.
    • Control - control which will be used to edit value. Allowed values:
      • input - regular text input will be drawn.
      • number - regular number input will be drawn.
      • checkbox - checkbox will be drawn.
      • date, datetime - calendar to select date or time and date will be drawn.
      • file - column to work with files.
      • span - to display value with editing disabled.
      • custom - in this case dropzone will be drawn in the designer instead of editing control. You can drag here any control from those described in this section and customize it the way you want.
    • Width - column width in per cent or pixels.

Events​

  • onChange - is called when changing records via Collection editor.
  • onAdd - is called when adding record to collection.
  • onDelete - is called when deleting record from collection.
  • onCopy - is called when copying record to collection.

Repeater​

Component which displays collection entities in a fully customized editing form. It supports server paging, but you can't edit entities in this mode yet. When adding this component to form, it has an appearance of a dropzone, in which you can create random item editing / display form. It is recommended to add the following components into it to improve item card appearance.

  • Add Repeater component to form. You can set Custom CSS class = dwkit-cards property in the Style tab.
  • Add DIV component into the repeater component. Set the Custom CSS class = dwkit-card property in the Style tab. This will be cards container.
  • Add DIV component into the cards container. Set Custom CSS class = dwkit-card-header property in the Style tab. This will be card header.
  • Add DIV component into the cards container. Set Custom CSS class = dwkit-card-body property in the Style tab. This will be card body.
  • You can drag any elements which deal with header displaying into the card header.
  • You can add Form and Form Group components into the card body and create a neat editing form. Or you can add StaticContent component into the card body and draw a readonly entity using Substitution expressions.
<div class="row">
  <div class="key">Name</div>
  <div class="value"><a href="/form/DocumentEdit/{row.Id}">{row.Name}</a></div>
</div>
<div class="row">
  <div class="key">Amount</div>
  <div class="value">{row.Amount}</div>
</div>
<div class="row">
  <div class="key">State</div>
  <div class="value">{row.State}</div>
</div>
<div class="row">
  <div class="key">Author</div>
  <div class="value">{row.AuthorId_Name}</div>
</div>
<div class="row">
  <div class="key">Manager</div>
  <div class="value">{row.ManagerId_Name}</div>
</div>
  • if you want to add buttons into the card, it will be practical to place then in DIV with Custom CSS class = dwkit-card-buttons

Thus, you can get neat cards with server paging.

Additional General properties​

  • Slider - if this checkbox is checked, repeater will turn into slider, i.e. it will start drawing one item only with an option to scroll items to the left and to the right.
  • Item Visible Condition - function which returns true or false. It is similar to Visible Condition function in the Other tab. Defines item visibility. You can refer to the variable data, containing current item value, in this code.
  • Default sort - sorting by default. For example, 'Name ASC, Value DESC', i.e. sorting by several attributes is possible.
  • Pagination type - if selected Server, repeater will load data from server progressively by page.
  • Page size - number of rows on a data page with server paging on.
  • Load data label - text which will be displayed on the next data page loading button, when server paging is on.
  • No Record Button Label - text, which will be displayed instead of the new page loading button, when there are no entities in the repeater, when server paging is on.