diff --git a/docs/components/data/34-o-list.component.md b/docs/components/data/34-o-list.component.md index bc68a43d9..8169919dc 100644 --- a/docs/components/data/34-o-list.component.md +++ b/docs/components/data/34-o-list.component.md @@ -13,14 +13,25 @@ nav_order: 4 The `o-list` component is used to display a series of items. There is different types of predefined list items you can add to the list component. -For adding a list component to your application you must insert the `o-list` in your page and include a `o-list-item` component wrapping the desired list item type you want to display. Check the different list items types below. +## Data binding + +The o-list component supports data binding and you can command the component to display data either from *local* or *remote* data storage + +The data array can be provided in two ways: +* Provide an array of objects to the `static-data` attribute. +* Configure the component to query the data from a service. Using `service` and `entity` attributes. +{: .note } +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). + ## List item +For adding a list component to your application you must insert the `o-list` in your page and include a `o-list-item` component wrapping the desired list item type you want to display. Check the different list items types below. ### List item: text The `o-list-item-text` component is used to display list items with a maximum of two lines of text and a title. ```html - +
diff --git a/docs/components/data/35-o-grid.component.md b/docs/components/data/35-o-grid.component.md index 3422642cb..68fe81488 100644 --- a/docs/components/data/35-o-grid.component.md +++ b/docs/components/data/35-o-grid.component.md @@ -24,6 +24,17 @@ The `o-grid` component allows you to specify a title by configuring the `title` ## Show controls The `o-grid` component shows controls by default, you can show/hide them by configuring the `show-controls` attribute. +## Data binding + +The o-grid component supports data binding and you can command the component to display data either from *local* or *remote* data storage + +The data array can be provided in two ways: +* Provide an array of objects to the `static-data` attribute. +* Configure the component to query the data from a service. Using `service` and `entity` attributes. +{: .note } +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). + ## Columns per row You can specify the number of columns shown on each row by configuring the `cols` attribute. By default, the number of columns will be automatically determined based on mediaQuery of Flex Layout. See more [here](https://github.com/angular/flex-layout/wiki/Responsive-API#mediaqueries-and-aliases). @@ -47,7 +58,7 @@ You can also configure the page size options by configuring the `show-page-size` ![Grid page size]({{ "/assets/images/components/grid/grid-page-size.png" | absolute_url }}){: .comp-example-img } ```html - @@ -86,7 +97,7 @@ You also can specify the default sorting column by configuring the `sort-column` ![Grid component]({{ "/assets/images/components/grid/grid-sortable_2.png" | absolute_url }}){: .comp-example-img } ```html - @@ -118,7 +129,7 @@ The gutter size can be set to any px, em, or rem value with the `gutter-size` pr It is possible to set the `rowspan` and `colspan` of each o-grid-item individually, using the rowspan and colspan properties. By default its values are 1. The `colspan` must not exceed the number of cols in the `o-grid`. There is no such restriction on the rowspan however, more rows will simply be added for it the tile to fill. ```html -
@@ -211,7 +222,7 @@ this.grid.filterData = function (value?: string, loadMore?: boolean) { The `o-grid` component supports *fixed header* and *footer* setting `fixed-header="yes"` when its content is greater than its own height. For that, you must set the height of the grid, using, for example `[ngStyle]="{height: 400px;}"`. By default, it's disabled. ```html - @@ -238,7 +249,7 @@ The `o-grid` component supports *fixed header* and *footer* setting `fixed-heade When building an `o-grid` component you can define your own grid item. For including a custom grid item, **OntimizeWeb** offers the `o-grid-item` directive that can be attached to an angular material grid tile (`mat-grid-tile`) . ```html - diff --git a/docs/components/data/35-o-table.component.md b/docs/components/data/35-o-table.component.md index 8ecef4dfc..5be87404f 100644 --- a/docs/components/data/35-o-table.component.md +++ b/docs/components/data/35-o-table.component.md @@ -155,7 +155,7 @@ For local data binding you simply need to supply an array of TypeScript objects/ ```html - + @@ -171,19 +171,22 @@ For local data binding you simply need to supply an array of TypeScript objects/ ``` ```javascript -getTableData(){ - const account = [ + const account = [ { PRODUCTID: 1, 'PRODUCTNAME': 'Alice Mutton', UNITPRICE: 39, UNITSINORDER: 0, UNITSINSTOCK: 1 }, { PRODUCTID: 2, 'PRODUCTNAME': 'Gorgonzola Telino', UNITPRICE: 12.5, UNITSINORDER: 70, UNITSINSTOCK: 2 }, { PRODUCTID: 3, 'PRODUCTNAME': 'Louisiana Hot Spiced Okra', UNITPRICE: 17, UNITSINORDER: 100, UNITSINSTOCK: 4 }, { PRODUCTID: 4, 'PRODUCTNAME': 'Sir Rodney Scones', UNITPRICE: 10, UNITSINORDER: 40, UNITSINSTOCK: 3 }, { PRODUCTID: 5, 'PRODUCTNAME': 'Alice Mutton', UNITPRICE: 39, UNITSINORDER: 0, UNITSINSTOCK: 0 } - ]; - return account; -} + ]; ``` -If you need the data query to be performed after the `parent-keys` is updated, `query-on-init = false` and `query-on-bind = true` must be changed +If you need the data query to be performed after the `parent-keys` is updated, `query-on-init = false` and `query-on-bind = true` must be changed. + +{: .note } + +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). +--- ### Binding to remote data @@ -384,7 +387,7 @@ You can see different predefined table cell renderers in the example below. ![Predefined table cell renderers]({{ "/assets/images/components/tabla/renderers_table.png" | absolute_url }}){: .comp-example-img} ```html - + @@ -901,7 +904,7 @@ The `o-table` component supports *fixed header* and *footer* setting `fixed-head

Example

```html - diff --git a/docs/components/input/02-o-combo.component.md b/docs/components/input/02-o-combo.component.md index 37fb6b271..380db2f6f 100644 --- a/docs/components/input/02-o-combo.component.md +++ b/docs/components/input/02-o-combo.component.md @@ -20,6 +20,9 @@ This component is different than most of other inputs, an array of data must be The data array can be provided in two ways: * Provide an array of objects to the `static-data` attribute (see the [example](#basic-example) below). * Configure the component to query the data from a service. Using `service` and `entity` attributes. +{: .note } +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). ## Basic example ![Combo component]({{ "/assets/images/components/inputs/o-combo.png" | absolute_url }}){: .comp-example-img} diff --git a/docs/components/input/09-o-list-picker.component.md b/docs/components/input/09-o-list-picker.component.md index 25eff2121..ead2bc24c 100644 --- a/docs/components/input/09-o-list-picker.component.md +++ b/docs/components/input/09-o-list-picker.component.md @@ -21,6 +21,9 @@ This component is different than most of other inputs, an array of data must be The data array can be provided in two ways: * Provide an array of objects to the `static-data` attribute (see the [example](#basic-example) below). * Configure the component to query the data from a service. Using `service` and `entity` attributes. +{: .note } +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). Once some data has been provided to the component, the user can see the option list by clicking in the search button of the component. Choosing an option, the list will close up and the selected value will be set to the input. diff --git a/docs/components/input/16-o-radio.component.md b/docs/components/input/16-o-radio.component.md index cb9a6151a..7050bb652 100644 --- a/docs/components/input/16-o-radio.component.md +++ b/docs/components/input/16-o-radio.component.md @@ -20,16 +20,19 @@ This component is different than most of other inputs, an array of data must be The data array can be provided in two ways: * Provide an array of objects to the `static-data` attribute (see the [example](#basic-example) below). * Configure the component to query the data from a service. Using `service` and `entity` attributes. +{: .note } +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). ## Basic example ![Radio component]({{ "/assets/images/components/inputs/o-radio.png" | absolute_url }}){: .comp-example-img} ```html - - ``` diff --git a/docs/components/o_service_components/00-o-service-base.component.md b/docs/components/o_service_components/00-o-service-base.component.md index 5d70116b2..37c0a5632 100644 --- a/docs/components/o_service_components/00-o-service-base.component.md +++ b/docs/components/o_service_components/00-o-service-base.component.md @@ -42,6 +42,10 @@ For local data binding you simply need to supply an array of TypeScript objects/ If you need the data query to be performed after the `parent-keys` is updated, `query-on-init = false` and `query-on-bind = true` must be changed +{: .note } +>Passing function calls directly to `static-data` (e.g. `[static-data]="getData()"`) is a **bad practice** that causes continuous re-evaluation and leads to malfunctioning behavior in components such as **o-list, o-table, o-grid and o-tree**. +Always pass a static reference instead (e.g. `[static-data]="data"`). + ## Define columns You have to define the `columns` of the database entity (if binding to remote data) or the properties of the static data items (when binding to local data).