Skip to content

Modified static-data example #710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nprol merged 4 commits into from
Nov 26, 2025
Merged

Modified static-data example #710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1438887
modified static-data example
Nov 24, 2025
16677d8
Added note about using static-data
Nov 24, 2025
da75de2
Modified all static-data examples and added more information about it
Nov 25, 2025
33a2b75
Deleted non-existent references
Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions docs/components/data/34-o-list.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<o-list #list keys="id" columns="id;name;username;email" [static-data]="getUsers()"
<o-list #list keys="id" columns="id;name;username;email" [static-data]="users"
title="List" quick-filter="true" quick-filter-columns="name;username;email"
refresh-button="true" insert-button="false" delete-button="false"
selectable="false" detail-button-in-row="false"
Expand All @@ -44,7 +55,7 @@ You can see an example of this component in the [OntimizeWeb playground]({{site.
The `o-list-item-avatar` component is used to display list items with an avatar and a maximum of two lines of text and a title.

```html
<o-list #list keys="id" columns="id;name;username;email" [static-data]="getUsers()"
<o-list #list keys="id" columns="id;name;username;email" [static-data]="users"
title="List" quick-filter="true" quick-filter-columns="name;username;email"
refresh-button="true" insert-button="false" delete-button="false"
selectable="false" detail-button-in-row="false"
Expand All @@ -68,7 +79,7 @@ The `o-list-item-card` component is used to display a card list item with text,

```html
<o-list #list attr="list" title="List" columns="id;name;username;email;street;phone" keys="id"
[static-data]="getStaticData()" refresh-button="true" quick-filter="true" insert-button="false"
[static-data]="data" refresh-button="true" quick-filter="true" insert-button="false"
row-height="medium" detail-mode="none">
<o-list-item *ngFor="let row of list.dataArray">
<o-list-item-card #item title="{{ row.username }}" subtitle="{{ row.name }}" show-image="true" image="{{ row.image }}"
Expand All @@ -89,7 +100,7 @@ The `o-list-item-card-image` component is used to display card list items with a

```html
<o-list #list attr="list" title="List" columns="id;name;username;email;street;phone" keys="id"
[static-data]="getStaticData()" refresh-button="true" insert-button="false"
[static-data]="data" refresh-button="true" insert-button="false"
quick-filter="no" row-height="medium" detail-mode="none">
<o-list-item *ngFor="let row of #list.dataArray">
<o-list-item-card-image title="{{ row.username }}" subtitle="{{ row.name }}" content="{{ row.body }}"
Expand All @@ -109,7 +120,7 @@ You can see an example of this component in the [OntimizeWeb playground]({{site.
When building an `o-list` component you can include one of the predefined list items the **OntimizeWeb** offers or you can include your own list item. For including a custom list item, **OntimizeWeb** offers the `o-list-item` directive that can be attached to an angular material list item (`mat-list-item`) or an angular material card (`mat-card`).

```html
<o-list #list attr="list" columns="id;name;username;email;street;phone" quick-filter-columns="name;username" [static-data]="getStaticData()">
<o-list #list attr="list" columns="id;name;username;email;street;phone" quick-filter-columns="name;username" [static-data]="data">
<mat-card *ngFor="let row of list.dataArray" [o-list-item]="row">
<mat-card-header>
<div mat-card-avatar>
Expand Down
21 changes: 16 additions & 5 deletions docs/components/data/35-o-grid.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -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
<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="getStaticData()"
<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="staticData"
show-page-size="yes" page-size-options="24;32;64">
<o-grid-item *ngFor="let list of grid.dataArray">
<o-column layout-padding class="container-item">
Expand Down Expand Up @@ -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
<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="getStaticData()"
<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="staticData"
orderable="yes" quick-filter="yes" sortable-columns="name:desc;email" sort-column="name" grid-item-height="1:2">
<o-grid-item *ngFor="let list of grid.dataArray">
<o-column layout-padding class="container-item">
Expand Down Expand Up @@ -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
<o-grid #grid attr="grid" [static-data]="getStaticData())" columns="text;cols;rows;color" cols="4"
<o-grid #grid attr="grid" [static-data]="staticData" columns="text;cols;rows;color" cols="4"
grid-item-height="100px" controls="no" gutter-size="0">
<o-grid-item *ngFor="let list of grid.dataArray" [colspan]="list.cols" [rowspan]="list.rows">
<div [style.background]="list.color" fxFill>
Expand Down Expand Up @@ -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
<o-grid #grid attr="grid" [static-data]="getStaticData()" columns="id;name;username;email;companyname"
<o-grid #grid attr="grid" [static-data]="staticData" columns="id;name;username;email;companyname"
keys="id" fixed-header="yes" [ngStyle]="{height:400px}" pagination-controls="yes" query-rows="8">
<o-grid-item *ngFor="let list of grid.dataArray">
<o-column layout-padding class="container-item">
Expand All @@ -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
<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="getStaticData()"
<o-grid #grid columns="id;name;username;email;companyname" keys="id" [static-data]="staticData"
orderable="yes" quick-filter="yes" grid-item-height="1:2" sortable-columns="name;email">
<o-grid-item *ngFor="let list of grid.dataArray">
<o-column layout-padding class="container-item">
Expand Down
21 changes: 12 additions & 9 deletions docs/components/data/35-o-table.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ For local data binding you simply need to supply an array of TypeScript objects/

```html

<o-table attr="accounts" columns="CARDID;CARDTYPE;NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" visible-columns="NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" title="ACCOUNTS" [static-data]="getStaticData()" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
<o-table attr="accounts" columns="CARDID;CARDTYPE;NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" visible-columns="NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" title="ACCOUNTS" [static-data]="account" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
<o-table-columns-filter columns="NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE"></o-table-columns-filter>
<o-table-column attr="NUMCARD" title="NUMCARD">
<o-table-column-renderer-cardtype></o-table-column-renderer-cardtype>
Expand All @@ -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

Expand Down Expand Up @@ -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
<o-table attr="accounts" columns="PHOTO;NAME;ACCOUNT;BALANCE;STARTDATE;NUMCARDS;ENDDATE;INTERESRATE;CLOSED" visible-columns="PHOTO;NAME;STARTDATE;ACCOUNT;BALANCE;NUMCARDS;INTERESRATE;COMMISSION" title="ACCOUNTS" [static-data]="getTableData()" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
<o-table attr="accounts" columns="PHOTO;NAME;ACCOUNT;BALANCE;STARTDATE;NUMCARDS;ENDDATE;INTERESRATE;CLOSED" visible-columns="PHOTO;NAME;STARTDATE;ACCOUNT;BALANCE;NUMCARDS;INTERESRATE;COMMISSION" title="ACCOUNTS" [static-data]="tableData" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
<!--Date Renderer-->
<o-table-column attr="STARTDATE" title="STARTDATE" type="date"> </o-table-column>
<!--Currency Renderer-->
Expand Down Expand Up @@ -901,7 +904,7 @@ The `o-table` component supports *fixed header* and *footer* setting `fixed-head

<h3 class="grey-color">Example</h3>
```html
<o-table #table attr="table" title="ACCOUNTS" fixed-header="yes" [static-data]="getTableData()" columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
<o-table #table attr="table" title="ACCOUNTS" fixed-header="yes" [static-data]="tableData" columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
visible-columns="ENTITYID;OFFICEID;CDID;ANID;ACCOUNTTYP;BALANCE" layout-padding sort-columns="ANID" query-on-init="false"
quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no"
[ngStyle]="height:400px">
Expand Down
3 changes: 3 additions & 0 deletions docs/components/input/02-o-combo.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
3 changes: 3 additions & 0 deletions docs/components/input/09-o-list-picker.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
7 changes: 5 additions & 2 deletions docs/components/input/16-o-radio.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<o-form editable-detail="false" show-header="no">
<o-radio attr="radio-editable" label="{{ 'INPUT.BUTTON.RADIO' | oTranslate }}" [static-data]="getDataArray()"
<o-radio attr="radio-editable" label="{{ 'INPUT.BUTTON.RADIO' | oTranslate }}" [static-data]="data"
[data]="getValue()" value-column="key" columns="key;value" visible-columns="value" read-only="no" required="yes"
tooltip="This is an awesome tooltip!" tooltip-position="below"></o-radio>
<o-radio attr="radio-disabled" label="{{ 'INPUT.BUTTON.RADIO' | oTranslate }}" [static-data]="getDataArray()"
<o-radio attr="radio-disabled" label="{{ 'INPUT.BUTTON.RADIO' | oTranslate }}" [static-data]="data"
[data]="getValue()" value-column="key" columns="key;value" visible-columns="value" enabled="no"></o-radio>
</o-form>
```
Expand Down
4 changes: 4 additions & 0 deletions docs/components/o_service_components/00-o-service-base.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down