# Overview

## DkGrid Examples

We have deployed all the DkGrid features as **live** **examples**. We describe every DkGrid part showing a code snippet from its corresponding live demo.

A live-demo link looks as follows:

{% hint style="success" %}
[Getting Started](https://demos.dikesoft.com/dk-grid/getting-started) live example.
{% endhint %}

### Live Examples Themes and Schemes

When navigating the live examples, you can change the **Theme** and **Scheme** at run time. The following themes are available in `light` and `dark` schemes:

| Theme name   | Palettes                  |
| ------------ | ------------------------- |
| default      | blue, amber, red          |
| brand        | dikesoft-blue, amber, red |
| indigo       | indigo, pink, red         |
| deep-purple  | deep-purple, amber, red   |
| pink         | pink, blue-gray, red      |
| purple       | purple, amber, red        |
| custom-green | green, yellow, red        |

{% hint style="info" %}
Except for dikesoft-blue, we have taken all palettes from the [Material Design Color System](https://material.io/design/color/the-color-system.html).
{% endhint %}

### Styles generation

We have used Tailwind CSS to generate all the above themes and schemes. We also use the predefined classes offered by Tailwind CSS.

{% hint style="info" %}
Visit the [Tailwind CSS](https://tailwindcss.com/docs/installation) official docs for further details.
{% endhint %}

### Changing some DkGrid properties at runtime

As you can change the Theme and the Scheme, you can also change some DkGrid properties when interacting with the live examples.

The following are all the properties you can change. These properties feed the corresponding DkGrid properties.

{% hint style="info" %}
We bind the DkGrid properties corresponding to the DkGrid feature we are describing.
{% endhint %}

#### Size

| Property    | Description          | Default value | Validators |
| ----------- | -------------------- | ------------- | ---------- |
| Grid Width  | The DkGrid's width.  | auto          | Required   |
| Grid Height | The DkGrid's height. | 500px         | Required   |

#### Appearance

<table><thead><tr><th>Property</th><th width="361.3333333333333">Description</th><th width="155">Default value</th><th>Validators</th></tr></thead><tbody><tr><td>Material Elevation</td><td>Indicates if the DkGrid will express elevation.</td><td>true</td><td></td></tr><tr><td>Elevation value</td><td>The elevation value the DkGrid will take.</td><td>2</td><td>Required<br>Min value: 0<br>Max value: 24<br>Only numbers</td></tr><tr><td>Vertical Row Lines</td><td>Indicates if the lines that separate every column value will be shown.</td><td>false</td><td></td></tr><tr><td>Striped</td><td>Indicates if one row will be distinguished from the other.</td><td>true</td><td></td></tr></tbody></table>

#### Header

<table><thead><tr><th>Property</th><th width="249">Description</th><th width="150">Default value</th><th>Validators</th></tr></thead><tbody><tr><td>Column Context Menu</td><td>It allows showing or hiding the context menu for all the DkGrid columns.</td><td>true</td><td></td></tr><tr><td>Header Height</td><td>Sets the height, in pixels, for every column header.</td><td>60</td><td>Required<br>Min value: 40<br>Max value: 120<br>Only numbers</td></tr></tbody></table>

#### Dragging

<table><thead><tr><th width="197.86078755719777">Property</th><th width="372.69980188915196">Description</th><th>Default value</th></tr></thead><tbody><tr><td>Allow column dragging</td><td>A flag that indicates if the DkGrid allows its columns to be dragged.</td><td>false</td></tr></tbody></table>

#### Rows

<table><thead><tr><th>Property</th><th width="376">Description</th><th width="150">Default value</th><th>Validators</th></tr></thead><tbody><tr><td>Row Id</td><td>A flag that allows displaying the id of every row.</td><td>false</td><td></td></tr><tr><td>Column Id width</td><td>Establishes the width, in pixels, of the column that displays the Row Id.</td><td>70</td><td>Required<br>Min value: 50<br>Max value: 100<br>Only numbers</td></tr><tr><td>Content Row Height</td><td>Establishes the height, in pixels, of every displayed row.</td><td>50</td><td>Required<br>Min value: 45<br>Max value: 80<br>Only numbers</td></tr></tbody></table>

#### Row Grouping

<table><thead><tr><th>Property</th><th width="383">Description</th><th width="150">Default value</th><th>Validators</th></tr></thead><tbody><tr><td>Row Grouping Height</td><td>The height, in pixels, of the panel where the columns are displayed, which the DkGrid is grouped by.</td><td>71</td><td>Required<br>Min value: 50<br>Max value: 100<br>Only numbers</td></tr><tr><td>Columns Height</td><td>The height, in pixels, of every column that is displayed in the Row-Grouping panel.</td><td>36</td><td>Required<br>Min value: 30<br>Max value: 80<br>Only numbers</td></tr><tr><td>Row Grouping Indent</td><td>A flag that allows displaying or hiding the indentation of every row under a group.</td><td>true</td><td></td></tr><tr><td>Indent width</td><td>The width, in pixels, of the indentation every row under a group will have.</td><td>25</td><td>Required<br>Min value: 25<br>Max value: 150<br>Only numbers</td></tr></tbody></table>

#### Sorting

<table><thead><tr><th width="200.33333333333331">Property</th><th width="392.258956364289">Description</th><th>Default value</th></tr></thead><tbody><tr><td>Allow sorting</td><td>Indicates if the DkGrid will allow or not that its rows could be ordered.</td><td>false</td></tr></tbody></table>

#### Filtering

<table><thead><tr><th>Property</th><th width="200">Description</th><th>Default value</th><th width="173">Validators</th></tr></thead><tbody><tr><td>Row Filter</td><td>The flag that allows if the row, under the headers, will be shown.</td><td>false</td><td></td></tr><tr><td>Row Filter Height</td><td>The height, in pixels, that the row filter will have.</td><td>55</td><td>Required<br>Min value: 45<br>Max value: 80<br>Only numbers</td></tr><tr><td>On-Demand filter</td><td>This flag allows filtering rows until the user sends the conditions by clicking the corresponding button.</td><td>false</td><td></td></tr></tbody></table>

#### Selection

<table><thead><tr><th>Property</th><th width="403.3333333333333">Description</th><th>Default value</th></tr></thead><tbody><tr><td>Allow selection</td><td>The flag that allows that every row could be selected.</td><td>false</td></tr></tbody></table>

#### Edition

<table><thead><tr><th>Property</th><th width="413">Description</th><th width="150">Default value</th><th>Validators</th></tr></thead><tbody><tr><td>Edition mode</td><td>This flag is used to enable or disable the rows edition, if the DkGrid allows edition as well.</td><td>false</td><td></td></tr><tr><td>Edition Toolbar</td><td>This flag allows displaying or hiding the edition toolbar.</td><td>false</td><td></td></tr><tr><td>Toolbar Height</td><td>The height, in pixels, that the Edition Toolbar will have.</td><td>55</td><td>Required<br>Min value: 45<br>Max value: 100<br>Only numbers</td></tr><tr><td>Toolbar Item Height</td><td>The height, in pixels, of every option of the Edition Toolbar.</td><td>42</td><td>Required<br>Min value: 36<br>Max value: 60<br>Only numbers</td></tr><tr><td>Toolbar position</td><td>The value indicates if the Edition Toolbar is shown at the top or bottom of the DkGrid.</td><td><mark style="color:orange;"><code>bottom</code></mark></td><td></td></tr><tr><td>Toolbar alignment</td><td>The value indicates if the Edition Toolbar is shown at the left, center or right.</td><td><mark style="color:orange;"><code>left</code></mark></td><td></td></tr></tbody></table>

#### Pagination

<table><thead><tr><th>Property</th><th width="419">Description</th><th width="150">Default value</th><th>Validators</th></tr></thead><tbody><tr><td>Pagination</td><td>This flag allows paginating the data set.</td><td>false</td><td></td></tr><tr><td>Page size</td><td>The value indicates how many rows will be displayed for every page.</td><td>50</td><td>Required<br>Min value: 1<br>Only numbers</td></tr><tr><td>Pagination Height</td><td>The height, in pixel, that the paginator will have.</td><td>64</td><td>Required<br>Min value: 60<br>Max value: 100<br>Only numbers</td></tr></tbody></table>

### Floating Configuration Panel

While navigating the live examples, you will see a red square with white gear.

![Configuration white gear](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2Fu12Ck2AmCANceBg4JiOS%2Foverview-white-gear.png?alt=media\&token=800e7cf1-652b-4d8d-8f5d-21bc01965eda)

Clicking on the white gear will show a floating panel with all the themes, schemes, and DkGrid properties.

![Themes, Schemes and DkGrid properties](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2F2Yd2rHN3V60djyafDvPX%2Ffloating-panel-conf.png?alt=media\&token=ee6f6d2f-57ad-4e1a-b2d3-c2647f050849)

{% hint style="info" %}
You can click on the circular arrow icon to reset the values for each group of properties.
{% endhint %}

### Setting properties

The DkGrid changes all the described properties through a service called <mark style="color:green;">`DkGridConfig`</mark>. This service is responsible for delivering every property when changing one of them through the [Floating Configuration Panel](#floating-configuration-panel).

{% code title="dk-grid.config.service.ts" lineNumbers="true" %}

```typescript
import { Injectable } from '@angular/core';

import { BehaviorSubject, Observable } from 'rxjs';

import { DkGridProperties, gridSize, gridAppearance, gridHeader,
  gridRows, gridRowGrouping, gridSorting, gridFitlering,
  gridSelection, gridEdition, gridDragging, gridPagination
} from 'app/core/config/dk-grid.properties';

@Injectable({
  providedIn: 'root'
})
export class DkGridConfig {

  private gridConfigSubject: BehaviorSubject<DkGridProperties>;

  constructor() {
    this.gridConfigSubject = new BehaviorSubject<DkGridProperties>(this.getDefaultProperties());
  }

  get configChange(): Observable<DkGridProperties> {
    return this.gridConfigSubject.asObservable();
  }

  get properties(): DkGridProperties {
    return this.gridConfigSubject.value;
  }

  getDefaultProperties(): DkGridProperties {
    return {
      ...gridSize, ...gridAppearance, ...gridHeader, ...gridRows,
      ...gridRowGrouping, ...gridSorting, ...gridFitlering, ...gridSelection,
      ...gridEdition, ...gridDragging, ...gridPagination
    };
  }

  changeGridConfig(value: DkGridProperties): void {
    this.gridConfigSubject.next(value);
  }
}

```

{% endcode %}

{% hint style="warning" %}
Remember that the <mark style="color:green;">`DkGridConfig`</mark> service does not belong to the <mark style="color:green;">`DkGridComponent`</mark> definition itself. It was created only for demo purposes.
{% endhint %}

As you can see in the <mark style="color:green;">`DkGridConfig`</mark> definition, it has a public property called `configChange` of type <mark style="color:green;">`Observable<DkGridProperties>`</mark>. Therefore, If a live-demo feature should react to these properties changes, the corresponding <mark style="color:green;">`DkGridComponent`</mark> instance must listen to the `configChange` observable.

We have grouped all the properties in one type called <mark style="color:green;">`DkGridProperties`</mark>, an Intersection type.

{% code title="dk-grid.properties.ts" lineNumbers="true" %}

```typescript
import { EditionToolbarPosition, EditionToolbarAlignment } from '@dk-grid-standard/angular';

export interface DkGridSize {
    width: string;
    height: string;
}
export interface DkGridAppearance {
    matElevation: boolean;
    elevationValue: number;
    verticalRowLines: boolean;
    stripeRows: boolean;
}

export interface DkGridHeader {
    columnContextMenu: boolean;
    headerHeight: number;
}

export interface DkGridDragging {
    allowColumnDragging: boolean;
}

export interface DkGridRows {
    displayRowId: boolean;
    rowIdWidth: number;
    contentRowHeight: number;
}

export interface DkGridRowGrouping {
    rowGroupingHeight: number;
    rowGroupingColumnHeight: number;
    displayRowGroupingIndent: boolean;
    rowGroupingIndentWidth: number;
}

export interface DkGridSorting {
    allowSorting: boolean;
}

export interface DkGridFiltering {
    allowRowFilter: boolean;
    filterRowHeight: number;
    onDemandFilter: boolean;
}

export interface DkGridSelection {
    allowSelection: boolean;
}

export interface DkGridEdition {
    editionMode: boolean;
    displayEditionToolbar: boolean;
    editionToolbarHeight: number;
    edtitionToolbarItemHeight: number;
    editionToolbarPosition: EditionToolbarPosition;
    editionToolbarAlignment: EditionToolbarAlignment;
}

export interface DkGridPagination {
    allowPagination: boolean;
    pageSize: number;
    paginationHeight: number;
}

export type DkGridProperties = DkGridSize & DkGridAppearance & DkGridHeader &
    DkGridRows & DkGridRowGrouping & DkGridSorting &
    DkGridFiltering & DkGridSelection & DkGridEdition &
    DkGridDragging & DkGridPagination;

export const gridSize: DkGridSize = {
    width: 'auto',
    height: '500px'
};

export const gridAppearance: DkGridAppearance = {
    matElevation: true,
    elevationValue: 2,
    stripeRows: true,
    verticalRowLines: false
};

export const gridHeader: DkGridHeader = {
    columnContextMenu: true,
    headerHeight: 60
};

export const gridDragging: DkGridDragging = {
    allowColumnDragging: false
};

export const gridRows: DkGridRows = {
    displayRowId: false,
    rowIdWidth: 70,
    contentRowHeight: 50
};

export const gridRowGrouping: DkGridRowGrouping = {
    rowGroupingHeight: 71,
    displayRowGroupingIndent: true,
    rowGroupingIndentWidth: 25,
    rowGroupingColumnHeight: 36
};

export const gridSorting: DkGridSorting = {
    allowSorting: false
};

export const gridFitlering: DkGridFiltering = {
  allowRowFilter: false,
  onDemandFilter: false,
  filterRowHeight: 55
};

export const gridSelection: DkGridSelection = {
  allowSelection: false
};

export const gridEdition: DkGridEdition = {
  editionMode: false,
  displayEditionToolbar: false,
  editionToolbarHeight: 55,
  edtitionToolbarItemHeight: 42,
  editionToolbarAlignment: 'left',
  editionToolbarPosition: 'bottom'
};

export const gridPagination: DkGridPagination = {
  allowPagination: false,
  pageSize: 50,
  paginationHeight: 64
};

```

{% endcode %}

{% hint style="warning" %}
We have created these interfaces for demo purposes. Therefore, every property of these interfaces feeds the corresponding <mark style="color:green;">`DkGridComponent`</mark> properties.
{% endhint %}

## Sample Data

We generate sample data of **1000 rows** or even more. The service <mark style="color:green;">`SampleData`</mark> is responsible for this data generation.

{% hint style="info" %}
We have generated only five rows for the [Quick Start Tutorial](https://docs.dikesoft.com/getting-started/quick-start-tutorial#binding-the-datasource) by hand.
{% endhint %}

### Shape of data

The main interface is <mark style="color:green;">`Employee`</mark>. This interface contains all the fields that we display in the live examples.

{% code title="data.model.ts" lineNumbers="true" %}

```typescript
export interface Employee {
  employeeId: string;
  firstName: string;
  lastName: string;
  gender: string;
  age: number;

  country: string;
  hireDate: Date;

  email: string;

  sales: number[];
  totalSales: number;
  bonus: number;
  performance: number;
}

export const months: string[] = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
];

```

{% endcode %}

## Conventions

For a better experience reading this set of docs, we have taken some conventions:

1. Any type, even primitives, are highlighted in the text in green color. For example, <mark style="color:green;">`Date`</mark>, <mark style="color:green;">`string`</mark>, <mark style="color:green;">`numeric`</mark>, <mark style="color:green;">`DkGridComponent`</mark>, <mark style="color:green;">`Employee`</mark>.
2. HTML selectors are highlighted in the text in red color. For example, <mark style="color:red;">`div`</mark>, <mark style="color:red;">`section`</mark>, <mark style="color:red;">`dk-grid`</mark>, <mark style="color:red;">`dk-grid-column`</mark>.
3. Properties for the <mark style="color:red;">`dk-grid`</mark> and <mark style="color:red;">`dk-grid-column`</mark> selectors are highlighted in text in orange color. For example, <mark style="color:orange;">`allowSorting`</mark>, <mark style="color:orange;">`sortable`</mark>, <mark style="color:orange;">`allowRowGrouping`</mark>, <mark style="color:orange;">`draggable`</mark>, <mark style="color:orange;">`filterable`</mark>.
4. Injection Tokens are highlighted in blue color. For example, <mark style="color:blue;">`HEADER_ROW_HEIGHT`</mark>, <mark style="color:blue;">`LOADING_MESSAGE`</mark>.