Installation

Open a HTML file and for example, if you are using the IntegralUI Grid component, import the component file:

<script type="module" src="./integralui/components/integralui.grid.js"></script>

Depending on whether you will use templates, services, enumerations or other components like editors, you also need to import them:

<script type="module">

    // (Optional) Templates in Grid component are using LitElement syntax
    // You can find this library already present in /external folder as part of IntegralUI Web
    import { html } from './integralui/external/lit-element.js';
    import { classMap } from './integralui/external/class-map.js';
    import { styleMap } from './integralui/external/style-map.js';

    // (Optional) A common service with helpful functions
    import IntegralUICommonService from './integralui/services/integralui.common.service.js';

    // (Optional) Enumerations that you may use like IntegralUITheme
    import { IntegralUISelectionMode, IntegralUITheme } from './integralui/components/integralui.enums.js';

</script>
                                        

Place the component in HTML using its tag. In case of Grid component use iui-grid. Here is an example:

<iui-grid id="grid-overview"
    allow-animation="true"
    resource-path="./integralui/icons"
    selection-mode="MultiExtended"
    theme="Office"
></iui-grid>
                                        

Only simple properties (boolean or string) can be set via HTML using attrributes. For complex properties like objects, use JavaScript (you can find example below under step 5).

In this case, the Grid has:

• animations active
• resource path is relative to the location where icons, images or other resources are present that are used by the Grid component.
• selection of multiple rows is enabled
• Office theme is selected
• the id attribute is set, used to get a reference to the component

Get a reference to the component using the id attribute (or any other attribute or class that you can use to locate the component in the DOM)

const grid = document.querySelector('#grid-overview');

Using this reference you can set any component properties or call methods.

For Grid component the most important properties are columns and rows, which hold a reference to arrays for columns and rows that you want to show.

// An array of column objects
grid.columns = [
    { id: 1, headerText: "Title", width: 300 },

    // . . .

];

// An array of row objects that contains array of cell objects
grid.rows = [
    { 
        id: 1, 
        cells: [    
            // cid means column's id 
            // the content of this cell will be displayed under column with corresponding id
            { cid: 1, text: "Cell 11"}  

            // . . .
        ]
    },

    // . . .

];
                                        

A detailed information on structure of column, row and cell objects is available in the Grid API, under Data section.

To populate the grid with rows from a remote data source, you can first fetch the data and then call the loadData method:

fetch("grid-overview-data.json") 
    .then(response => response.json()) 
    .then(data => {
        // Suspend the grid layout from updates, to increase performance
        grid.suspendLayout();

        // Load data into the grid
        grid.loadData(convertJSONData(data), null, null, false);

        // Resume and update the grid layout
        grid.resumeLayout();
    });
                                        

The Grid is using objects for columns, rows and cells. If your data source is in different format you need to convert the data (when received from the server) in a format acceptable by the Grid component. You can find an example of this conversion here Convert JSON Data into Grid Component or in QuickStart samples, in case for Grid component in grid-overview.html sample.

Because of virtualization, you need to set up the Grid size. By default the component width and height are auto. Using size property, you can specify the component width and height in pixels. If they are not specified, the default value is used (auto or CSS settings).

grid.size = { width: 800, height: 400 }

And finally, to handle events use the standard addEventListener method to create an event handler. For example for valueChanged event:

grid.addEventListener("valueChanged", (e) => gridValueChanged(e));

let gridValueChanged = function(e){
    console.log("value changed event fired", e.detail);
}
                                        

In case of Web Components, the event data is carried within the event detail field.

In root application (usually it is app.module.ts) file enable use of Web Components by importing and setting the CUSTOM_ELEMENTS_SCHEMA.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
                                        

In AppComponent file, if you are using the IntegralUI Grid component, import the component file:

import './integralui/components/integralui.grid';

Here it is presumed that IntegralUI Web is installed under src/app folder. If you are installing the library from npm, then change the path to /node_modules/integralui-web.

Depending on whether you will use templates, services, enumerations or other components like editors, you also need to import them:

// (Optional) Templates in Grid component are using LitElement syntax
// You can find this library already present in /external folder as part of IntegralUI Web
import { html } from './integralui/external/lit-element';
import { classMap } from './integralui/external/class-map';
import { styleMap } from './integralui/external/style-map';

// (Optional) A common service with helpful functions
import IntegralUICommonService from './integralui/services/integralui.common.service';

// (Optional) Enumerations that you may use like IntegralUITheme
import { IntegralUISelectionMode, IntegralUITheme } from './integralui/components/integralui.enums';
                                        

Place the component in HTML using its tag. In case of Grid component use iui-grid. Here is an example:

<iui-grid #grid
    [allowAnimation]="true"
    [columns]="columns"
    [rows]="rows"
    [resourcePath]="currentResourcePath"
    [selectionMode]="currentSelectionMode"
    [size]="gridSize"
    [theme]="currentTheme"
></iui-grid>
                                        

In this case, the Grid has:

• animations active
• column and rows
• resource path is relative to the location where icons, images or other resources are present that are used by the Grid component.
• selection of multiple rows is enabled
• Office theme is selected
• size is specified in code
• the #grid attribute is set, used to get a reference to the component

Get a reference to the component using the angular variable #grid (you can use any other name to locate the component in the DOM)

@ViewChild('grid', { static: false }) grid!: ElementRef;

Using this reference you can set any component properties or call methods.

For Grid component the most important properties are columns and rows, which hold a reference to arrays for columns and rows that you want to show.

// An array of column objects
public columns: Array<any> = [];

// An array of row objects that contains array of cell objects
public rows: Array<any> = [];

// Other properties
public gridSize: any = { width: 800, height: 400 };
public currentResourcePath: string = 'app/integralui/icons';
public currentSelectionMode: IntegralUISelectionMode = IntegralUISelectionMode.MultiExtended;
public currentTheme: IntegralUITheme = IntegralUITheme.Office;

// You can intialize data within the constructor
constructor(){
    this.columns = [
        { id: 1, headerText: "Title", width: 300 },

        // . . .

    ];

    this.rows = [
        { 
            id: 1, 
            cells: [    
                // cid means column's id 
                // the content of this cell will be displayed under column with corresponding id
                { cid: 1, text: "Cell 11"}  

                // . . .
            ]
        },

        // . . .

    ];
}
                                        

A detailed information on structure of column, row and cell objects is available in the Grid API, under Data section.

To populate the grid with rows from a remote data source, you can first fetch the data using HttpClient and then call the loadData method:

import { HttpClient } from '@angular/common/http';

export class AppComponent {

    constructor(private http: HttpClient){}
    
    ngAfterViewInit(){
        // Load data into the Grid from a JSON file
        let self = this;

        // Use HTTP service to get data from the specified JSON file
        self.http.get("./assets/grid-overview-data.json").subscribe((data: any) => {
            // Suspend the grid layout from updates, to increase performance
            self.grid.nativeElement.suspendLayout();

            // Load data into the grid
            self.grid.nativeElement.loadData(this.convertJSONData(data), null, null, false);

            // Resume and update the grid layout
            self.grid.nativeElement.resumeLayout();
        });
    }
}
                                        

The Grid is using objects for columns, rows and cells. If your data source is in different format you need to convert the data (when received from the server) in a format acceptable by the Grid component. You can find an example of this conversion here Convert JSON Data into Grid Component or in QuickStart samples, in case for Grid component in grid-overview.ts sample.

To handle events set the event and handler name in HTML and set the handler code in TypeScript. For example for valueChanged event:

HTML

<iui-grid #grid

    // set grid properties here

    (valueChanged)="gridValueChanged($event)"

></iui-grid>
                                        

TypeScript

gridValueChanged(e: any){
    console.log("value changed event fired", e.detail);
}
                                        

In case of Web Components, the event data is carried within the event detail field.

Because of virtualization, you need to set up the Grid size. By default the component width and height are auto. Using size property, you can specify the component width and height in pixels. If they are not specified, the default value is used (auto or CSS settings).

public gridSize: any = { width: 800, height: 400 };

To use icons provided by IntegralUI Web library, make sure you add the following line under angular.json file, under "assets" section:

. . .

"assets": [
    "src/app/integralui/icons",
    "src/assets"
],
                                        

Here it is presumed that IntegralUI Web is installed under src/app folder. If you are installing the library from npm, then copy/paste the /node_modules/integralui-web/icons/ under /assets folder in your project.

Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /wrappers directory, which are ReactJS components that provide all public API from an IntegralUI component

Create a new component file and if you are using the IntegralUI Grid component, import the component file:

import IntegralUIGridComponent from './integralui/wrappers/react.integralui.grid.js';

Here it is presumed that IntegralUI Web is installed under src/app folder. If you are installing the library from npm, then change the path to /node_modules/integralui-web.

Depending on whether you will use templates, services, enumerations or other components like editors, you also need to import them:

// (Optional) Templates in Grid component are using LitElement syntax
// You can find this library already present in /external folder as part of IntegralUI Web
import { html } from './integralui/external/lit-element.js';
import { classMap } from './integralui/external/class-map.js';
import { styleMap } from './integralui/external/style-map.js';

// (Optional) A common service with helpful functions
import IntegralUICommonService from './integralui/services/integralui.common.service.js';

// (Optional) Enumerations that you may use like IntegralUITheme
import { IntegralUISelectionMode, IntegralUITheme } from './integralui/components/integralui.enums.js';
                                        

Place the component in HTML using its tag. In case of Grid component use IntegralUIGridComponent. Here is an example:

render(){
    return (
        <div>
            <IntegralUIGridComponent ref={this.gridRef}
                allowAnimation={this.state.isAnimationAllowed} 
                columns={this.state.columns} 
                resourcePath={this.state.currentResourcePath}
                rows={this.state.rows} 
                selectionMode={this.state.selMode}
                size={this.state.gridSize}
                theme={this.state.currentTheme}
            ></IntegralUIGridComponent>
        </div>
    );
}                                      
                                        

In this case, the Grid has:

• animations active
• column and rows
• resource path is relative to the location where icons, images or other resources are present that are used by the Grid component.
• selection of multiple rows is enabled
• Office theme is selected
• size is specified in code
• the ref is set to get a reference to the component

Get a reference to the component using the specified ref property to gridRef (you can use any other name to locate the component in the DOM)

constructor(props){

    this.gridRef = React.createRef();

}
                                        

Using this reference you can call any component methods.

For Grid component the most important properties are columns and rows, which hold a reference to arrays for columns and rows that you want to show.

constructor(props){

    this.state = {

        // An array of column objects
        columns: [
            { id: 1, headerText: "Title", width: 300 },

            // . . .

        ],

        // An array of row objects that contains array of cell objects
        rows: [
            { 
                id: 1, 
                cells: [    
                    // cid means column's id 
                    // the content of this cell will be displayed under column with corresponding id
                    { cid: 1, text: "Cell 11"}  

                    // . . .
                ]
            },

            // . . .

        ],

        // Other properties
        currentResourcePath: '../integralui/icons',
        currentTheme: IntegralUITheme.Office,
        gridSize: { width: 800, height: 400 },
        isAnimationAllowed: true,
        selMode: IntegralUISelectionMode.MultiExtended
    }
}
                                        

A detailed information on structure of column, row and cell objects is available in the Grid API, under Data section.

To populate the grid with rows from a remote data source, you can first fetch the data and then call the loadData method:

fetch('./grid-overview-data.json', {
            headers : { 
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            // Suspend the grid layout from updates, to increase performance
            self.gridRef.current.suspendLayout();

            // Load data into the grid
            self.gridRef.current.loadData(this.convertJSONData(data), null, null, false);

            // Resume and update the grid layout
            self.gridRef.current.resumeLayout();
        },
        error => {
            console.log("Data is not loaded", error);
        }
    )
}
                                        

The Grid is using objects for columns, rows and cells. If your data source is in different format you need to convert the data (when received from the server) in a format acceptable by the Grid component. You can find an example of this conversion here Convert JSON Data into Grid Component or in QuickStart samples, in case for Grid component in grid-overview.ts sample.

Because of virtualization, you need to set up the Grid size. By default the component width and height are auto. Using size property, you can specify the component width and height in pixels. If they are not specified, the default value is used (auto or CSS settings).

this.state = {

    // . . .

    gridSize: { width: 800, height: 400 },

}
                                        

To handle events set the event and handler name in HTML and set the handler code. For example for valueChanged event:

HTML

<IntegralUIGridComponent ref={this.gridRef}

    // set grid properties here

    valueChanged={(e) => this.gridValueChanged(e)}

></IntegralUIGridComponent>
                                        

JSX

gridValueChanged(e){
    console.log("value changed event fired", e.detail);
}
                                        

In case of Web Components, the event data is carried within the event detail field.

To use icons provided by IntegralUI Web library, make sure you copy/paste the /integralui/icons/ under /public folder in your project.