HTMLElements

https://www.htmlelements.com/docs/
Admin
HTMLElements is a comprehensive library of feature-rich JavaScript UI components including 3D...
Tokens:2,649,312
Snippets:22,995
Trust Score:9.2
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Dev Server

Source: https://www.htmlelements.com/docs/accordion

After creating the project, install necessary dependencies including Smart UI components, and then start the development server.

```bash
cd 
npm install
npm install smart-webcomponents
npm run dev

```

--------------------------------

### Install Dependencies and Start Dev Server

Source: https://www.htmlelements.com/docs/barcode

Install the necessary packages and launch the development environment.

```bash
cd 
npm install
npm install smart-webcomponents
npm run dev
```

--------------------------------

### React Application Setup

Source: https://www.htmlelements.com/docs/cardview

Scaffolds a new React application using create-react-app and starts the development server. Assumes Node.js and npm are installed.

```bash
npx create-react-app my-app
cd my-app
npm start	

```

--------------------------------

### Setup Angular Environment and Project

Source: https://www.htmlelements.com/docs/angular-npm-packages

Commands to install the Angular CLI and initialize a new project.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-pivottable
```

```bash
cd smart-angular-pivottable
```

--------------------------------

### Setup Angular Environment

Source: https://www.htmlelements.com/docs/fileupload

Commands to install the Angular CLI and initialize a new project.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-fileupload
```

```bash
cd smart-angular-fileupload
```

--------------------------------

### Setup Angular CLI and Project

Source: https://www.htmlelements.com/docs/angular-npm-packages

Commands to install the Angular CLI and create a new project.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-dateinput
```

```bash
cd smart-angular-dateinput
```

--------------------------------

### Full Theme Setup Example

Source: https://www.htmlelements.com/docs/blazor-theme

A complete HTML structure demonstrating the inclusion of default, theme, and custom stylesheets.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="_content/Smart.Blazor/styles/smart.default.css">
    <link rel="stylesheet" href="_content/Smart.Blazor/styles/smart.dark-purple.css">
    <link rel="stylesheet" href="custom-theme.css">
</head>
<body theme="dark-purple">
    <app>Loading...</app>
</body>
</html>
```

--------------------------------

### Setup Vue CLI

Source: https://www.htmlelements.com/docs/download-and-installation

Commands to install Vue CLI and create a new project.

```bash
npm install -g @vue/cli
```

```bash
vue create my-project
```

--------------------------------

### NodeJS Server Setup

Source: https://www.htmlelements.com/docs/react-scheduler-server-side-crud-mongodb

Initial setup for the NodeJS server using express and nodemon, including package installation and basic server configuration.

```APIDOC
## NodeJS Server Setup

This section outlines the initial steps to set up a NodeJS server using `express` and `nodemon`.

### Steps
1. Initialize the project: `npm init --y`
2. Install dependencies: `npm install express nodemon cors`
3. Create `server.js` file with the following content:

```javascript
const express = require('express');
const app = express();
const port = 3001;

app.use(require('cors')());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.listen(port, () => {
    console.log(`App is listening on port: ${port}`);
});
```

### Configuration
- The server runs on port `3001`.
- `cors` is enabled to handle cross-origin requests.
- `express.json()` and `express.urlencoded()` are used for parsing request bodies.
```

--------------------------------

### Setup Angular CLI Environment

Source: https://www.htmlelements.com/docs/breadcrumb

Commands to install the Angular CLI and initialize a new project.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-breadcrumb
```

```bash
cd smart-angular-breadcrumb
```

--------------------------------

### Setup Angular Environment

Source: https://www.htmlelements.com/docs/textbox

Commands to install the Angular CLI and create a new project for Smart UI components.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-textbox
```

```bash
cd smart-angular-textbox
```

--------------------------------

### React Project Setup with Next.js

Source: https://www.htmlelements.com/docs/dropdownlist

Commands to create a new Next.js React application and start the development server. This is the recommended way to begin with React and Smart UI.

```bash
npx create-next-app my-app
cd my-app
npm run dev	
```

```bash
yarn create next-app my-app
cd my-app
yarn run dev
```

--------------------------------

### Setup Angular CLI Environment

Source: https://www.htmlelements.com/docs/angular-npm-packages

Commands to install the Angular CLI and create a new project.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-checkbox
```

```bash
cd smart-angular-checkbox
```

--------------------------------

### Vue Project Setup Prompts

Source: https://www.htmlelements.com/docs/combobox

Example of interactive prompts during Vue project creation. Choose options based on your project needs.

```bash
✔ Project name: … 
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./...
Done.
```

--------------------------------

### Angular CLI Commands for Project Setup

Source: https://www.htmlelements.com/docs/angular-npm-packages

Commands to install the CLI, create a new project, and serve the application.

```bash
ng serve
```

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-daterangeinput
```

```bash
cd smart-angular-daterangeinput
```

--------------------------------

### Install Dependencies and Smart UI

Source: https://www.htmlelements.com/docs/tabs

Navigate to your project directory, install project dependencies, and install the 'smart-webcomponents' package.

```bash
cd 
npm install
npm install smart-webcomponents

```

--------------------------------

### Setup Angular environment for Smart Tabs

Source: https://www.htmlelements.com/docs/tabs

Commands to install the Angular CLI and initialize a new project.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-tabs
```

```bash
cd smart-angular-tabs
```

--------------------------------

### Setup Angular Environment for QueryBuilder

Source: https://www.htmlelements.com/docs/querybuilder

Commands to install the Angular CLI and initialize a new project.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-querybuilder
```

```bash
cd smart-angular-querybuilder
```

--------------------------------

### Setup Angular Splitter Environment

Source: https://www.htmlelements.com/docs/splitter

Commands for installing the Angular CLI and setting up a new project for the Smart Splitter component.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-splitter
```

```bash
cd smart-angular-splitter
```

```bash
ng add smart-webcomponents-angular
```

--------------------------------

### Angular CLI Commands for Project Setup

Source: https://www.htmlelements.com/docs/angular-npm-packages

Commands for installing the Angular CLI, creating a new project, and running the development server.

```bash
ng serve
```

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-combobox
```

```bash
cd smart-angular-combobox
```

--------------------------------

### React Input Component Setup with Next.js

Source: https://www.htmlelements.com/docs/input

Installs the Smart UI React package and sets up a basic React component using Next.js. Includes importing necessary components and CSS.

```bash
npx create-next-app my-app
cd my-app
npm run dev	
```

```bash
yarn create next-app my-app
cd my-app
yarn run dev	
```

```bash
npm install smart-webcomponents-react
```

```bash
yarn add smart-webcomponents-react
```

--------------------------------

### Angular CLI setup commands

Source: https://www.htmlelements.com/docs/multilinetextbox

Commands for installing the Angular CLI, creating a new project, and adding the Smart UI package.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-multilinetextbox
```

```bash
cd smart-angular-multilinetextbox
```

```bash
ng add smart-webcomponents-angular
```

--------------------------------

### Angular Kanban Component Setup

Source: https://www.htmlelements.com/docs/kanban

Guides users through setting up an Angular environment and integrating the Smart Kanban component using Angular CLI.

```APIDOC
## Angular Kanban Component Setup

### Description
This section provides instructions for setting up an Angular project and integrating the Smart UI Kanban component using the Angular CLI and npm.

### Setup Angular Environment
1. **Install Angular CLI globally:**
   ```bash
   npm install -g @angular/cli
   ```

### Create a new Application
1. **Create a new Angular project:**
   ```bash
   ng new smart-angular-kanban
   ```
2. **Navigate to the project directory:**
   ```bash
   cd smart-angular-kanban
   ```

### Setup the Kanban Component
Smart UI for Angular is available via the `smart-webcomponents-angular` NPM package.

**Quick Setup with `ng add`:**
This command automates the installation and configuration process.

1. **Add the Smart UI package:**
   ```bash
   ng add smart-webcomponents-angular
   ```

   The `ng add` command performs the following actions:
   - Adds `smart-webcomponents-angular` as a project dependency.
   - Imports necessary modules into your application module.
   - Registers the default Smart UI theme in `angular.json`.
   - Adds required peer dependencies to `package.json`.
   - Executes `npm install` to install the theme and peer packages.
```

--------------------------------

### HTML Page Setup for Smart UI Table

Source: https://www.htmlelements.com/docs/shadow-dom

Example HTML structure for integrating a Smart UI Table component, including necessary CSS and JavaScript imports.

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Table Shadow DOM Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="../../source/styles/smart.ui.default.css" />
        <script type="text/javascript" src="../../scripts/data.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body class="viewport">
        <smart-ui-table id="table"></smart-ui-table>

        <!-- scripts -->
        <script type="module" src="../../source/components/smart.ui.table.js"></script>
        <script type="module" src="index.js"></script>
    </body>
</html>
```

--------------------------------

### Setup Demo Server

Source: https://www.htmlelements.com/docs/angular-rxjs-paging

Initializes a demo server and fetches data from a specified URL. The data is processed and stored, with options to retrieve all data or a slice of it.

```javascript
setupDemoServer() {
	  function demoServer() {
		'use strict';
		this.dataRows = [];
	  }
	  
	  // init server and fetch data from url.
	  demoServer.prototype.getData = function(first, last) {
		return from(
		  new Promise((resolve, reject) => {
			  fetch('https://raw.githubusercontent.com/HTMLElements/smart-webcomponents-angular/master/data.json')
			  .then(response => response.json())
			  .then(data => {
					let dataSet = data;
					this.dataRows = dataSet.map((value) => {
						const newData = Object.assign(value);
						newData.priceChange = 0;
						
						return newData;
					});
					
					if (first === undefined && last === undefined) {
						resolve(this.dataRows);
					}
					
					resolve(this.dataRows.slice(first, last));
			  });
		  })
		);
	  };

	  return new demoServer();
	}
```

--------------------------------

### Setting and Getting unlockKey Property

Source: https://www.htmlelements.com/docs/buttongroup-api

Examples of how to set and get the unlockKey property of the Button Group element.

```APIDOC
### Set the **unlockKey** property.
```html
<smart-button-group unlock-key=''></smart-button-group>
```

### Set the **unlockKey** property by using the HTML Element's instance.
```javascript
const buttongroup = document.querySelector('smart-button-group');
buttongroup.unlockKey = '1111-2222-3333-4444-5555';
```

### Get the **unlockKey** property.
```javascript
const buttongroup = document.querySelector('smart-button-group');
let unlockKey = buttongroup.unlockKey;
```
```

--------------------------------

### Setting and Getting disabled Property

Source: https://www.htmlelements.com/docs/buttongroup-api

Examples of how to set and get the disabled property of the Button Group element.

```APIDOC
### Set the **disabled** property.
```html
<smart-button-group disabled></smart-button-group>
```

### Set the **disabled** property by using the HTML Element's instance.
```javascript
const buttongroup = document.querySelector('smart-button-group');
buttongroup.disabled = false;
```

### Get the **disabled** property.
```javascript
const buttongroup = document.querySelector('smart-button-group');
let disabled = buttongroup.disabled;
```
```

--------------------------------

### Setting and Getting selectionMode Property

Source: https://www.htmlelements.com/docs/buttongroup-api

Examples of how to set and get the selectionMode property of the Button Group element.

```APIDOC
### Set the **selectionMode** property.
```html
<smart-button-group selection-mode='zeroOrOne'></smart-button-group>
```

### Set the **selectionMode** property by using the HTML Element's instance.
```javascript
const buttongroup = document.querySelector('smart-button-group');
buttongroup.selectionMode = 'zeroOrMany';
```

### Get the **selectionMode** property.
```javascript
const buttongroup = document.querySelector('smart-button-group');
let selectionMode = buttongroup.selectionMode;
```
```

--------------------------------

### Navigate and Install Project Dependencies

Source: https://www.htmlelements.com/docs/angular-electron-grid

Enter the project directory and install the required dependencies.

```bash
cd angular-electron/
npm install
```

--------------------------------

### Setting and Getting dataSource Property

Source: https://www.htmlelements.com/docs/buttongroup-api

Examples of how to set and get the dataSource property of the Button Group element.

```APIDOC
### Set the **dataSource** property.
```html
<smart-button-group data-source='[{ label: "item 1", value: "1" }, { label: "item 2", value: "2" }]'></smart-button-group>
```

### Set the **dataSource** property by using the HTML Element's instance.
```javascript
const buttongroup = document.querySelector('smart-button-group');
buttongroup.dataSource = ["new item 1", "new item 2"];
```

### Get the **dataSource** property.
```javascript
const buttongroup = document.querySelector('smart-button-group');
let dataSource = buttongroup.dataSource;
```
```

--------------------------------

### Run the Application

Source: https://www.htmlelements.com/docs/blazor-net

Start the development server to view the application.

```bash
dotnet watch run
```

--------------------------------

### Setting and Getting Animation Property

Source: https://www.htmlelements.com/docs/buttongroup-api

Examples of how to set and get the animation property of the Button Group element.

```APIDOC
### Set the **animation** property.
```html
<smart-button-group animation='none'></smart-button-group>
```

### Set the **animation** property by using the HTML Element's instance.
```javascript
const buttongroup = document.querySelector('smart-button-group');
buttongroup.animation = 'simple';
```

### Get the **animation** property.
```javascript
const buttongroup = document.querySelector('smart-button-group');
let animation = buttongroup.animation;
```
```

--------------------------------

### Get Gantt Chart Segment Start Date

Source: https://www.htmlelements.com/docs/gantt-api

Retrieves the start date of the first segment of the first task in the Gantt chart.

```javascript
 const ganttchart = document.querySelector('smart-gantt-chart');
```

```javascript
 let dateStart = ganttchart.tasks[0].planned.segments[0].dateStart;
```

--------------------------------

### Initialize Smart Grid with Data

Source: https://www.htmlelements.com/docs/grid

A complete HTML example demonstrating how to include the Smart Grid library, define the component, and configure it with a DataAdapter.

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grid Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body class="viewport">
	<smart-grid id="grid"></smart-grid>
    <!-- scripts -->  
	<script type="module" src="node_modules/smart-webcomponents/source/modules/smart.grid.js"></script>
	<script type="module">
	Smart('#grid', class {
		get properties() {
			return {
				dataSource: new Smart.DataAdapter(
				{
					dataSource: [
						{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
						{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
						{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
						{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
						{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
						{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
						{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
						{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
						{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
					],
					dataFields:
						[
							'EmployeeID: number',
							'ReportsTo: number',
							'FirstName: string',
							'LastName: string',
							'Country: string',
							'City: string',
							'Address: string',
							'Title: string',
							'HireDate: date',
							'BirthDate: date'
						]
				}),
				sorting: {
					enabled: true
				},
				filtering: {
					enabled: true
				},
				behavior: { columnResizeMode: 'growAndShrink' },
				columns: [
					{ label: 'First Name', dataField: 'FirstName', width: 200 },
					{ label: 'Last Name', dataField: 'LastName', width: 200 },
					{ label: 'Title', dataField: 'Title', width: 160 },
					{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
					{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
					{ label: 'Address', dataField: 'Address', width: 250 },
					{ label: 'City', dataField: 'City', width: 120 },
					{ label: 'Country', dataField: 'Country' }			
				]
			}
		}
	});
</script>	      	
</body>
</html>
```

--------------------------------

### React Rating Component Setup

Source: https://www.htmlelements.com/docs/rating

Import the necessary CSS and the Rating component from smart-webcomponents-react. This example shows a basic class component setup.

```javascript
import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { Rating } from 'smart-webcomponents-react/rating';

class App extends React.Component {

	init() {
	
	}


	componentDidMount() {

	}

	render() {
		return (
			<div>
			    <Rating ></Rating>
			</div>
		);
	}
}



export default App;
	
```

--------------------------------

### React PivotTable Setup with Next.js

Source: https://www.htmlelements.com/docs/pivot-table

Install the smart-webcomponents-react package and import the PivotTable component and its default CSS. This setup is for a React Next.js project.

```bash
npx create-next-app my-app
cd my-app
npm run dev	
```

```bash
yarn create next-app my-app
cd my-app
yarn run dev	
```

```bash
npm install smart-webcomponents-react
```

```bash
yarn add smart-webcomponents-react
```

```javascript
import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { PivotTable } from 'smart-webcomponents-react/pivottable';
import { GetData } from './common/data';

const App = () => {
	const dataSourceSettings = {
		dataFields: [
			'firstName: string',
			'lastName: string',
			'productName: string',
			'quantity: number',
			'price: number',
			'date: date'
		]
	};
	
	const dataSource = GetData(50);
	const freezeHeader = true;
	const grandTotal = true;
	const keyboardNavigation = true;
	const columns = [{
		label: 'First Name',
		dataField: 'firstName',
		dataType: 'string'
	},
	{
		label: 'Last Name',
		dataField: 'lastName',
		dataType: 'string',
		allowRowGroup: true,
		rowGroup: true
	},
	{
		label: 'Product Name',
		dataField: 'productName',
		dataType: 'string',
		allowPivot: true,
		pivot: true
	},
	{
		label: 'Quantity',
		dataField: 'quantity',
		dataType: 'number',
		summary: 'sum'
	},
	{
		label: 'Price',
		dataField: 'price',
		dataType: 'number',
		summary: 'sum',
		summarySettings: {
			prefix: '$',
		
decimalPlaces: 2
		}
	},
	{
		label: 'Date Purchased',
		dataField: 'date',
		dataType: 'date'
	} // column is not rendered, because it is neither "pivot", "rowGroup", nor it has "summary"
	];

	return (
		<div>
			<div className="demo-description">This demo showcases the basic functionality of PivotTable - a table of
				statistics that summarizes tabular data.</div>
			<PivotTable id="pivotTable"
				dataSourceSettings={dataSourceSettings}
				dataSource={dataSource}
				freezeHeader={freezeHeader}
			
grandTotal={grandTotal}
				keyboardNavigation={keyboardNavigation}
				columns={columns}>
			</PivotTable>
		</div>
	);
}



export default App;
	
```

--------------------------------

### Get dateStart property

Source: https://www.htmlelements.com/docs/gantt-api

Accesses the start date of the first task.

```javascript
 const ganttchart = document.querySelector('smart-gantt-chart');
```

```javascript
 let dateStart = ganttchart.tasks[0].dateStart;
```

--------------------------------

### Angular Grid Component Setup

Source: https://www.htmlelements.com/docs/angular-grid

Basic setup for the Smart Angular Grid component, including data source and column definitions. Ensure the 'smart-webcomponents-angular' package is installed.

```typescript
import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { GridComponent, GridColumn, DataAdapter, Smart } from 'smart-webcomponents-angular/grid';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit {
	datasource = new Smart.DataAdapter(
		{
			dataSource: [{ "id": 0, "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte", "price": 3.8, "quantity": 6, "total": 22.799999999999997 }, { "id": 1, "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte", "price": 3.8, "quantity": 8, "total": 30.4 }, { "id": 2, "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea", "price": 1.5, "quantity": 2, "total": 3 }, { "id": 3, "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte", "price": 3.8, "quantity": 2, "total": 7.6 }, { "id": 4, "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna", "price": 3.25, "quantity": 4, "total": 13 }, { "id": 5, "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano", "price": 2.5, "quantity": 4, "total": 10 }, { "id": 6, "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte", "price": 3.8, "quantity": 8, "total": 30.4 }, { "id": 7, "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano", "price": 2.5, "quantity": 6, "total": 15 }, { "id": 8, "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna", "price": 3.25, "quantity": 3, "total": 9.75 }, { "id": 9, "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea", "price": 1.5, "quantity": 9, "total": 13.5 }, { "id": 10, "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle", "price": 1.75, "quantity": 6, "total": 10.5 }, { "id": 11, "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist", "price": 4, "quantity": 11, "total": 44 }],
			dataFields:
				[
					'id: number',
					'firstName: string',
					'lastName: string',
					'productName: string',
					'quantity: number',
					'price: number',
					'total: number'
				]
		})
		
		
	columns: GridColumn[] = [
		{
			label: 'First Name', dataField: 'firstName', columnGroup: 'name'
		},
		{ label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
		{ label: 'Product', dataField: 'productName', columnGroup: 'order' },
		{ label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
		{
			label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings) {
				const rowId = settings.row;
				const columnDataField = settings.column;
				const template = settings.template;
				const cell = settings.cell!;
				
				if (settings.value >= 4) {
					cell.background = '#00A45A';
					cell.color = '#fff';
				}
				else if (settings.value < 2) {
					cell.background = '#DF3800';
					cell.color = '#fff';
				}
				else {
					cell.background = '#FFFDE1';
					cell.color = '#333';
				}

				settings.value = '$' + new Number(settings.value).toFixed(2);
			}
		},
		{
			label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order', formatFunction(settings) {
				const rowId = settings.row;
				const columnDataField = settings.column;
				const template = settings.template;
				const cell = settings.cell!;
			
				if (settings.value >= 20) {
					cell.background = '#00A45A';
					cell.color = '#fff';
				}
				else if (settings.value <= 5) {
					cell.background = '#DF3800';
					cell.color = '#fff';
				}
				else {
					cell.background = '#FFFDE1';
					cell.color = '#333';
				}

				settings.value = '$' + new Number(settings.value).toFixed(2);
			}
		}
	]	
	
    ngOnInit(): void {

    }
    ngAfterViewInit(): void {
    }
}

```

--------------------------------

### Initialize Smart.Router with Routes

Source: https://www.htmlelements.com/docs/router

Sets up the router instance with defined paths and templates, then triggers an initial route to the home view.

```javascript
window.onload = function () {
    const router = new Smart.Router('mainView', './');

    router.setRoutes([
        { path: '/', template: 'homeTemplate', title: 'Home' },
        { path: '/about', template: 'aboutTemplate', title: 'About' },
        { path: '/contacts', template: 'contactsTemplate', title: 'Contacts' }
    ]);

    router.route('/');
};
```

--------------------------------

### Get minDateStart Property of a Task

Source: https://www.htmlelements.com/docs/gantt-api

Retrieves the minimum start date allowed for the first task. This property defines the lower limit for a task's start date.

```javascript
 const ganttchart = document.querySelector('smart-gantt-chart');
```

```javascript
 let minDateStart = ganttchart.tasks[0].minDateStart;
```

--------------------------------

### dragStart Event Example

Source: https://www.htmlelements.com/docs/listbox-api

Example code for setting up an event handler for the dragStart event.

```APIDOC
## dragStart Event

### Description

This event is related to drag-and-drop functionality. The example shows how to capture drag start events and access associated data.

### Example

```javascript
const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer,
        target = detail.target;

	// event handling code goes here.
})
```
```

--------------------------------

### Get maxDateStart Property of a Task

Source: https://www.htmlelements.com/docs/gantt-api

Retrieves the maximum start date allowed for the first task. This property defines the upper limit for a task's start date.

```javascript
 const ganttchart = document.querySelector('smart-gantt-chart');
```

```javascript
 let maxDateStart = ganttchart.tasks[0].maxDateStart;
```

--------------------------------

### Setup Angular Environment

Source: https://www.htmlelements.com/docs/qrcode

Commands to initialize an Angular project for use with Smart UI components.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-qrcode
```

```bash
cd smart-angular-qrcode
```

--------------------------------

### Angular Component Setup for Smart.ColorInput

Source: https://www.htmlelements.com/docs/angular-npm-packages

A standard Angular component structure. This example shows the basic setup for an Angular component, including lifecycle hooks like ngOnInit and ngAfterViewInit. No specific setup for ColorInput is shown here, but it serves as the host for the template.

```typescript
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	


	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    

	}	
}
		
```

--------------------------------

### Kanban Properties

Source: https://www.htmlelements.com/docs/kanban-api

Examples of how to get and set the 'name' and 'users' properties of the Kanban component.

```APIDOC
## Kanban Properties

### Get 'name' property

```javascript
const kanban = document.querySelector('smart-kanban');
let name = kanban.users[0].name;
```

### Set 'users' property (HTML Attribute)

```html
<smart-kanban users='true'></smart-kanban>
```

### Set 'users' property (JavaScript Instance)

```javascript
const kanban = document.querySelector('smart-kanban');
kanban.users = false;
```

### Get 'users' property

```javascript
const kanban = document.querySelector('smart-kanban');
let users = kanban.users;
```
```

--------------------------------

### Install Smart Web Components

Source: https://www.htmlelements.com/docs/docking-layout-custom

Use NPM to download the Smart Web Components library locally.

```bash
npm i smart-webcomponents
```

--------------------------------

### Basic Blazor Grid Setup

Source: https://www.htmlelements.com/docs/blazor-grid-dynamic-template

Sets up a basic Blazor Grid with columns for product name and quantity. Includes a Product class and sample data.

```cshtml
@page "/"
    
<Grid DataSource="@products">
    <Columns>
        <Column DataField="Name" Label="Product Name"></Column>
        <Column DataField="Quantity" Label="Quantity"></Column>
    </Columns>
</Grid>

@code {
    class Product
    {
        public string Name { get; set; }
        public int Quantity { get; set; }

        public Product(string name, int quantity)
        {
            Name = name;
            Quantity = quantity;
        }
    }

    Product[] products = new Product[]
    {
        new Product("Ketchup", 200),
        new Product("BBQ Sauce", 450),
        new Product("Vegatbles", 100),
        new Product("Fruits", 100),
        new Product("Chocolate bars", 250),
        new Product("Snacks", 125),
        new Product("Popcorn", 80),
        new Product("Beaf", 60),
        new Product("Rice", 90)
    };
}

```

--------------------------------

### Get startAngle property

Source: https://www.htmlelements.com/docs/chart-api

Retrieves the start angle in degrees for polar or spider charts.

```javascript
 const chart = document.querySelector('smart-chart');
```

```javascript
 let startAngle = chart.seriesGroups[0].startAngle;
```

--------------------------------

### Initialize Blazor Server Project

Source: https://www.htmlelements.com/docs/blazor-net

Commands to create a new Blazor Server project and navigate to the directory.

```bash
dotnet new blazorserver -o BlazorServerApp
```

```bash
cd BlazorServerApp
```

--------------------------------

### Get startDate property

Source: https://www.htmlelements.com/docs/kanban-api

Retrieves the task start date from the kanban data source.

```javascript
const kanban = document.querySelector('smart-kanban');
```

```javascript
let startDate = kanban.dataSource.startDate;
```

--------------------------------

### Get Property of Smart.DateTimePicker

Source: https://www.htmlelements.com/docs/datetimepicker

Provides a generic example of how to retrieve the value of a property from a smart-date-time-picker element.

```javascript
	const propertyValue = datetimepicker.propertyName;	
```

--------------------------------

### Install Vue CLI and Create Project

Source: https://www.htmlelements.com/docs/vue

Commands to install the Vue CLI globally and initialize a new project.

```bash
	npm install -g @vue/cli
	
```

```bash
	vue create my-project
	
```

--------------------------------

### Initialize Grid with Data

Source: https://www.htmlelements.com/docs/grid-export

Sets up a Grid instance with data source, layout, behavior, sorting, and column configurations. This is the initial setup for a data grid.

```javascript
const gridOptions = {
    dataSourceSettings: {
        dataFields: [
            { name: 'firstName', dataType: 'string' },
            { name: 'lastName', dataType: 'string' },
            { name: 'productName', map: 'product.name', dataType: 'string' },
            { name: 'quantity', map: 'product.quantity', dataType: 'number' },
            { name: 'price', map: 'product.price', dataType: 'number' },
            { name: 'total', map: 'product.total', dataType: 'number' }
        ]
    },
    layout: {
        allowCellsWrap: true,
        rowHeight: 'auto'
    },
    behavior: {
        columnResizeMode: 'growAndShrink'
    },
    sorting: {
        enabled: true
    },
    dataSource: [
        {
            firstName: 'Andrew',
            lastName: 'Burke',
            product: {
                name: 'Ice Coffee', price: 10, quantity: 3, total: 30
            }
        },
        {
            firstName: 'Petra',
            lastName: 'Williams',
            product: {
                name: 'Espresso', price: 7, quantity: 5, total: 35
            }
        },
        {
            firstName: 'Anthony',
            lastName: 'Baker',
            product: {
                name: 'Frappucino', price: 6, quantity: 4, total: 24
            }
        }
    ],
    columns: [
        {
            label: 'First Name', dataField: 'firstName'
        },
        { label: 'Last Name', dataField: 'lastName' },
        { label: 'Product', dataField: 'productName' },
        {
            label: 'Quantity', dataField: 'quantity', cellsAlign: 'right'
        },
        { label: 'Unit Price', dataField: 'price', cellsAlign: 'right', cellsFormat: 'c2' }
    ]
}

const grid = new Smart.Grid("#grid", gridOptions);
```

--------------------------------

### Start Vue Development Server

Source: https://www.htmlelements.com/docs/download-and-installation

Execute the command to launch the local development server.

```bash
npm run serve
```

--------------------------------

### Navigate to Project Directory

Source: https://www.htmlelements.com/docs/vue-grid-data-binding

Command to enter the newly created project folder.

```bash
cd smart-vue-app
```

--------------------------------

### Angular NGModule Implementation

Source: https://www.htmlelements.com/docs/datetimepicker

Example of using the DateTimePicker component within an Angular NGModule setup.

```html
 <smart-date-time-picker #datetimepicker [calendarButton]="true" [enableMouseWheelAction]="true"
                        [dropDownPosition]="'center-bottom'" [spinButtons]="true" [spinButtonsPosition]="'left'"></smart-date-time-picker>
```

```typescript
 import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { DateTimePickerComponent } from 'smart-webcomponents-angular/datetimepicker';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker!: DateTimePickerComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    

	}	
}
```

```typescript
 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DateTimePickerModule } from '@smart-webcomponents-angular/datetimepicker';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, DateTimePickerModule ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }
```

--------------------------------

### Create React App

Source: https://www.htmlelements.com/docs/react-ways-of-styling-grid

Use create-react-app to set up a new React project. Navigate into the project directory.

```bash
npx create-react-app smart-app
cd smart-app
```

--------------------------------

### Install Smart Webcomponents Library

Source: https://www.htmlelements.com/docs/grid-nextjs

Command to install the required React components library.

```bash
npm i smart-webcomponents-react
```

--------------------------------

### Get dataFieldFrom property

Source: https://www.htmlelements.com/docs/chart-api

Retrieves the start data field used in range column series.

```javascript
const chart = document.querySelector('smart-chart');
```

```javascript
let dataFieldFrom = chart.seriesGroups[0].series[0].dataFieldFrom;
```

--------------------------------

### Initialize Next.js Project

Source: https://www.htmlelements.com/docs/accordion

Commands to create and start a new Next.js application.

```bash
npx create-next-app my-app
cd my-app
npm run dev
```

```bash
yarn create next-app my-app
cd my-app
yarn run dev
```

--------------------------------

### Get First Value Property

Source: https://www.htmlelements.com/docs/pivottable-api

Retrieves the value to compare against. For 'between' condition, this is the start value.

```javascript
 let firstValue = pivottable.conditionalFormatting.firstValue;
```

--------------------------------

### Initialize npm Project

Source: https://www.htmlelements.com/docs/grid-firebase

Use this command to create a package.json file for your project.

```bash
npm init
```

--------------------------------

### Angular Pager Setup

Source: https://www.htmlelements.com/docs/pager

Guide to setting up the Smart Pager component within an Angular environment.

```APIDOC
## Getting Started with Angular Pager Component

### Setup Angular Environment

Angular CLI is recommended for setting up new Angular projects.

**Install Angular CLI globally:**
```bash
npm install -g @angular/cli
```

**Create a new Angular application:**
```bash
ng new smart-angular-pager
```

**Navigate to the project directory:**
```bash
cd smart-angular-pager
```

### Setup the Pager

Smart UI for Angular is available via the `smart-webcomponents-angular` NPM package.

1.  **Install the package:**
    ```bash
    npm install smart-webcomponents-angular
    ```

### Quick Setup with `ng add`

Angular CLI schematics simplify the integration of Smart UI for Angular. After installing the necessary NPM packages, you can use the `ng add` command.

**Add the Smart UI for Angular package:**
```bash
ng add smart-webcomponents-angular
```

The `ng add smart-webcomponents-angular` command performs the following actions:

1.  Adds `smart-webcomponents-angular` as a project dependency.
2.  Imports the necessary modules into your application module.
3.  Registers the default Smart UI theme in `angular.json`.
4.  Adds required peer dependencies to `package.json`.
5.  Executes `npm install` to install the theme and peer packages.
```

--------------------------------

### Angular FileUpload Component Setup

Source: https://www.htmlelements.com/docs/fileupload

Guide to setting up the FileUpload component within an Angular project.

```APIDOC
## Getting Started with Angular FileUpload Component
### Setup Angular Environment
Angular provides the easiest way to set angular CLI projects using Angular CLI tool.   
  
Install the CLI application globally to your machine. 
```bash
npm install -g @angular/cli
```

### Create a new Application
```bash
ng new smart-angular-fileupload
```

Navigate to the created project folder 
```bash
cd smart-angular-fileupload
```

### Setup the FileUpload
Smart UI for Angular is distributed as _smart-webcomponents-angular_ NPM package  

  1. Download and install the package.  
```

--------------------------------

### Run the test application

Source: https://www.htmlelements.com/docs/xmlui

Starts a local development server to view the test application.

```bash
npx -y http-server -p 3000 -c-1 -o
```

--------------------------------

### Get Chart Element

Source: https://www.htmlelements.com/docs/chart-api

Selects the chart element from the DOM. This is a common setup for interacting with chart properties.

```javascript
const chart = document.querySelector('smart-chart');
```

--------------------------------

### Angular CLI Setup for Smart Pager

Source: https://www.htmlelements.com/docs/pager

Commands to install the Angular CLI and initialize a new project.

```bash
npm install -g @angular/cli
```

```bash
ng new smart-angular-pager
```

```bash
cd smart-angular-pager
```

```bash
ng add smart-webcomponents-angular
```

--------------------------------

### Get startAngle Property

Source: https://www.htmlelements.com/docs/3d-chart-api

Retrieves the start angle in degrees for polar and spider charts. Defaults to 0.

```javascript
 const threedchart = document.querySelector('smart-3d-chart');
```

```javascript
 let startAngle = threedchart.seriesGroups[0].startAngle;
```

--------------------------------

### Install Smart Web Components

Source: https://www.htmlelements.com/docs/vue

Command to add the smart-webcomponents package to the project.

```bash
	npm install smart-webcomponents
	
```

--------------------------------

### Get Smart.Window Property

Source: https://www.htmlelements.com/docs/window

Provides a generic example of how to retrieve the value of a property from a 'smart-window' element using JavaScript.

```javascript
const propertyValue = window.propertyName;
```
Tokens:
Raw