# Overview
To help you understand every section, we have created a live demo for each DkGrid feature.
## 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
Property
Description
Default value
Validators
Material Elevation
Indicates if the DkGrid will express elevation.
true
Elevation value
The elevation value the DkGrid will take.
2
Required Min value: 0 Max value: 24 Only numbers
Vertical Row Lines
Indicates if the lines that separate every column value will be shown.
false
Striped
Indicates if one row will be distinguished from the other.
true
#### Header
Property
Description
Default value
Validators
Column Context Menu
It allows showing or hiding the context menu for all the DkGrid columns.
true
Header Height
Sets the height, in pixels, for every column header.
60
Required Min value: 40 Max value: 120 Only numbers
#### Dragging
Property
Description
Default value
Allow column dragging
A flag that indicates if the DkGrid allows its columns to be dragged.
false
#### Rows
Property
Description
Default value
Validators
Row Id
A flag that allows displaying the id of every row.
false
Column Id width
Establishes the width, in pixels, of the column that displays the Row Id.
70
Required Min value: 50 Max value: 100 Only numbers
Content Row Height
Establishes the height, in pixels, of every displayed row.
50
Required Min value: 45 Max value: 80 Only numbers
#### Row Grouping
Property
Description
Default value
Validators
Row Grouping Height
The height, in pixels, of the panel where the columns are displayed, which the DkGrid is grouped by.
71
Required Min value: 50 Max value: 100 Only numbers
Columns Height
The height, in pixels, of every column that is displayed in the Row-Grouping panel.
36
Required Min value: 30 Max value: 80 Only numbers
Row Grouping Indent
A flag that allows displaying or hiding the indentation of every row under a group.
true
Indent width
The width, in pixels, of the indentation every row under a group will have.
25
Required Min value: 25 Max value: 150 Only numbers
#### Sorting
Property
Description
Default value
Allow sorting
Indicates if the DkGrid will allow or not that its rows could be ordered.
false
#### Filtering
Property
Description
Default value
Validators
Row Filter
The flag that allows if the row, under the headers, will be shown.
false
Row Filter Height
The height, in pixels, that the row filter will have.
55
Required Min value: 45 Max value: 80 Only numbers
On-Demand filter
This flag allows filtering rows until the user sends the conditions by clicking the corresponding button.
false
#### Selection
Property
Description
Default value
Allow selection
The flag that allows that every row could be selected.
false
#### Edition
Property
Description
Default value
Validators
Edition mode
This flag is used to enable or disable the rows edition, if the DkGrid allows edition as well.
false
Edition Toolbar
This flag allows displaying or hiding the edition toolbar.
false
Toolbar Height
The height, in pixels, that the Edition Toolbar will have.
55
Required Min value: 45 Max value: 100 Only numbers
Toolbar Item Height
The height, in pixels, of every option of the Edition Toolbar.
42
Required Min value: 36 Max value: 60 Only numbers
Toolbar position
The value indicates if the Edition Toolbar is shown at the top or bottom of the DkGrid.
bottom
Toolbar alignment
The value indicates if the Edition Toolbar is shown at the left, center or right.
left
#### Pagination
Property
Description
Default value
Validators
Pagination
This flag allows paginating the data set.
false
Page size
The value indicates how many rows will be displayed for every page.
50
Required Min value: 1 Only numbers
Pagination Height
The height, in pixel, that the paginator will have.
64
Required Min value: 60 Max value: 100 Only numbers
### Floating Configuration Panel
While navigating the live examples, you will see a red square with white gear.
Clicking on the white gear will show a floating panel with all the themes, schemes, and DkGrid properties.
{% 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 `DkGridConfig`. 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;
constructor() {
this.gridConfigSubject = new BehaviorSubject(this.getDefaultProperties());
}
get configChange(): Observable {
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 `DkGridConfig` service does not belong to the `DkGridComponent` definition itself. It was created only for demo purposes.
{% endhint %}
As you can see in the `DkGridConfig` definition, it has a public property called `configChange` of type `Observable`. Therefore, If a live-demo feature should react to these properties changes, the corresponding `DkGridComponent` instance must listen to the `configChange` observable.
We have grouped all the properties in one type called `DkGridProperties`, 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 `DkGridComponent` properties.
{% endhint %}
## Sample Data
We generate sample data of **1000 rows** or even more. The service `SampleData` is responsible for this data generation.
{% hint style="info" %}
We have generated only five rows for the [Quick Start Tutorial](/getting-started/quick-start-tutorial#binding-the-datasource) by hand.
{% endhint %}
### Shape of data
The main interface is `Employee`. 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, `Date`, `string`, `numeric`, `DkGridComponent`, `Employee`.
2. HTML selectors are highlighted in the text in red color. For example, `div`, `section`, `dk-grid`, `dk-grid-column`.
3. Properties for the `dk-grid` and `dk-grid-column` selectors are highlighted in text in orange color. For example, `allowSorting`, `sortable`, `allowRowGrouping`, `draggable`, `filterable`.
4. Injection Tokens are highlighted in blue color. For example, `HEADER_ROW_HEIGHT`, `LOADING_MESSAGE`.
# Quick Start Tutorial
This section summarizes all the essentials you need to know to start with DkGrid. Here you can find how to create a DkGrid instance, add some columns, and enable some features.
## Live example
After completing this tutorial, you will get something similar to the live example.
{% hint style="success" %}
[Getting Started](https://demos.dikesoft.com/dk-grid/getting-started) live example.
{% endhint %}
## Creating an Angular app
Before using the **DkGrid Library,** you must create an Angular app. Then, follow the steps described in the Angular official docs to [set up your local environment](https://angular.io/guide/setup-local) for Angular development.
{% hint style="warning" %}
The **DkGrid Library** has the following Angular packages as peer dependencies:
* @angular/common
* @angular/core
* @angular/forms
* @angular/cdk
* @angular/material
* rxjs
{% endhint %}
{% hint style="success" %}
At the time of this writing, we support **Angular v12**, **v13**, and **v14**.
{% endhint %}
## Adding Angular Material
Since the **DkGrid Library** uses some **CDK** packages and many **Angular Material** components, you must install the Angular Material package.
Following the [Angular Material official docs](https://material.angular.io/guide/getting-started), in the root of your Angular app, open a terminal and run the following command:
```
ng add @angular/material
```
The `ng-add` command will install **Angular Material**, the **Component Dev Kit (CDK)**, and **Angular Animations**. During the installation process, some questions will be prompted.
{% hint style="info" %}
For this tutorial, you can select a [pre-built material design theme](https://material.angular.io/guide/theming#using-a-pre-built-theme).
{% endhint %}
## Adding DkGrid to your project
### Installing the NPM package
We distribute the **DkGrid Library** as **NPM** package. Once you have set up your Angular environment, you can add the **DkGrid Library** to your project.
At the root of your project, open a terminal and run the following command:
```
npm i @dk-grid-standard/angular
```
{% hint style="success" %}
If you are using the **Community Edition**, run the following command:
npm i @dk-grid-community/angular
{% endhint %}
{% hint style="info" %}
Be aware of pulling the correct version according to your Angular version.
{% endhint %}
### Adding the DkGrid Angular module
After installing the corresponding DkGrid NPM package in your development environment, **add** the **DkGrid module** to the app module.
{% code title="app.module.ts" lineNumbers="true" %}
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatNativeDateModule } from '@angular/material/core';
import { DkDataGridModule } from '@dk-grid-standard/angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatNativeDateModule,
DkDataGridModule
],
providers: [ ],
bootstrap: [AppComponent],
})
export class AppModule { }
```
{% endcode %}
{% hint style="warning" %}
If your data set has date fields, do not forget to import the MatNativeDateModule or a custom implementation instead.
Internally, the DkGrid uses the native Date type. Therefore, your custom implementation must also manage date fields using the native Date type.
{% endhint %}
## Adding the DkGrid Styles
The DkGrid package comes with four pre-built theme CSS files. Each of them uses the same palettes as Angular Material pre-built themes. Indeed the file names are the same.
Theme
Scheme
Palettes
deeppurple-amber.css
Light
deep-purple, amber, red
indigo-pink.css
Light
indigo, pink, red
pink-bluegrey.css
Dark
pink, bluegrey, red
purple-green.css
Dark
purple, green, red
{% hint style="info" %}
We use a pre-built theme for this tutorial, but you can customize the DkGrid theming.
{% endhint %}
You can add the DkGrid styles in two ways: **importing the CSS file** directly in the `styles.scss` file or adding the entry in the **styles array** from the `angular.json` file.
### Importing the CSS file
Open the `styles.scss` file and add the following line:
{% code title="styles.scss" lineNumbers="true" %}
```scss
@import "@dk-grid-standard/angular/prebuilt-themes/indigo-pink.css";
```
{% endcode %}
### Adding the CSS file to the styles array
Open the `angular.json` file and add the following entry to the styles array:
{% code title="angular.json" lineNumbers="true" %}
```json
"styles": [
"node_modules/@dk-grid-standard/angular/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
]
```
{% endcode %}
## DkGrid basic configuration
The next step is declaring a basic configuration to display some columns. Then, add the following code to `app.component.html` and `app.component.ts` files and remove the scaffolding code.
{% tabs %}
{% tab title="app.component.html" %}
{% code lineNumbers="true" %}
```markup
```
{% endcode %}
{% endtab %}
{% tab title="app.component.ts" %}
{% code lineNumbers="true" %}
```typescript
import { Component, OnInit } from '@angular/core';
import { DkGridDataSourceInput } from '@dk-grid-standard/angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
dkgDataSource: DkGridDataSourceInput>;
constructor() { }
ngOnInit(): void {
this.dkgDataSource = [{
employeeId: '43c8a235-a95d-4e3e-bc30-f31ff33d490d',
firstName: 'Dolores',
lastName: 'Zieme',
gender: 'female',
age: 51,
email: 'dolores.zieme@gmail.com',
hireDate: new Date(2020, 7, 6)
}, {
employeeId: '0f1bc4f3-f746-489a-9c24-eb570a16e556',
firstName: 'Celia',
lastName: 'Mertz',
gender: 'female',
age: 55,
email: 'celia.mertz@gmail.com',
hireDate: new Date(2010, 5, 11)
}, {
employeeId: '88acf950-dee5-480a-a67e-1b0419c9a473',
firstName: 'Jeffery',
lastName: 'Renner',
gender: 'male',
age: 60,
email: 'jeffery.renner@hotmail.com',
hireDate: new Date(2016, 11, 22)
}, {
employeeId: '03a4e13f-98b4-4998-a40b-b66a832f327e',
firstName: 'Annette',
lastName: 'Satterfield',
gender: 'female',
age: 37,
email: 'annette.satterfield@yahoo.com',
hireDate: new Date(2019, 5, 2)
}, {
employeeId: 'a800045a-5127-4a5f-b93f-635f162ad376',
firstName: 'Geraldine',
lastName: 'Weimann',
gender: 'female',
age: 42,
email: 'geraldine.weimann@hotmail.com',
hireDate: new Date(2016, 10, 19)
}] as Partial[];
}
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
Adding the `dk-grid` selector to the `app.component.html` file, we have created a new instance of type `DkGridComponent`.
### Column definitions
You can create columns using instances of type `DkGridColumnComponent` via templating.
{% hint style="info" %}
You can define columns in code as well
{% endhint %}
A basic column definition consists of:
Property name
Description
fieldName
The name of the field in the data source.
headerText
The visible label for the given column.
dataType
Data type could be Text, Numeric, Date or Binary.
{% hint style="info" %}
If you do not provide the `width` property, as the hire column, the **default** value is **200**.
The `width` value is given in **pixels**.
{% endhint %}
### Binding the Datasource
The DkGrid component defines an input property called `datasource`. The type of the `datasource` property is a union type called `DkGridDataSourceInput`.
{% code lineNumbers="true" %}
```typescript
// DkGridDataSourceInput definition:
type DkGridDataSourceInput = DataSource |
DkDataSource | DkGridDataSource |
Observable | T[]> |
ReadonlyArray | T[];
```
{% endcode %}
According to the `DkGridDataSourceInput` definition, a simple array is provided for this tutorial, adding five rows with a shape of a partial `Employee` interface.
### Displaying the output
If everything goes well, you will see an output similar to the following screenshot:
## Exploring more functionalities
So far, we have provided the minimum number of properties. Now it is time to explore more functionalities and how easy it is to enable them.
### Enabling In-line Filters
The set of rows for this tutorial is minimal, but you probably load hundreds or even thousands of rows in an actual application.
Filtering rows is a must-have for any enterprise application. The DkGrid allows two types of filters:
1. **In-line Filters**. It displays a row under the column headers, allowing the user to type the search term for each column.
2. **Column Filters**. It will enable the user to enter more than one condition for each column.
{% hint style="info" %}
DkGrid lets you customize both types of filters.
{% endhint %}
{% hint style="success" %}
We have enabled **In-line Filters** for this tutorial.
{% endhint %}
Open the file `app.component.html` and add the property `allowRowFiltering` to the `DkGridComponent` instance. For the sake of brevity, we only show the `dk-grid` selector.
{% code title="app.component.html" lineNumbers="true" %}
```markup
```
{% endcode %}
The following screenshot shows the result of allowing the row filter. We have highlighted the row under the headers with a red square. Moreover, we typed the letter ***d*** as a filter.
### Enabling Sorting
For allowing the sort function for every desired column, you should enable sorting at the grid level, then at the column level.
Open the file `app.component.html` and add the following:
1. For the `dk-grid` selector, add the property `allowSorting`.
2. And for every column you want to be sortable, add the property `sortable`.
For the sake of brevity, we only show the `dk-grid`, and the target `dk-grid-column` selectors.
{% code title="app.component.html" lineNumbers="true" %}
```markup
```
{% endcode %}
When you hover the mouse over the column header, you will see an arrow indicating that you can sort the DkGrid rows through this column.
If you click on the column header, you sort the DkGrid rows, and a white arrow indicates the sorting operation.
If you click more than one time:
1. The first click will order the data set in **ascending** way.
2. The second click will invert the order meaning that the data set is ordered in **descending** mode.
3. With the third click, the data set will not be ordered through the given column anymore.
{% hint style="info" %}
Sorting is applied one column at a time.
{% endhint %}
After applying the sorting properties, you will get something that looks like the following:
## Other features
You can customize more features using a DkGrid component. In this section, we explore two more features regarding the UI.
### Material Elevation / Highlighting the odd rows
Since we base the DkGrid definition on Angular Material, you can add elevation to the DkGrid component.
When the user is working with a large data set, it is helpful to distinguish one row from the other. To accomplish it, add a flag at the level of the grid.
Open the file `app.component.html` and add the `gridElevation` and `striped` properties to the `dk-grid` selector.
{% code title="app.component.html" lineNumbers="true" %}
```markup
```
{% endcode %}
Same as before, we only show the `dk-grid` selector for brevity.
Your DkGrid instance will look like the following output:
{% hint style="info" %}
By default, adding the `gridElevation` flag will show an elevation with a value of two.
{% endhint %}
{% hint style="info" %}
You can change the elevation, providing a number between **0** to **24**. You provide this value through a property called `gridElevationValue`.
{% endhint %}
## Summary
In this tutorial, we learned how to define columns and bind some data for displaying it using a DkGrid instance. In addition, we have managed grid filtering and sorting and some UI features, including grid styling. But, of course, the best thing is how easy it is to enable these features.
# Grid Structure
This section describes the main parts of a DikeGrid instance and how you can customize this structure.
## Live example
{% hint style="success" %}
[Grid Structure](https://demos.dikesoft.com/dk-grid/grid-structure) live example.
{% endhint %}
## CSS Grid Layout
The DikeGrid uses the CSS Grid Layout specification to create its internal structure and display all the defined columns.
As you know, the CSS Grid Layout specification uses column and row templates. That is why every part of the DikeGrid is called a row. Therefore, for instance, the Header is called the Header Row, the Content, Content Row, etc.
## Code for this section
You can read any sub-section in the order you want. However, we recommend reading all sub-sections as they appear.
The following initial configuration will increase in every sub-section.
{% tabs %}
{% tab title="grid-structure.component.html" %}
```markup
```
{% endtab %}
{% tab title="grid-structure.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { DikeGridDataSourceInput } from '@dikesoft/data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'grid-structure',
templateUrl: './grid-structure.component.html',
styleUrls: ['./grid-structure.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridStructureComponent implements OnInit, OnDestroy {
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
### Complete code
{% tabs %}
{% tab title="structure.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { DikeDataGridModule, DIVISION_PANEL_GAP,
DIVISION_PANEL_LINE_WIDTH, BORDER_WIDTH, BORDER_GAP,
COLUMN_CONTEXT_MENU_WIDTH, COLUMN_CONTEXT_MENU_HEIGHT,
LOADING_MESSAGE
} from '@dikesoft/data-grid';
import { SharedModule } from 'app/shared/shared.module';
import { structureRoutes } from 'app/modules/admin/structure/structure.routing';
import { GridStructureComponent } from 'app/modules/admin/structure/grid-structure/grid-structure.component';
@NgModule({
declarations: [
GridStructureComponent
],
imports: [
CommonModule,
RouterModule.forChild(structureRoutes),
SharedModule,
DikeDataGridModule
],
providers: [
{ provide: DIVISION_PANEL_GAP, useValue: 21},
{ provide: DIVISION_PANEL_LINE_WIDTH, useValue: 3},
{ provide: BORDER_WIDTH, useValue: 3 },
{ provide: BORDER_GAP, useValue: 35 },
{ provide: COLUMN_CONTEXT_MENU_WIDTH, useValue: 700 },
{ provide: COLUMN_CONTEXT_MENU_HEIGHT, useValue: 550 },
{ provide: LOADING_MESSAGE, useValue: 'Loading rows of data, please wait...' }
]
})
export class StructureModule { }
```
{% endtab %}
{% tab title="grid-structure.component.html" %}
```markup
Waiting Indicator message
Custom messageText valueRequired
```
{% endtab %}
{% tab title="grid-structure.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { delay } from 'rxjs/operators';
import { DikeGridComponent, DikeGridDataSourceInput } from '@dikesoft/data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'grid-structure',
templateUrl: './grid-structure.component.html',
styleUrls: ['./grid-structure.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridStructureComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
customMessage: FormControl;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) {
this.customMessage = new FormControl('', Validators.required);
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000).pipe(delay(2000));
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onDisplayWaitingIndicator(): void {
this.dikeGrid.waitingIndicator.customMessageIndicator(this.customMessage.value as string);
}
onHideWaitingIndicator(): void {
this.dikeGrid.waitingIndicator.hideWaitingIndicator();
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Grid Size
You can customize the width and the height of the DikeGrid instance.
## Grid width
By default, the DikeGrid width is equal to ***auto***. However, you can change this value by providing width's input property.
{% hint style="success" %}
You can also change this value by providing an Injection Token called `GRID_WIDTH`.
{% endhint %}
## Grid height
By default, the DikeGrid height is equal to ***90vh***. However, you can change this value by providing height's input property.
{% hint style="success" %}
You can also change this value by providing an Injection Token called `GRID_HEIGHT`.
{% endhint %}
## Changing the DikeGrid size
Let us give the DikeGrid the previous input properties, binding the related properties from the gridProperties object.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Now, open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Size** section, type **80%** and **90vh** for the width and the height, respectively.
# Header
Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Header is also called Header Row.
## Header Row
The Header Row of the DikeGrid is composed of all the column headers.
This initial setup generates the following output:
As you can see, the Header Row occupies the entire horizontal extension of the DikeGrid instance.
The highlighted Header Row represents only one column definition in the CSS Grid Layout specification. Therefore, the DikeGrid CSS Grid Layout will have three template columns when defining columns in all panels of the DikeGrid.
{% hint style="info" %}
See the [Panels' structure](/fundamentals/grid-structure/panels) for more details.
{% endhint %}
Inside the Header Row comes the actual column headers definitions. The Header Row uses a nested CSS Grid Layout grid.
## Changing the Header Row height
By default, the column headers will have a height of **60 pixels**. However, you can change this height by providing a numeric value to the input property called `headerRowHeight`.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="success" %}
You can also change the height of the Header by providing the Injection Token called `HEADER_ROW_HEIGHT`.
{% endhint %}
In the previous code snippet, we added the `headerRowHeight` property to the DikeGrid instance and was bound to the `gridProperties` object.
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Header** group, and type 120 in the **Header Height** textbox.
### Column Groups
Be aware that the **Header Row height** will be present in every level when grouping columns. Therefore, the total size of the DikeGrid Header will be the sum of every nested group.
Let us define a group named **Complete Name**. This group will have two child columns: **Name** and **Surname** columns.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="success" %}
For further details about groups, see [Column Grouping](/columns/column-grouping).
{% endhint %}
# Row Filter
Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Row Filter is also called Row-Filter Row.
## Row-Filter Row
The Row-Filter Row of the DikeGrid enables a textbox for every defined column. To show the Row-Filter Row, we have to provide an input property called `allowRowFiltering`.
Let us bind the related property from the `gridProperties` object to display the Row-Filter Row.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Filtering** group, and click on the **Row Filter** checkbox.
The following screenshot shows how the Row-Filter Row looks:
Same as the Header, the Row-Filter Row occupies the full horizontal extension of the DikeGrid instance.
The highlighted Row-Filter Row represents only one column definition in the CSS grid layout specification. Therefore, the DikeGrid CSS grid layout will have three template columns when defining columns in all panels of the DikeGrid.
{% hint style="info" %}
See the [Panels' structure](/fundamentals/grid-structure/panels#content-panels) for more details.
{% endhint %}
Inside the Row-Filter Row comes the actual column filters definitions. The Row-Filter Row uses a nested CSS Grid Layout grid.
## Changing the Row-Filter Row height
By default, the Row-Filter Row has a height of **55 pixels**. Nevertheless, you can change this height by providing a numeric value to the input property called `filterRowHeight`.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="success" %}
You can also change the height of the Filter-Row Row by providing the Injection Token called `FILTER_ROW_HEIGHT`.
{% endhint %}
In the previous code snippet, we added the `filterRowHeight` property to the DikeGrid instance and was bound to the `gridProperties` object.
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Filtering** group, and type 80 in the **Row-Filter Row Height** textbox.
# Rows
Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, every row is also called Content Row.
## Content Rows
Content Rows are composed of cells. Structurally speaking, a column definition constructs a cell definition.
Content Rows extend the entire DikeGrid width. The following output shows some Content Rows:
The highlighted Content Rows have one column definition in the CSS Grid Layout specification. Therefore, the DikeGrid CSS Grid Layout will have three template columns when defining columns in all panels of the DikeGrid.
{% hint style="info" %}
See the [Panels' structure](/fundamentals/grid-structure/panels) for more details.
{% endhint %}
Inside the Content Rows come the actual cell definitions. Content Rows use a nested CSS Grid Layout grid.
## Changing the Content Row height
By default, Content Rows have a height of **50 pixels**. However, you can change this height by providing a numeric value to the input property called `contentRowHeight`.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="success" %}
You can also change the height of the Content Rows by providing the Injection Token called `CONTENT_ROW_HEIGHT`.
{% endhint %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Rows** group, and type 100 in the **Content Row Height** textbox.
# Panels
Panels are containers to accommodate columns.
## Content Panels
There are three Content Panels in the DikeGrid structure definition. The Content Panels are **left**, **center**, and **right** panels. Every Content Panel can accommodate any number of columns, but only the center panel will be scrollable.
Let us rearrange and create the following columns:
1. First, add the **Employee Id** column in the **left** panel.
2. Then, add the **Name**, **Surname**, **Gender**, **Age**, and **Email** columns to the **center** panel.
3. Lastly, add the **Hire Date** column to the **right** panel.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
The following output shows the previous column definition:
{% hint style="info" %}
You can define columns or column groups in a Content Panel.
{% endhint %}
As you can see, columns in the left and right panels are visible all the time.
Highlighting the cell definitions for the three panels, we can see that the Content Row is split into three template columns according to the CSS Grid Layout specification.
{% hint style="danger" %}
Be aware of left and right panels' width. Since these panels are not scrollable, if the left and right panels exceed the grid's width, the center panel will not be visible.
{% endhint %}
### Panel division line
A division line separates two adjacent panels when creating columns in the left or right panels. Every line belongs to the left and right panels, respectively.
{% hint style="info" %}
All resizable columns in a panel change their width evenly when resizing the panel. For more details, see [Column Sizing](/columns/column-sizing#dragging-the-panel-division-line).
{% endhint %}
#### Space between two panels
There is a space between two adjacent panels. Then, the DikeGrid draws the division line at the center of this space.
By default, the space between two adjacent panels is **13 pixels** in width. However, you can change the space width by providing an Injection Token called `DIVISION_PANEL_GAP`.
#### Panel division line width
The division line is a **pixel width**. Same as before, you can change this value by providing an Injection Token called `DIVISION_PANEL_LINE_WIDTH`.
The following code snippet shows custom values for the mentioned Injection Tokens.
{% code title="structure.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: DIVISION_PANEL_GAP, useValue: 21},
{ provide: DIVISION_PANEL_LINE_WIDTH, useValue: 3}
]
})
export class StructureModule { }
```
{% endcode %}
The following screenshot shows the previous module configuration.
As we can see in the previous screenshot, the panel division line is thicker, and the space between panels is larger.
## Group panel
Like any other panel in the DikeGrid definition, the group panel accommodates all the columns to group the DikeGrid data rows.
Let us allow row grouping in the DikeGrid instance to see how the group panel looks.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can enable row grouping only at the creation phase of the DikeGrid.
{% endhint %}
The following screenshot shows the group panel. As you can see, the group panel is at the ***top*** of the column headers.
Rearrange the **Age** column to display it in the group panel.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
After making the **Age** column **groupable** and creating it in the **group panel**, the output looks like the following:
{% hint style="warning" %}
You can define **data** columns in the **group panel**, only; not column groups. For more details, see the Row Grouping section.
{% endhint %}
### Changing the group panel height
By default, the group panel has **71 pixels** of height. You can change this value by providing an input property called `rowGroupingRowHeight`.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
In the previous code snippet, we added the `rowGroupingRowHeight` property to the DikeGrid instance and was bound to the `gridProperties` object.
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Row Grouping** section, and type 100 in the **Row-Grouping Row Height** textbox.
{% hint style="success" %}
You can also change the group panel height by providing an Injection Token called `ROW_GROUPING_ROW_HEIGHT`.
{% endhint %}
### Changing the height of the columns in the group panel
By default, the columns contained in the group panel have a height of **36 pixels**. However, you can change it by providing a value for the input property called `rowGroupingColumnHeight`.
Let us bind the `gridProperties` object to the `rowGroupingColumnHeight` input property.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/#floating-configuration-panel) go to the **Row Grouping** section, and type 80 in the **Columns Height** textbox.
{% hint style="success" %}
You can also change the height of the columns by providing an Injection Token called `ROW_GROUPING_COLUMN_HEIGHT`.
{% endhint %}
### Changing the Row-Grouping indent width
When you open a group, you will see an indent between the most left side of the DikeGrid and the first column.
The Row-Grouping indent is visible by default. However, you can hide it if you want. You can show or hide this indent by providing an input property called `displayRowGroupingIndent`.
{% hint style="success" %}
You can also change the indent width by providing an Injection Token called `ROW_GROUPING_INDENT`.
{% endhint %}
By default, this indent is **25 pixels** in width. Nevertheless, you can change the indent width by providing an input property called `rowGroupingIndentWidth`.
{% hint style="success" %}
You can also change the indent width by providing an Injection Token called `ROW_GROUPING_INDENT_WIDTH`.
{% endhint %}
Let us bind the related properties from the `gridProperties` object.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can remove the columns from the **group panel** because the `draggable` input property is bound to the **Gender** and **Age** columns.
{% endhint %}
Open the [Floating Configuration Panel](/#floating-configuration-panel) go to the **Row Grouping** section, and type 100 in the **Indent Width** textbox. You can uncheck the **Row-Grouping Indent** checkbox to hide the Row-Grouping indent.
To apply an indent to every Content Row depends on the row belonging level.
We grouped the DikeGrid rows by two columns in the previous configuration: **Gender** and **Age**.
This configuration generates an output of **three levels**:
1. **Level zero.** This level is the first group, which corresponds to the **Gener** column. At this level, the indent is not visible.
2. **Level one.** This level is the second group, which corresponds to the **Age** column. At this level, the indent is 100 pixels in width.
3. **Level three.** This level corresponds to the data itself. At this level, the indent is 255 pixels in width.
{% hint style="info" %}
The indent is equal to ***indent width \* level*** ***+ 55 pixels*** for a nested data row.
The 55 pixels in width corresponds to the group icon used to open and close the group.
{% endhint %}
# Gutters
Gutters are the spaces between columns and rows. The DikeGrid definition could or could not draw a line at the center of these spaces.
## Horizontal Gutters
Horizontal Gutters are the vertical space between rows, and it has **3 pixels** of height. The DikeGrid definition always draws a line of one-pixel width at the center of this vertical space.
{% hint style="info" %}
Neither the vertical space nor the horizontal line is customizable in size.
{% endhint %}
## Vertical Gutters
Vertical Gutters are the horizontal space between columns. By default, Vertical Gutters have **5 pixels** in width.
You can provide an input flag called `verticalRowLines` to the DikeGrid, and it could draw a line of one-pixel width at the center of this horizontal space.
{% hint style="info" %}
Neither the horizontal space nor the vertical line is customizable in size.
{% endhint %}
Let us bind the related property from the `gridProperties` object to display the vertical lines per row.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Now, open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Appearance** section, and enable the **Vertical Row Lines** checkbox.
You can see the vertical lines per row in the following screenshot.
### Who does the Vertical Gutters own?
By definition, columns own the Vertical Gutters:
1. Columns in the left, center or group panels own the right-gutter. Only the first visible column holds the left-gutter as well.
2. Columns in the right panel own the left-gutter. Only the last visible column holds the right-gutter as well.
{% hint style="info" %}
Vertical Gutter owning is important for **resizing** and **dragging** purposes.
{% endhint %}
# Edition Toolbar
Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Edition Toolbar is also known as Edition Toolbar Row.
## Edition Toolbar Row
When the DikeGrid allows editing rows, the DikeGrid enables some options to manage the edited rows.
Let us **allow edition** and bind the **edition mode** input property to the `gridProperties` object to show the Edition options.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can **allow edition** only at the creation phase of the DikeGrid.
{% endhint %}
Now, you could toggle the DikeGrid between ***view mode*** and ***edition mode***. Thus, open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Edition** section, and click on the **Edition mode** checkbox.
Once the DikeGrid is in edition mode, you can access the Edition options by default through a contextual menu at the left of the first visible column header.
However, a DikeGrid instance could display those options through a toolbar. Hence, to show the Edition Toolbar Row, provide the input flag called `editionToolbar`. Then, let us bind the related property from the `gridProperties` object to show the Edition Toolbar Row.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
The previous definition allows selection by providing an input flag called `allowSelection`. Thus, we can see all the edition options.
{% endhint %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), and click on the **Edition Toolbar** checkbox.
You can now access all the edition options through the Edtion Toolbar shown at the ***bottom*** of the content rows.
### Edition Toolbar position
The DikeGrid could display the Edition Toolbar at the ***bottom*** of the content rows or the ***top*** of the column headers.
{% hint style="info" %}
By default, the DikeGrid shows the Edition Toolbar at the ***bottom*** of the content rows
{% endhint %}
Let us bind the related property from the `gridProperties` object to change the Edition Toolbar position.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Edition** group and, select the ***top*** option.
### Edition Toolbar alignment
The Edition Toolbar could align its options at the **left**, **center**, or **right**.
{% hint style="info" %}
The default options alignment is at the ***left***.
{% endhint %}
Bind the related property from the `gridProperties` object to change the Edition Toolbar alignment.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Edition** group, and change the Edition Toolbar's alignment by clicking on the ***center*** option.
## Changing the Edition Toolbar Row Height
The Edition Toolbar Row is **55 pixels** in height. However, you can change this value by providing an input property named `editionToolbarRowHeight`.
Let us bind the related property from the `gridProperties` object to change the Edition Toolbar Row height.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Edition** group, and type 100 in the **Toolbar Row Height** textbox.
{% hint style="success" %}
You can also change the Edition Toolbar Row height by providing an Injection Token called `EDITION_TOOLBAR_ROW_HEIGHT`.
{% endhint %}
## Changing the Edition Toolbar Items height
Edition Toolbar Items are **42 pixels** in height. Nevertheless, you can change this height by providing an input property called `editionToolbarItemHeight`.
Let us bind the related property from the `gridProperties` object to change the Edition Toolbar Items height.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Now, open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Edition** group, and type 60 in the **Toolbar Item Height** textbox.
{% hint style="success" %}
You can also change the Edition Toolbar Items height by providing an Injection Token called `EDITION_TOOLBAR_ITEM_HEIGHT`.
{% endhint %}
# Paginator
Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the paginator is also called the Pagination Row.
## Pagination Row
The Pagination Row shows the paginator when you enable pagination in the DikeGrid. Bind the related property from the `gridProperties` object to allow pagination.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Pagination** group, and enable pagination.
The previous configuration generates the following output:
{% hint style="info" %}
The DikeGrid always shows the Pagination Row at the ***bottom*** of the content rows.
{% endhint %}
### Changing the Pagination Row height
The Pagination Row is **64 pixels** in height. Nevertheless, you can change this height by providing an input property called `paginationRowHeight`.
Let us bind the corresponding property from the `gridProperties` object to change the Pagination Row height.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Now, open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Pagination** group, and type 100 in the **Pagination Row Height** textbox.
{% hint style="success" %}
You can also change the Pagination Row height by providing an Injection Token called `PAGINATION_ROW_HEIGHT`.
{% endhint %}
# Borders
The DikeGrid itself draws a border through its primary container. However, Borders concept is essential for column moving.
## DikeGrid Border
When you disable the material elevation for the DikeGrid, it draws a line in its primary internal container.
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Appearance** section, and uncheck the **MatElevation** checkbox.
{% hint style="info" %}
By default, the border is **one-pixel** in width.
{% endhint %}
### Border width
You can change the border width by providing an Injection Token called `BORDER_WIDTH`.
Let us give the DikeGrid instance this Injection Token at the module level.
{% code title="structure.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: BORDER_WIDTH, useValue: 3 }
]
})
export class StructureModule { }
```
{% endcode %}
## Borders for column moving
If we inspect the DikeGrid instance through the Chrome DevTools, we see the following structure:
The inner container highlighted with yellow is the primary container for the DikeGrid. However, there is another outer container highlighted with pink color.
The outer container creates a space between the DikeGrid definition and its external boundary. When a column moves and tries to add to the left or right panel, this space draws a line with the accent color.
{% hint style="info" %}
Internally, the space between the DikeGrid and its external boundary is called **Border Gap**.
{% endhint %}
To see how the DikeGrid draws this line, let us allow column dragging for the DikeGrid instance.
{% hint style="success" %}
Remember that **Age** and **Gender** columns are draggable, but the DikeGrid instance that contains them must allow column dragging. See the **Column Moving** section for more details.
{% endhint %}
Let us bind the related property from the `gridProperties` object to allow column dragging.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Dragging** section, and check the **Allow Column Dragging** checkbox.
Now you can grab the **Gender** column, for example, and drag it to the left or right panel.
See how the column icon changes to a ***pin icon***, indicating that the user will add the column to the **left panel**.
{% hint style="info" %}
The drawn line is **5 pixels** in width. Nevertheless, if the provided border width exceeds 5 pixels, the drawn line will be the same as the border.
{% endhint %}
### Changing the Border Gap width
The Border Gap has **15 pixels** in width by default. However, you can reduce or increase this gap by providing an Injection Token called `BORDER_GAP`.
Let us give the DikeGrid instance this Injection Token at the module level.
{% code title="structure.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: BORDER_WIDTH, useValue: 3 },
{ provide: BORDER_GAP, useValue: 35 }
]
})
export class StructureModule { }
```
{% endcode %}
We gave the DikeGrid an exaggerated value of **35 pixels** to see the difference.
{% hint style="warning" %}
Be aware that the drawn line when a column is dragging must fit in the Border Gap.
{% endhint %}
# Column Context Menu
Every column displays a context menu, and this has a default size. You can customize the width and height of this context menu or avoid displaying it.
## Context Menu
By definition, every column will show a context menu. This context menu contains two sub-options by default: **Column Chooser** and **Column Pinning**.
### Column Chooser
The Column Chooser will display all the columns in the DikeGrid in order and as a tree. If there are no nested columns, the Column Chooser will show only a list of columns. Through the Column Chooser, you can make a column visible or not.
### Column Pinning
This sub-option will show all the possible panels to drag a column.
{% hint style="success" %}
See the [Column Pinning](#column-pinning) section for more details.
{% endhint %}
There are two more sub-options: **Filtering** and **Sorting**. These options will be available when you make columns filterable and allow sorting, respectively.
{% hint style="info" %}
You can close the context menu by clicking on the **close** icon at the upper-right corner or pressing the **ESC** key.
{% endhint %}
## Suppress the Column Context Menu
You can avoid displaying the context menu for a specific column, all columns in one particular DikeGrid definition, or all DikeGrid instances.
### Suppress at the column level
To suppress the context menu at the column level, you must provide an input property called `displayMenu`.
Give the **Employee Id** column this input property a **false** value. Then, when you hover the column header of the **Employee Id** column, you will not see the context menu icon.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
### Suppress at the DikeGrid level
If you do not want the columns of a specific DikeGrid instance to display its context menu, you must provide an input property called `allowColumnContextMenu`.
Let us bind the related property from the `gridProperties` object to suppress the context menu for all defined columns.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/#floating-configuration-panel), go to the **Header** section, and uncheck the **Column Context Menu** checkbox.
Now, you will not see the context menu icon for all columns.
### Suppress for all DikeGrid instances
To suppress the context menu in all DikeGrid instances, you must provide a `false` value through the Injection Token called `COLUMN_CONTEXT_MENU`.
## Context Menu width and height
By default, the context menu is **345 pixels** in width and **490 pixels** in height. However, you can modify these values by providing the related Injection Tokens, `COLUMN_CONTEXT_MENU_WIDTH` and `COLUMN_CONTEXT_MENU_HEIGHT`, respectively.
Let us inject new values through the mentioned Injection Tokens at the module level.
{% code title="structure.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: COLUMN_CONTEXT_MENU_WIDTH, useValue: 700 },
{ provide: COLUMN_CONTEXT_MENU_HEIGHT, useValue: 550 }
]
})
export class StructureModule { }
```
{% endcode %}
As you can see, we have provided exaggerated values for width and height to spot the difference.
# Waiting Indicator
When the DikeGrid is waiting or processing rows of data, it shows a message. You can customize this message.
The DikeGrid definition overlaps a `div` element over the primary DikeGrid container, as you can see in the following screenshot. The yellow highlighted `div` is the primary DikeGrid container.
## Loading Indicator
When the DikeGrid instance is waiting for the rows of data to display, it blocks its UI and shows a message. The message indicates this waiting.
Let us add a delay when the SampleData service loads the rows of data to see the displayed message.
{% code title="grid-structure.component.ts" %}
```typescript
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000).pipe(delay(2000));
}
```
{% endcode %}
You can customize the displayed message by providing an Injection Token called `LOADING_MESSAGE`.
Let us give the module this value for the above Injection Token.
{% code title="structure.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: LOADING_MESSAGE, useValue: 'Loading rows of data, please wait...' }
]
})
export class StructureModule { }
```
{% endcode %}
## Processing Indicator
When the DikeGrid instance is processing an edition operation, it blocks its UI and shows a processing message.
{% hint style="success" %}
You can customize the displayed message by providing an Injection Token called `PROCESSING_MESSAGE`.
{% endhint %}
## Displaying the indicator using the API
When you query a `DikeGridComponent` instance from the view, you can access a property called `waitingIndicator` of type `DikeGridWaitingIndicator`.
{% hint style="success" %}
See the [`DikeGridWaitingIndicator`](/reference/dkgrid-api/dkgridwaitingindicator) definition for more details.
{% endhint %}
You can show the Waiting Indicator imperatively invoking the methods defined in the `waitingIndicator` property.
Let us modify the code to allow entering a custom message and display it.
{% tabs %}
{% tab title="grid-structure.component.html" %}
```markup
Waiting Indicator message
Custom messageText valueRequired
```
{% endtab %}
{% tab title="grid-structure.component.ts" %}
```typescript
@Component({
selector: 'grid-structure',
templateUrl: './grid-structure.component.html',
styleUrls: ['./grid-structure.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridStructureComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
customMessage: FormControl;
constructor() {
this.customMessage = new FormControl('', Validators.required);
}
onDisplayWaitingIndicator(): void {
this.dikeGrid.waitingIndicator.customMessageIndicator(this.customMessage.value as string);
}
onHideWaitingIndicator(): void {
this.dikeGrid.waitingIndicator.hideWaitingIndicator();
}
}
```
{% endtab %}
{% endtabs %}
The previous configuration adds:
1. A textbox to enter the custom message.
2. Two buttons to display and hide the Waiting Indicator, respectively.
3. Callbacks in the prior UI controls.
Then, clicking on the **Show Indicator** button generates the following output:
# DataSource
This section describes how you can provide a data set and how a DikeGrid instance treats that data set.
## Live examples
{% hint style="success" %}
[In-Memory DataSource](https://demos.dikesoft.com/dk-grid/datasource/in-memory) live example.
{% endhint %}
{% hint style="success" %}
[Custom DataSource](https://demos.dikesoft.com/dk-grid/datasource/custom) live example.
{% endhint %}
## Specifying data
Every DikeGrid instance accepts data from an `Array`, `Observable< Array>`, a `DikeGridDataSource`, or simply a `DataSource`.
{% hint style="info" %}
Remember, the `DataSource` definition is an `abstract` class with two methods: `connect()` and `disconnect()`. Therefore, you can provide an instance of a class that derives from the `DataSource` class.
{% endhint %}
Depending on the data you provide, there are two types of DataSource: an **In-Memory** DataSource and a **Custom** DataSource.
## Wrapping data entries
It does not matter how you provide your data set. The DikeGrid will **wrap** every data entry in a `DikeGridDataRowEntry` instance.
The `DikeGridDataRowEntry` wrapper helps to know several features during execution, for instance, when the user modifies a data row or when it is selected, the row status, among others.
{% hint style="success" %}
For further details, see the [`DikeGridDataRowEntry`](/reference/classes/rows#dikegriddatarowentry-less-than-t-greater-than) definition.
{% endhint %}
Once the DikeGrid **receives** and **wraps** the data, it assigns and emits a **unique id**. You can get this id by listening to the `dataDeliveryIdChange` event.
{% hint style="info" %}
Indeed, a **DikeGrid** instance will send a **unique id** every time you provide a new set of entries. It means that you can have an **Observable** or a `DikeGridDataSource`, and if you change the entries set, the DikeGrid will wrap these new entries.
{% endhint %}
Let us listen to the `dataDeliveryIdChange` event:
{% tabs %}
{% tab title="in-memory-data-source.component.html" %}
```markup
```
{% endtab %}
{% tab title="in-memory-data-source.component.ts" %}
```typescript
onDataDeliveryIdChange(id: string): void {
console.log(`Data delivery id: ${id}`);
}
```
{% endtab %}
{% endtabs %}
Open your **dev console** to see the emitted id.
{% hint style="info" %}
The DikeGrid internally creates a `DikeGridDataSource` instance to wrap every data entry.
{% endhint %}
{% hint style="warning" %}
Be aware that every time a DikeGrid instance wraps the provided entries, it **resets** the **edition** and **selection** operations. It means that the DikeGrid removes the history of changes and deselects rows.
{% endhint %}
### Row Ids
The DikeGrid sets a **unique id** number for every **row** during the wrapping operation. This id number is a consecutive number starting at the **zero number**.
You can open any live example, go to the [Floating Configuration Panel](/#floating-configuration-panel), scroll to the **Rows** section and mark the **Row Id** checkbox.
### Timestamp / Row status
Other values that the DikeGrid creates and assigns to every row are the **timestamp** and the initial **row status**.
The timestamp corresponds to the row **creation** time and the row status to the `Read` value. The `Read` value means that the user has not modified the row.
{% hint style="info" %}
The DikeGrid uses the row status and the timestamp properties to manage the edition operations. See the [Row Edition](/editing/row-edition) section.
{% endhint %}
# In-Memory DataSource
We name an In-Memory data source when you provide your data set in one go.
Providing a data set in one go means that the DikeGrid receives the data in any of the following ways:
| Data set | Description |
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Array` | When you directly assign a variety of entries. |
| `Observable` | This type of data usually comes from an `HTTP get` invocation. |
| `DikeGridDataSource` | You can create an instance of `DikeGridDataSource`, then assign your data to the `entries` property. |
When you provide your data in **one go**, the DataGrid manages the data in **memory** during all the execution.
Since you can change the `datasource` property at runtime, consider the following code snippet:
{% tabs %}
{% tab title="in-memory-data-source.component.html" %}
```markup
```
{% endtab %}
{% tab title="in-memory-data-source.component.ts" %}
```typescript
onArrayDataSource(): void {
// Create an array of five entries:
this.dkgDataSource = [{
employeeId: '43c8a235-a95d-4e3e-bc30-f31ff33d490d',
firstName: 'Dolores',
lastName: 'Zieme',
gender: 'female',
age: 51,
email: 'dolores.zieme@gmail.com',
hireDate: new Date(2020, 7, 6),
country: 'Mexico'
}, {
employeeId: '0f1bc4f3-f746-489a-9c24-eb570a16e556',
firstName: 'Celia',
lastName: 'Mertz',
gender: 'female',
age: 55,
email: 'celia.mertz@gmail.com',
hireDate: new Date(2010, 5, 11),
country: 'Netherlands'
}, {
employeeId: '88acf950-dee5-480a-a67e-1b0419c9a473',
firstName: 'Jeffery',
lastName: 'Renner',
gender: 'male',
age: 60,
email: 'jeffery.renner@hotmail.com',
hireDate: new Date(2016, 11, 22),
country: 'Bulgaria'
}, {
employeeId: '03a4e13f-98b4-4998-a40b-b66a832f327e',
firstName: 'Annette',
lastName: 'Satterfield',
gender: 'female',
age: 37,
email: 'annette.satterfield@yahoo.com',
hireDate: new Date(2019, 5, 2),
country: 'Germany'
}, {
employeeId: 'a800045a-5127-4a5f-b93f-635f162ad376',
firstName: 'Geraldine',
lastName: 'Weimann',
gender: 'female',
age: 42,
email: 'annette.satterfield@yahoo.com',
hireDate: new Date(2016, 10, 19),
country: 'United States of America'
}] as Partial[];
}
onDikeGridDataSource(): void {
// Create a DikeGridDataSource object:
const gridDataSource = new DikeGridDataSource();
// Take 2000 entries from the REST service:
this.sampleData.getEmployees(2000).subscribe(employees => gridDataSource.entries = employees);
// Assign the new DikeGridDataSource dataSource:
this.dkgDataSource = gridDataSource;
}
onObservableDataSource(): void {
// Take 500 entries from the REST service:
this.dkgDataSource = this.sampleData.getEmployees(500);
}
```
{% endtab %}
{% endtabs %}
With the previous UI, you can do the following actions:
1. **Array** button. It creates an array of five entries.
2. **Observable** button. It makes a call to an `HTTP get`. Then, it retrieves 500 entries from the REST API.
3. **DikeGridDataSource** button. It creates a `DikeGridDataSource` instance. Then it makes a call to an `HTTP get`. We assign the response to the `entries` property from the `DikeGridDataSource`.
You can see how the **unique id** changes every time the `datasource` property changes.
## DataSource Decorators
Once you assign your data source to the DikeGrid instance, it takes those rows into a **pipe** of **operations**.
See the following diagram:
{% hint style="success" %}
The `DikeGridDataSource` instance is always the first instance in the chain.
{% endhint %}
As you can see, the DikeGrid creates the following instances:
| Decorator class | Description |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `DikeRefreshingDataSource` | This decorator always wraps a `DikeGridDataSource` instance. It pushes the rows when the user has **updated** them. The DikeGrid creates this decorator if you have allowed the edition operation. |
| `DikeEditionStateDataSource` | It splits the set of rows depending on their status, `Modified`, `Deleted`, or `Editing`. The DikeGrid creates this decorator if you have allowed the edition operation. |
| `DikeFilteringDataSource` | This decorator manages all the filtering operations. Even the filters applied to the rows in edition mode. |
| `DikeSortingDataSource` | This decorator manages all the sorting operations. |
We based on the [Decorator](https://refactoring.guru/design-patterns/decorator) pattern to design the previous **chain** of **operations**. That is why we named every instance as a **decorator**. Every decorator wraps the last decorator instance.
This pattern gives us great **flexibility** in **adding** or **removing** operations to the chain and **encapsulating responsibilities** in each decorator.
{% hint style="info" %}
The DikeGrid will set the `DikePagingDataSource` decorator at the end of the chain of operations or after the created tree due to the row grouping operation.
{% endhint %}
### Custom Decorators
You can create your decorators and add them to the chain of operations. To create a decorator, you have to extend from the `abstract` class [`DikeDecoratorDataSource`](/reference/classes/datasource#dikedecoratordatasource-less-than-t-greater-than).
Let us define a custom decorator:
{% code title="custom-datasource-decorator.ts" %}
```typescript
import { map, tap } from 'rxjs/operators';
import { DikeDataSource } from '@dikesoft/angular-data-grid';
import { DikeDecoratorDataSource } from '@dikesoft/angular-data-grid';
import { DikeGridDataRowEntry } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
export class CustomDecoratorDataSource extends DikeDecoratorDataSource {
constructor(
dikeDataSource: DikeDataSource>) {
super(dikeDataSource);
this.setChangeSubscription();
}
protected setChangeSubscription(): void {
// As a wrapper, get the previous result stream:
const dataStream$ = this.dikeDataSource.connect().pipe(
tap(rows => console.log('tap-CustomDecoratorDataSource: ', rows)),
map((rows) => {
rows.forEach((row) => {
let finalEmployeeId = '';
const employeeIdSplit = row.entry.employeeId.split('-');
for (let i=0; i this.data = rows);
}
}
```
{% endcode %}
In the previous code, we only hide the **Employee Id** value. We intentionally left a tap RxJS operator to verify that the DikeGrid invokes the custom decorator.
Once you have defined your decorators, you can add them to the chain of operations, implementing the function [`DataSourceDecoratorFn`](/reference/type-aliases/datasource#datasourcedecoratorfn-less-than-t-greater-than). Then, you will assign it to the input property named `decoratorFn`.
{% hint style="warning" %}
Be aware that you can assign the `decoratorFn` property only at the initialization phase.
{% endhint %}
Let us assign the `decoratorFn` property.
{% code title="in-memory-data-source.component.ts" %}
```typescript
ngOnInit(): void {
//...
// We create our chain of operations implementing the DataSourceDecoratorFn function:
this.dkgDecoratorFn = (dataSource: DikeGridDataSource, dikeGrid: DikeGridComponent): DikeDataSource> => {
// Firstly, point to the given DikeGridDataSource, then add the decorators:
let dikeDecoratorDataSource: DikeDataSource> = dataSource;
// Custom decorator:
dikeDecoratorDataSource = new CustomDecoratorDataSource(dikeDecoratorDataSource);
// Filtering decorator:
dikeDecoratorDataSource = dikeGrid.dataSourceFactory.createFilteringDecorator(dikeDecoratorDataSource);
// Sorting decorator:
dikeDecoratorDataSource = dikeGrid.dataSourceFactory.createSortingDecorator(dikeDecoratorDataSource);
return dikeDecoratorDataSource;
};
}
```
{% endcode %}
As you can see, you have access to the property named `dataSourceFactory` under the DikeGrid instance.
{% hint style="success" %}
The `dataSourceFactory` property is of type [`DikeGridFactoryDataSource`](/reference/dkgrid-api/dkgridfactorydatasource). It is a **read-only** property used to create **filtering** and **sorting** decorators.
{% endhint %}
## Decorators and Row Grouping operation
When the user groups rows, the DikeGrid internally creates a tree where every node represents a group of data rows. Only the leaves have the actual data rows.
According to the previous statement, the DikeGrid takes the defined chain of operations and sets it to every tree leaf.
## Summary
This type of **DataSource** receives the data in **one go**. Therefore, the DikeGrid manages the provided data in **memory** during all execution. Furthermore, DikeGrid uses the [Decorator](https://refactoring.guru/design-patterns/decorator) pattern to create a **chain** of **operations**. Thus the DikeGrid handles, for instance, **filtering** and **sorting** processes, among others.
### Complete code for this section
{% tabs %}
{% tab title="in-memory-data-source.component.html" %}
```markup
```
{% endtab %}
{% tab title="in-memory-data-source.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataSourceDecoratorFn, DikeDataSource, DikeGridComponent, DikeGridDataRowEntry,
DikeGridDataSource, DikeGridDataSourceInput } from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { CustomDecoratorDataSource } from './custom-datasource-decorator';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'in-memory-data-source',
templateUrl: './in-memory-data-source.component.html',
styleUrls: ['./in-memory-data-source.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class InMemoryDataSourceComponent implements OnInit, OnDestroy {
dkgDecoratorFn: DataSourceDecoratorFn;
dkgDataSource: DikeGridDataSourceInput>;
gridProperties: DikeGridProperties;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
ngOnInit(): void {
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
// Assign 1000 entries from the REST API:
this.dkgDataSource = this.sampleData.getEmployees(1000);
// We create our chain of operations implementing the DataSourceDecoratorFn function:
this.dkgDecoratorFn = (dataSource: DikeGridDataSource, dikeGrid: DikeGridComponent): DikeDataSource> => {
// Firstly, point to the given DikeGridDataSource, then add the decorators:
let dikeDecoratorDataSource: DikeDataSource> = dataSource;
// Custom decorator:
dikeDecoratorDataSource = new CustomDecoratorDataSource(dikeDecoratorDataSource);
// Filtering decorator:
dikeDecoratorDataSource = dikeGrid.dataSourceFactory.createFilteringDecorator(dikeDecoratorDataSource);
// Sorting decorator:
dikeDecoratorDataSource = dikeGrid.dataSourceFactory.createSortingDecorator(dikeDecoratorDataSource);
return dikeDecoratorDataSource;
};
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onDataDeliveryIdChange(id: string): void {
console.log(`Data delivery id: ${id}`);
}
onArrayDataSource(): void {
// Create an array of five entries:
this.dkgDataSource = [{
employeeId: '43c8a235-a95d-4e3e-bc30-f31ff33d490d',
firstName: 'Dolores',
lastName: 'Zieme',
gender: 'female',
age: 51,
email: 'dolores.zieme@gmail.com',
hireDate: new Date(2020, 7, 6),
country: 'Mexico'
}, {
employeeId: '0f1bc4f3-f746-489a-9c24-eb570a16e556',
firstName: 'Celia',
lastName: 'Mertz',
gender: 'female',
age: 55,
email: 'celia.mertz@gmail.com',
hireDate: new Date(2010, 5, 11),
country: 'Netherlands'
}, {
employeeId: '88acf950-dee5-480a-a67e-1b0419c9a473',
firstName: 'Jeffery',
lastName: 'Renner',
gender: 'male',
age: 60,
email: 'jeffery.renner@hotmail.com',
hireDate: new Date(2016, 11, 22),
country: 'Bulgaria'
}, {
employeeId: '03a4e13f-98b4-4998-a40b-b66a832f327e',
firstName: 'Annette',
lastName: 'Satterfield',
gender: 'female',
age: 37,
email: 'annette.satterfield@yahoo.com',
hireDate: new Date(2019, 5, 2),
country: 'Germany'
}, {
employeeId: 'a800045a-5127-4a5f-b93f-635f162ad376',
firstName: 'Geraldine',
lastName: 'Weimann',
gender: 'female',
age: 42,
email: 'annette.satterfield@yahoo.com',
hireDate: new Date(2016, 10, 19),
country: 'United States of America'
}] as Partial[];
}
onDikeGridDataSource(): void {
// Create a DikeGridDataSource object:
const gridDataSource = new DikeGridDataSource();
// Take 2000 entries from the REST API:
this.sampleData.getEmployees(2000).subscribe(employees => gridDataSource.entries = employees);
// Assign the new DikeGridDataSource dataSource:
this.dkgDataSource = gridDataSource;
}
onObservableDataSource(): void {
// Take 500 entries from the REST API:
this.dkgDataSource = this.sampleData.getEmployees(500);
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% tab title="custom-datasource-decorator.ts" %}
```typescript
import { map, tap } from 'rxjs/operators';
import { DikeDataSource, DikeDecoratorDataSource,
DikeGridDataRowEntry } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
export class CustomDecoratorDataSource extends DikeDecoratorDataSource {
constructor(
dikeDataSource: DikeDataSource>) {
super(dikeDataSource);
this.setChangeSubscription();
}
protected setChangeSubscription(): void {
// As a wrapper, get the previous result stream:
const dataStream$ = this.dikeDataSource.connect().pipe(
tap(rows => console.log('tap-CustomDecoratorDataSource: ', rows)),
map((rows) => {
rows.forEach((row) => {
let finalEmployeeId = '';
const employeeIdSplit = row.entry.employeeId.split('-');
for (let i=0; i this.data = rows);
}
}
```
{% endtab %}
{% endtabs %}
# Custom DataSource
A custom data source is an instance class that extends from the DataSource abstract class.
We name Custom DataSource when you provide a data source that extends from the `abstract` class `DataSource`.
When the DikeGrid receives this type of data source, it connects to this DataSource and creates an instance of the type `DikeGridDataSource`, wrapping every data entry into a `DikeGridDataRowEntry` row.
Same as In-Memory DataSource, after wrapping operation, the DikeGrid **assigns** and **emits** a **unique id**. It also sets a **unique id** for every **row**.
See the following code snippet:
{% tabs %}
{% tab title="custom-data-source.component.html" %}
```markup
```
{% endtab %}
{% tab title="custom-data-source.component.ts" %}
```typescript
@Component({
selector: 'custom-data-source',
templateUrl: './custom-data-source.component.html',
styleUrls: ['./custom-data-source.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomDataSourceComponent implements OnInit, AfterViewInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
ngAfterViewInit(): void {
// Once the DikeGrid intance is retrieved from the view, we create the DataSource instance:
Promise.resolve().then(() => {
this.dkgDataSource = new CustomDataSource(this.sampleData, this.dikeGrid.filter,
this.dikeGrid.sorting, this.dikeGrid.pagination, this.dikeGrid.waitingIndicator);
});
}
onDataDeliveryIdChange(id: string): void {
console.log(`Data delivery id: ${id}`);
}
}
```
{% endtab %}
{% tab title="custom-datasource.ts" %}
```typescript
import { DataSource } from '@angular/cdk/collections';
import { PageEvent } from '@angular/material/paginator';
import { combineLatest, defer, merge, Observable, Subject, Subscription } from 'rxjs';
import { map, switchMap, tap } from 'rxjs/operators';
import { DikeColumnSortEvent, DikeFilterable, DikeGridFilter, DikeGridPagination,
DikeGridSorting, DikeGridWaitingIndicator
} from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
export class CustomDataSource extends DataSource {
private dataSetSubject: Subject;
private gridSubscription: Subscription = Subscription.EMPTY;
constructor(
private sampleData: SampleData,
private gridFilter: DikeGridFilter,
private gridSorting: DikeGridSorting,
private gridPagination: DikeGridPagination,
private gridIndicator: DikeGridWaitingIndicator) {
super();
this.dataSetSubject = new Subject();
this.setGridEventSubscription();
}
connect(): Observable {
return this.dataSetSubject.asObservable();
}
disconnect(): void {
this.gridSubscription.unsubscribe();
}
private initialized(): Observable {
return defer(() => new Observable((observer) => {
observer.next();
observer.complete();
}));
}
private page(entries: Employee[]): Employee[] {
// If paginator is not displayed, return the original entries:
if (!this.gridPagination.matPaginator) {
return entries;
}
const startIndex = this.gridPagination.matPaginator.pageIndex * this.gridPagination.matPaginator.pageSize;
return entries.slice(startIndex, startIndex + this.gridPagination.matPaginator.pageSize);
}
private setGridEventSubscription(): void {
// Prepare the filter observable:
const gridFiltering$: Observable[]> = merge(
this.gridFilter.filterChange,
this.gridFilter.clearFilterChange,
this.initialized()
).pipe(
map(() => {
const validFilterables: DikeFilterable[] = [ ];
// Get all the valid filterables:
this.gridFilter.filterables.forEach((filterable: DikeFilterable) => {
if (!!filterable.filter && filterable.filter.length > 0) {
validFilterables.push({ ...filterable });
}
});
return validFilterables;
})
);
// Prepare the sorting observable:
const gridSorting$: Observable> = merge(this.gridSorting.sortChange, this.initialized()).pipe(
map(() => this.gridSorting.getCurrentSortable())
);
/**
* Prepare the pagination event:
*
* Since the paginator could be hidden at runtime, we listen the paginatorChange
* observable.
*
* If the paginator is displayed, we listen to the pageChange observable. Otherwise,
* we return a void observable.
*
*/
const gridPaging$: Observable = merge(this.gridPagination.paginatorChange, this.initialized())
.pipe(
switchMap(paginator => !!paginator ? merge(paginator.page, this.initialized()) : this.initialized()
)
);
// Execute the actual REST invocation:
const gridServerData$: Observable = combineLatest([gridFiltering$, gridSorting$]).pipe(
tap(() => this.gridIndicator.loadingIndicator()),
// Cancel the previous invocation and make a new one:
switchMap(([filterables, sorting]) => this.sampleData.searchEmployees(filterables, sorting)),
);
// For the sake of brevity, pagination is done in the client side:
const pagedData$ = combineLatest([gridServerData$, gridPaging$]).pipe(
tap(([entries]) => {
if (!!this.gridPagination.matPaginator && this.gridPagination.matPaginator.length !== entries.length) {
this.gridPagination.matPaginator.length = entries.length;
this.gridPagination.matPaginator.firstPage();
}
}),
map(([entries]) => this.page(entries))
);
this.gridSubscription.unsubscribe();
this.gridSubscription = pagedData$.pipe(
// Once the data set arrives, we hide the loading indicator:
tap(() => this.gridIndicator.hideWaitingIndicator())
).subscribe(entries => this.dataSetSubject.next(entries));
}
}
```
{% endtab %}
{% tab title="sample-data.service.ts" %}
```typescript
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { delay } from 'rxjs/operators';
import { DikeFilterable, DikeColumnSortEvent } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
@Injectable({
providedIn: 'root'
})
export class SampleData {
constructor(
private httpClient: HttpClient) { }
getEmployees(sampleSize: number): Observable {
return this.httpClient.get('api/common/employees', { params: { sampleSize } }).pipe(delay(350));
}
searchEmployees(filterables: DikeFilterable[], sortedColumn: DikeColumnSortEvent): Observable {
return this.httpClient.post('api/common/employees', { filterables, sortedColumn }).pipe(delay(350));
}
}
```
{% endtab %}
{% endtabs %}
1. After querying the DikeGrid instance from the component's view, we create a `CustomDataSource` object passing in all the dependencies to implement the logic for this data source.
2. We obtain the data from a **REST API**. This API is a mock service that runs in memory. That is why we delay every invocation **350** milliseconds.
3. The **REST API** receives the **filtering** and **sorting** event data to process them behind the REST API.
4. For the sake of brevity, we execute the pagination operation in the client after receiving the response from the **REST API**.
{% hint style="warning" %}
Be aware that the DikeGrid will **wrap** every response from the REST API assigning **new ids** for every row and a **unique id** for the whole data set. The DikeGrid also **resets** the **edition** and **selection** operations. It means that the DikeGrid removes the history of changes and deselects rows.
{% endhint %}
## DataSource decorators
Once you assign your custom data source to the DikeGrid instance, it connects to that data source.
See the following diagram:
{% hint style="success" %}
The `DikeGridDataSource` wraps every data entry into a row of the type `DikeGridDataRowEntry`.
{% endhint %}
If you have allowed the **edition** operation, the DikeGrid creates the following decorators:
| | |
| ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `DikeRefreshingDataSource` | This decorator always wraps a `DikeGridDataSource` instance. It pushes the rows when the user has **updated** them. |
| `DikeEditionStateDataSource` | It splits the set of rows depending on their status, `Modified`, `Deleted`, or `Editing`. |
| `DikeEditionFilteringDataSource` | This decorator manages all the filtering operations over the edited rows. |
{% hint style="info" %}
The DikeGrid creates the edition decorators only if you allow edition because the DikeGrid manages all the edition operations in memory.
{% endhint %}
{% hint style="warning" %}
You can not assign **custom decorators** when you provide a **Custom DataSource**.
{% endhint %}
{% hint style="warning" %}
**Row grouping** operation is **not allowed** when you provide a **Custom DataSource**.
{% endhint %}
## Summary
You can provide a custom data source to the DikeGrid. For example, a custom data source could take remote data entries.
The DikeGrid manages the edition operation by adding the corresponding decorators.
Be aware that you can not group rows or assign custom decorators.
### Complete code for this section
{% tabs %}
{% tab title="custom-data-source.component.html" %}
```markup
```
{% endtab %}
{% tab title="custom-data-source.component.ts" %}
```typescript
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { DikeFilterable, DikeGridComponent, DikeGridDataRowEntry, DikeGridDataSourceInput } from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { CustomDataSource } from 'app/modules/admin/datasource/custom-data-source/custom-datasource';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'custom-data-source',
templateUrl: './custom-data-source.component.html',
styleUrls: ['./custom-data-source.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomDataSourceComponent implements OnInit, AfterViewInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
ngOnInit(): void {
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngAfterViewInit(): void {
// Once the DikeGrid intance is retrieved from the view, we create the DataSource instance:
Promise.resolve().then(() => {
this.dkgDataSource = new CustomDataSource(this.sampleData, this.dikeGrid.filter,
this.dikeGrid.sorting, this.dikeGrid.pagination, this.dikeGrid.waitingIndicator);
});
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onDataDeliveryIdChange(id: string): void {
console.log(`Data delivery id: ${id}`);
}
onFilterChange(filterable: DikeFilterable): void {
console.log('onFilterChange => ', filterable);
}
onEditionFilterChange(filterable: DikeFilterable): void {
console.log('onEditionFilterChange => ', filterable);
}
onSelectionChange(rows: DikeGridDataRowEntry[]): void {
console.log('Selection change: ', rows);
}
onEditionRowChange(row: DikeGridDataRowEntry): void {
console.log('Edition row change: ', row);
}
onUpdateRowChange(rows: DikeGridDataRowEntry | DikeGridDataRowEntry[]): void {
console.log('Update row(s) change: ', rows);
}
onCancelRowEditionChange(rows: DikeGridDataRowEntry | DikeGridDataRowEntry[]): void {
console.log('Cancel row(s) edition change: ', rows);
}
onRemoveRowChange(rows: DikeGridDataRowEntry | DikeGridDataRowEntry[]): void {
console.log('Remove row(s) change: ', rows);
}
onRestoreRowChange(rows: DikeGridDataRowEntry | DikeGridDataRowEntry[]): void {
console.log('Restore row(s) change: ', rows);
}
onClearFilter(): void {
console.log('Clear Filter => ', this.dikeGrid.filter.clearFilter());
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% tab title="custom-datasource.ts" %}
```typescript
import { DataSource } from '@angular/cdk/collections';
import { PageEvent } from '@angular/material/paginator';
import { combineLatest, defer, merge, Observable, Subject, Subscription } from 'rxjs';
import { map, switchMap, tap } from 'rxjs/operators';
import { DikeColumnSortEvent, DikeFilterable, DikeGridFilter, DikeGridPagination,
DikeGridSorting, DikeGridWaitingIndicator
} from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
export class CustomDataSource extends DataSource {
private dataSetSubject: Subject;
private gridSubscription: Subscription = Subscription.EMPTY;
constructor(
private sampleData: SampleData,
private gridFilter: DikeGridFilter,
private gridSorting: DikeGridSorting,
private gridPagination: DikeGridPagination,
private gridIndicator: DikeGridWaitingIndicator) {
super();
this.dataSetSubject = new Subject();
this.setGridEventSubscription();
}
connect(): Observable {
return this.dataSetSubject.asObservable();
}
disconnect(): void {
this.gridSubscription.unsubscribe();
}
private initialized(): Observable {
return defer(() => new Observable((observer) => {
observer.next();
observer.complete();
}));
}
private page(entries: Employee[]): Employee[] {
// If paginator is not displayed, return the original entries:
if (!this.gridPagination.matPaginator) {
return entries;
}
const startIndex = this.gridPagination.matPaginator.pageIndex * this.gridPagination.matPaginator.pageSize;
return entries.slice(startIndex, startIndex + this.gridPagination.matPaginator.pageSize);
}
private setGridEventSubscription(): void {
// Prepare the filter observable:
const gridFiltering$: Observable[]> = merge(
this.gridFilter.filterChange,
this.gridFilter.clearFilterChange,
this.initialized()
).pipe(
map(() => {
const validFilterables: DikeFilterable[] = [ ];
// Get all the valid filterables:
this.gridFilter.filterables.forEach((filterable: DikeFilterable) => {
if (!!filterable.filter && filterable.filter.length > 0) {
validFilterables.push({ ...filterable });
}
});
return validFilterables;
})
);
// Prepare the sorting observable:
const gridSorting$: Observable> = merge(this.gridSorting.sortChange, this.initialized()).pipe(
map(() => this.gridSorting.getCurrentSortable())
);
/**
* Prepare the pagination event:
*
* Since the paginator could be hidden at runtime, we listen the paginatorChange
* observable.
*
* If the paginator is displayed, we listen to the pageChange observable. Otherwise,
* we return a void observable.
*
*/
const gridPaging$: Observable = merge(this.gridPagination.paginatorChange, this.initialized())
.pipe(
switchMap(paginator => !!paginator ? merge(paginator.page, this.initialized()) : this.initialized()
)
);
// Execute the actual REST invocation:
const gridServerData$: Observable = combineLatest([gridFiltering$, gridSorting$]).pipe(
tap(() => this.gridIndicator.loadingIndicator()),
// Cancel the previous invocation and make a new one:
switchMap(([filterables, sorting]) => this.sampleData.searchEmployees(filterables, sorting)),
);
// For the sake of brevity, pagination is done in the client side:
const pagedData$ = combineLatest([gridServerData$, gridPaging$]).pipe(
tap(([entries]) => {
if (!!this.gridPagination.matPaginator && this.gridPagination.matPaginator.length !== entries.length) {
this.gridPagination.matPaginator.length = entries.length;
this.gridPagination.matPaginator.firstPage();
}
}),
map(([entries]) => this.page(entries))
);
this.gridSubscription.unsubscribe();
this.gridSubscription = pagedData$.pipe(
// Once the data set arrives, we hide the loading indicator:
tap(() => this.gridIndicator.hideWaitingIndicator())
).subscribe(entries => this.dataSetSubject.next(entries));
}
}
```
{% endtab %}
{% tab title="sample-data.service.ts" %}
```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { delay } from 'rxjs/operators';
import { DikeFilterable, DikeColumnSortEvent } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
@Injectable({
providedIn: 'root'
})
export class SampleData {
constructor(
private httpClient: HttpClient) { }
getEmployees(sampleSize: number): Observable {
return this.httpClient.get('api/common/employees', { params: { sampleSize } }).pipe(delay(350));
}
searchEmployees(filterables: DikeFilterable[], sortedColumn: DikeColumnSortEvent): Observable {
return this.httpClient.post('api/common/employees', { filterables, sortedColumn }).pipe(delay(350));
}
}
```
{% endtab %}
{% endtabs %}
# Theming
This section describes how to use your themes or use a pre-built one.
## Live example
{% hint style="success" %}
[Theming](https://demos.dikesoft.com/dk-grid/theming) live example.
{% endhint %}
## DikeGrid theming
The DikeGrid bases its theming process on the Angular Material's theming system. Therefore, DikeGrid exposes `color`, `typography`, and `theme` mixins.
{% hint style="success" %}
See the official docs for further details on [Angular Material's theming system](https://material.angular.io/guide/theming-your-components).
{% endhint %}
You have to define your theme and include DikeGrid's mixins and Angular Material's mixins in your application.
## Defining a theme
You have to create your primary and accent palettes with an optional warm palette when defining a theme. Once you have the palettes, you can create a **light** or a **dark** theme.
{% hint style="success" %}
See the official docs on [Theming Angular Material](https://material.angular.io/guide/theming).
{% endhint %}
Let us create a theme:
```scss
@use "@angular/material" as mat;
@use "@dikesoft/angular-data-grid" as dkg;
// The core mixin must be included exactly once for your application:
@include mat.core();
// The "warn" palette is optional:
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// You can define a dark theme as well:
$theme: mat.define-light-theme((
color: (
primary: $primary,
accent: $accent
)
));
// Emit styles for all Angular components:
@include mat.all-component-themes($theme);
// Emit style for the DikeGrid component:
@include dkg.theme($theme);
```
### Customizing typography
You can also provide your typography specifications when defining a theme.
```scss
@use "@angular/material" as mat;
@use "@dikesoft/angular-data-grid" as dkg;
// The core mixin must be included exactly once for your application:
@include mat.core();
// Define a custom typography:
$custom-typography: mat.define-typography-config(
$font-family: Open Sans,
$title: mat.define-typography-level(1.25rem, 2rem, 600),
$body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
$button: mat.define-typography-level(0.875rem, 0.875rem, 500),
$input: mat.define-typography-level(0.875rem, 1, 400)
);
// The "warn" palette is optional:
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// You can define a dark theme as well:
$theme: mat.define-light-theme((
color: (
primary: $primary,
accent: $accent
),
typography: $custom-typography
));
// Emit styles for all Angular components:
@include mat.all-component-themes($theme);
// Emit style for the DikeGrid component:
@include dkg.theme($theme);
```
{% hint style="success" %}
See the official doc for [customizing typography](https://material.angular.io/guide/typography).
{% endhint %}
## Using a pre-built theme
DikeGrid includes four pre-built themes CSS files. Each of them uses the same palettes as Angular Material pre-built themes.
Theme
Scheme
Palettes
deeppurple-amber.css
Light
deep-purple, amber, red
indigo-pink.css
Light
indigo, pink, red
pink-bluegrey.css
Dark
pink, bluegrey, red
purple-green.css
Dark
purple, green, red
You can add the DikeGrid styles in two ways: **importing the CSS file** directly in the `styles.scss` file or adding the entry in the **styles array** from the `angular.json` file.
### Importing the CSS file
Open the `styles.scss` file and add the following line:
```scss
@import "@dikesoft/angular-data-grid/prebuilt-themes/indigo-pink.css";
```
### Adding the CSS file to the styles array
{% code title="angular.json" %}
```json
"styles": [
"node_modules/@dikesoft/angular-data-grid/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
]
```
{% endcode %}
## Custom scrollbars
As you notice, all the live examples show **thin** and **colored** scrollbars.
By default, the DikeGrid applies styles to its scrollbars.
You can unset this scrollbar customization by providing a `false` value through an Injection Token called `CUSTOM_SCROLLBARS`.
Let us provide the `CUSTOM_SCROLLBARS` Injection Token:
{% code title="theming.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { DikeDataGridModule, CUSTOM_SCROLLBARS } from '@dikesoft/angular-data-grid';
import { SharedModule } from 'app/shared/shared.module';
import { themingRoutes } from 'app/modules/admin/theming/theming.routing';
import { GridThemingComponent } from './grid-theming/grid-theming.component';
@NgModule({
declarations: [
GridThemingComponent
],
imports: [
CommonModule,
RouterModule.forChild(themingRoutes),
SharedModule,
DikeDataGridModule
],
providers: [
{ provide: CUSTOM_SCROLLBARS, useValue: false }
]
})
export class ThemingModule { }
```
{% endcode %}
When providing the mentioned Injection Token, the DikeGrid shows the default scrollbars.
## Summary
Since the DikeGrid bases its theming process on the Angular Material's theming system is very easy to customize your DikeGrid instances because you are familiar with that process.
{% tabs %}
{% tab title="grid-theming.component.html" %}
```markup
```
{% endtab %}
{% tab title="grid-theming.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { DikeGridDataSourceInput } from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
@Component({
selector: 'grid-theming',
templateUrl: './grid-theming.component.html',
styleUrls: ['./grid-theming.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridThemingComponent implements OnInit, OnDestroy {
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
ngOnInit(): void {
// Get 1000 entries from the REST API:
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% tab title="theming.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { DikeDataGridModule, CUSTOM_SCROLLBARS } from '@dikesoft/angular-data-grid';
import { SharedModule } from 'app/shared/shared.module';
import { themingRoutes } from 'app/modules/admin/theming/theming.routing';
import { GridThemingComponent } from './grid-theming/grid-theming.component';
@NgModule({
declarations: [
GridThemingComponent
],
imports: [
CommonModule,
RouterModule.forChild(themingRoutes),
SharedModule,
DikeDataGridModule
],
providers: [
{ provide: CUSTOM_SCROLLBARS, useValue: false }
]
})
export class ThemingModule { }
```
{% endtab %}
{% endtabs %}
# Column Definitions
This section describes how to create columns in the component's HTML definition or in the TypeScript class file.
## Live example
{% hint style="success" %}
[Column Definitions](https://demos.dikesoft.com/dk-grid/column/definitions) live example.
{% endhint %}
## HTML definition
A column could be created in the HTML definition directly. Use the `dike-grid-column` selector just beneath the `dike-grid` selector.
In the following example three columns were defined using the [`DikeGridColumnComponent`](/reference/components/dkgridcolumncomponent#component-metadata) selector:
{% code title="column-definitions.component.html" %}
```markup
```
{% endcode %}
As it was mentioned in the [Quick Start Tutorial](/getting-started/quick-start-tutorial#column-definitions), the minimum number of properties to define a column are `fieldName`, `headerText` and `dataType`.
{% hint style="info" %}
For a complete list of column properties, see the [`DikeGridColumnComponent`](/reference/components/dkgridcolumncomponent#properties) definition.
{% endhint %}
## TypeScript code definition
It is also possible to define a column in the TypeScript's component file.
### DikeGrid Column API
In order to define a column in the TypeScript's component file, you must grab the corresponding **column API** of type `DikeGridColumnDef` from the `DikeGridComponent` instance you are defining columns.
There are two ways of grabbing this instance:
#### Querying the `DikeGridComponent` from the View
Every `DikeGridComponent` instance has its own `DikeGridColumnDef` instance. The instance is exposed as a public property called `columnDef`.
{% hint style="info" %}
See the [`DikeGridComponent`](/reference/components/dkgridcomponent) definition for a complete list of properties.
{% endhint %}
The following code snippet shows how the `DikeGridComponent` is retrieved and then, how **Gender** and **Age** columns are added using the column API.
{% tabs %}
{% tab title="column-definitions.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-definitions.component.ts" %}
```typescript
import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { DikeGridComponent, DikeGridDataSourceInput,
DikeBinaryColumnDef, DikeNumericColumnDef
} from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-definitions',
templateUrl: './column-definitions.component.html',
styleUrls: ['./column-definitions.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnDefinitionsComponent implements OnInit, AfterViewInit {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
constructor(
private sampleData: SampleData) { }
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
}
ngAfterViewInit(): void {
// The DikeGridComponent instance is available:
Promise.resolve().then(() => {
// Define the Gender column:
const genderColumn = new DikeBinaryColumnDef('gender', 'Gender');
genderColumn.width = 110;
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.width = 85;
// Finally, add them to the DikeGridComponent instance:
this.dikeGrid.columnDef.addColumns([ genderColumn, ageColumn ]);
});
}
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Mixed Column Definition**. Notice how three columns are defined in the HTML and the others are defined in code.
{% endhint %}
#### Retrieving the `DikeGridColumnDef` instance
The `DikeGridColumnDef` instance could be retrieved listening to the event called `gridColumnDefInstance` from the `DikeGridComponent`.
{% tabs %}
{% tab title="column-definitions.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-definitions.component.ts" %}
```typescript
import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { DikeGridComponent, DikeGridDataSourceInput, DikeBinaryColumnDef,
DikeNumericColumnDef, DikeGridColumnDef, DikeTextColumnDef, DikeDateColumnDef
} from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-definitions',
templateUrl: './column-definitions.component.html',
styleUrls: ['./column-definitions.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnDefinitionsComponent implements OnInit, AfterViewInit {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
constructor(
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns([ emailColumn, hireDateColumn ]);
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
}
ngAfterViewInit(): void {
// The DikeGridComponent instance is available:
Promise.resolve().then(() => {
// Define the Gender column:
const genderColumn = new DikeBinaryColumnDef('gender', 'Gender');
genderColumn.width = 110;
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.width = 85;
// Finally, add them to the DikeGridComponent instance:
this.dikeGrid.columnDef.addColumns([ genderColumn, ageColumn ]);
});
}
}
```
{% endtab %}
{% endtabs %}
As you can see in the previous code snippet, the `gridColumnDefInstance` is attached to the `onColumnDefInstance()` method. In the method definition, two more columns were added: **Email** and **Hire Date**.
{% hint style="info" %}
The `gridColumnDefInstance` event is emitted after the `ngOnInit()` lifecycle hook of the `DikeGridComponent` component.
{% endhint %}
The following screenshot shows the output after adding the columns:
By default, columns show a **context menu**. You can suppress this context menu for a specific column, all columns in a DikeGrid definition, or all DikeGrid instances.
{% hint style="success" %}
See the [Column Context Menu](/fundamentals/grid-structure/column-context-menu#suppress-the-column-context-menu) section for details.
{% endhint %}
## Columns Order
Every column definition has an order property. If this property is not specified, the order of the columns depends on at which moment the columns are defined.
The following table shows the execution order the column definitions take place:
| Column Definition | |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `gridColumnDefInstance` event listener | As it was told, this event is emitted after the `ngOnInit()` lifecycle hook of the `DikeGridComponent` component. |
| HTML definition | These columns are added in the `ngAfterContentInit()` lifecycle hook of the `DikeGridComponent` component. |
| `DikeGridComponent` instance queried from the view. | These columns are added in the `ngAfterViewInit()` lifecycle hook of the component that has the `DikeGridComponent` definition. |
{% hint style="info" %}
In every **Column Definition** execution, the columns are added in the order they are defined unless the order property is set.
{% endhint %}
### Specifying the order of the columns
Let's say we want the following order:
1. Employee Id
2. Surname
3. Name
4. Gender
5. Age
6. Email
7. Hire Date
After setting the order property, the output will be the following:
## Column types
Th DikeGrid Library defines four column types through a union type called `DikeColumnDataType`.
Depending on which type the column is, there is a default alignment used to display the content of the rows.
| DikeColumnDataType | Inner Type / Default alignment | Class Definition |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| `Text` |
It holds data of type string. Default alignment start.
| Instance of type `DikeTextColumnDef`. |
| `Numeric` |
It holds data of type number. Default alignment end.
| Instance of type `DikeNumericColumnDef`. |
| `Date` |
It hold data of type string, number, Date. Default alignment center.
| Instance of type `DikeDateColumnDef`. |
| `Binary` |
It holds data of type string, number, boolean. Default alignment center.
| Instance of type `DikeBinaryColumnDef`. |
{% hint style="info" %}
Content alignment comes from a union type called `ColumnAlignment`. This alignment could be set overwriting the default value.
{% endhint %}
When a column is defined via templating, the type must be provided through the `dataType` input property. If the column is defined in code, the corresponding class instance must be created.
## Retrieving and Updating a field value
By default, every column defines functions for getting or setting its field value. For instance, consider a `Numeric` column, its default getter function is:
```typescript
getValue: GetterFn = (entry: T): number => {
return ((entry as { [key in keyof T]: T[key] })[this.fieldName]) as number;
};
```
And its default setter function is:
```typescript
setValue: SetterFn = (entry: T, value: number): void => {
(entry as { [key in keyof T]: T[key] })[this.fieldName] = value;
};
```
These functions are of type `GetterFn` and `SetterFn` respectively. These default functions treat the received object of type `T` as a simple object, which means an object without any nested object.
Let's define the getter function for the `Employee` interface to retrieve the sales for March month.
```typescript
// Define the March Sales column:
const marchSales = new DikeNumericColumnDef('marchSales', 'March Sales');
marchSales.width = 150;
marchSales.getValue = (entry: Employee): number => entry.sales.monthlySales['March'];
```
The result of adding the column **March Sales** is shown in the following image:
As you can see, the `marchSales` field was defined but it does not exist. There is no `marchSales` field in the `Employee` interface, the value is in a nested object. Therefore, it is mandatory to define the getter function that retrieves the desired value.
If the column were **editable**, the corresponding setter function looks like the following:
```typescript
marchSales.setValue = (entry: Employee, value: number): void => {
entry.sales.monthlySales['March'] = value;
};
```
## Templates for displaying field values
Every column has a default template for displaying its field value. This template depends on the column type because depending on the type the corresponding Angular Pipe is applied.
### Text and Binary columns
```markup
{{ value }}
{{ value }}
```
As you can see, for `Text` and `Binary` columns no Angular Pipes are applied.
### Numeric and Date columns
```markup
{{ value | number }}
{{ value | date:'shortDate' }}
```
{% hint style="info" %}
To see more on [Angular pipes](https://angular.io/guide/pipes) visit the official docs.
{% endhint %}
### Custom templates
You can define your own templates. If you notice when defining a template you always have available the **row entry** and the **field value**. Let's define custom templates for **Surname**, **Name**, **Gender**, **Hire Date,** and **March Sales**.
#### Surname and Name templates
The `uppercase` Angular Pipe for **Surname** and **Name** column templates was added. These templates are bound in the HTML definition.
{% code title="column-definitions.component.html" %}
```markup
{{ value | uppercase }}
{{ value | uppercase }}
```
{% endcode %}
Both templates are assigned to the input property called `displayTemplate`.
#### Gender template
See the following code snippet for the **Gender** column template definition:
{% tabs %}
{% tab title="column-definitions.component.html" %}
```markup
{{ value }}
```
{% endtab %}
{% tab title="column-definitions.component.ts" %}
```typescript
@Component({
selector: 'column-definitions',
templateUrl: './column-definitions.component.html',
styleUrls: ['./column-definitions.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnDefinitionsComponent implements OnInit, AfterViewInit {
// Retrieve the corresponding template:
@ViewChild('gender', { read: TemplateRef }) genderTpl: TemplateRef;
constructor(
private sampleData: SampleData) { }
ngAfterViewInit(): void {
// The DikeGridComponent instance is available:
Promise.resolve().then(() => {
// Define the Gender column:
const genderColumn = new DikeBinaryColumnDef('gender', 'Gender');
genderColumn.width = 110;
genderColumn.order = 4;
// Since genderTpl is available in this life cycle hook, just assign the template:
genderColumn.displayTemplate = this.genderTpl;
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.width = 85;
ageColumn.order = 5;
// Finally, add them to the DikeGridComponent instance:
this.dikeGrid.columnDef.addColumns([ genderColumn, ageColumn ]);
});
}
}
```
{% endtab %}
{% endtabs %}
As you can see the **Gender** column template is retrieved querying the component's view. Remember that queried elements are set before the `ngAfterViewInit` life cycle hook, and the **Gender** column is defined in the `ngAfterViewInit` life cycle hook, the **Gender** column template is assigned to its corresponding column property.
#### Hire Date and March Sales column templates
In the following code snippet is shown the column templates definitions:
{% tabs %}
{% tab title="column-definitions.component.html" %}
```markup
{{ value | date:'fullDate' }}
{{ value | currency }}
```
{% endtab %}
{% tab title="column-definitions.component.ts" %}
```typescript
@Component({
selector: 'column-definitions',
templateUrl: './column-definitions.component.html',
styleUrls: ['./column-definitions.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnDefinitionsComponent implements OnInit, AfterViewInit {
// Retrieve the corresponding template:
@ViewChild('hireDate', { read: TemplateRef }) hireDateTpl: TemplateRef;
@ViewChild('marchSales', { read: TemplateRef }) marchSalesTpl: TemplateRef;
constructor(
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
emailColumn.order = 6;
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
hireDateColumn.order = 7;
hireDateColumn.width = 215;
hireDateColumn.displayTemplate = from(Promise.resolve().then(() => this.hireDateTpl));
// Define the March Sales column:
const marchSales = new DikeNumericColumnDef('marchSales', 'March Sales');
marchSales.order = 8;
marchSales.width = 150;
marchSales.getValue = (entry: Employee): number => entry.sales.monthlySales['March'];
/**
* Since Hire Date and March Sales columns are defined before the templates are ready
* and available, an Observable is assigned waiting for the template availability.
*/
marchSales.displayTemplate = from(Promise.resolve().then(() => this.marchSalesTpl));
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns([ emailColumn, hireDateColumn, marchSales ]);
}
}
```
{% endtab %}
{% endtabs %}
For **Hire Date** and **March Sales** column templates, the `date` and `currency` Angular Pipes are used respectively.
For these columns, an **Observable** is assigned to `displayTemplate` column property because both columns are defined in the `gridColumnDefInstance` event callback. Column templates will be available until the `ngAfterViewInit` hook and, remember that the `gridColumnDefInstance` event is emitted just after the **DikeGridComponent's** `ngOnInit` hook.
The following screenshot shows the output after defining the custom templates.
## Column Identifiers
All column identifiers are **UUIDs** and are used internally. If the user assigns them when defining columns, these are ignored.
The column identifiers are `columnId`, `slotId` and `belongToGroup` properties.
## Summary
In this section, the main building blocks were covered. Columns are the main part for displaying data through a DikeGrid instance.
### Complete code for this section
{% tabs %}
{% tab title="column-definitions.component.html" %}
```markup
{{ value | uppercase }}
{{ value | uppercase }}
{{ value }}
{{ value | date:'fullDate' }}
{{ value | currency }}
```
{% endtab %}
{% tab title="column-definitions.component.ts" %}
```typescript
import { AfterViewInit, Component, OnInit, ViewChild, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { from } from 'rxjs';
import { DikeGridComponent, DikeGridDataSourceInput, DikeBinaryColumnDef,
DikeNumericColumnDef, DikeGridColumnDef, DikeTextColumnDef, DikeDateColumnDef
} from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-definitions',
templateUrl: './column-definitions.component.html',
styleUrls: ['./column-definitions.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnDefinitionsComponent implements OnInit, AfterViewInit {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
// Retrieve the corresponding template:
@ViewChild('gender', { read: TemplateRef }) genderTpl: TemplateRef;
@ViewChild('hireDate', { read: TemplateRef }) hireDateTpl: TemplateRef;
@ViewChild('marchSales', { read: TemplateRef }) marchSalesTpl: TemplateRef;
dkgDataSource: DikeGridDataSourceInput;
constructor(
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
emailColumn.order = 6;
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
hireDateColumn.order = 7;
hireDateColumn.width = 215;
hireDateColumn.displayTemplate = from(Promise.resolve().then(() => this.hireDateTpl));
// Define the March Sales column:
const marchSales = new DikeNumericColumnDef('marchSales', 'March Sales');
marchSales.order = 8;
marchSales.width = 150;
marchSales.getValue = (entry: Employee): number => entry.sales.monthlySales['March'];
/**
* Since Hire Date and March Sales columns are defined before the templates are ready
* and available, an Observable is assigned waiting for the template availability.
*/
marchSales.displayTemplate = from(Promise.resolve().then(() => this.marchSalesTpl));
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns([ emailColumn, hireDateColumn, marchSales ]);
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
}
ngAfterViewInit(): void {
// The DikeGridComponent instance is available:
Promise.resolve().then(() => {
// Define the Gender column:
const genderColumn = new DikeBinaryColumnDef('gender', 'Gender');
genderColumn.width = 110;
genderColumn.order = 4;
// Since genderTpl is available in this life cycle hook, just assign the template:
genderColumn.displayTemplate = this.genderTpl;
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.width = 85;
ageColumn.order = 5;
// Finally, add them to the DikeGridComponent instance:
this.dikeGrid.columnDef.addColumns([ genderColumn, ageColumn ]);
});
}
}
```
{% endtab %}
{% endtabs %}
# Column Grouping
This section describes creating column groups in the component's HTML definition or the TypeScript class file.
## Live example
{% hint style="success" %}
[Column Grouping](https://demos.dikesoft.com/dk-grid/column/grouping) live example.
{% endhint %}
## Groups Definition
To create a column group, you nest a column definition under another column definition. You can nest column definitions as many as you need.
Let us define the following column groups:
1. Firstly, We have two main groups: **Personal Info** and **Employee Info** column groups.
2. Under the **Personal Info** group, we have the **Complete Name** column group, the **Gender** and **Age** columns.
3. Under the **Complete Name** column group, we have **Name** and **Surname** columns.
4. Lastly, under the **Employee Info**, we have the **Employee Id**, **Email**, and **Hire Date** columns.
In code, we have:
{% tabs %}
{% tab title="column-grouping.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-grouping.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { DikeDateColumnDef, DikeGridColumnDef,
DikeGridDataSourceInput, DikeTextColumnDef, DikeGroupColumnDef
} from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
@Component({
selector: 'column-grouping',
templateUrl: './column-grouping.component.html',
styleUrls: ['./column-grouping.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnGroupingComponent implements OnInit, OnDestroy {
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 250;
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
hireDateColumn.width = 120;
// Define the Employee Id column:
const employeeIdColumn = new DikeTextColumnDef('employeeId', 'Employee Id');
employeeIdColumn.width = 350;
// Lastly, define the Employee Info column group:
const employeeInfo = new DikeGroupColumnDef('employeeInfoGroup', 'Employee Info');
employeeInfo.order = 2;
// Add columns to the column group:
employeeInfo.children = [ employeeIdColumn, emailColumn, hireDateColumn ];
// Then, add the colum group to the DikeGridComponent instance:
columnDef.addColumns(employeeInfo);
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
As you can see in the previous definition, we create the column groups in the **HTML definition** and **TypeScript code**, as we define any column.
You must not provide the `dataType` property because column groups can hold any number of columns, even column groups.
{% hint style="danger" %}
Be aware when you create a column group in the TypeScritpt code, the children property is null.
{% endhint %}
## Group Status
Any group could be ***open*** or ***closed***. The property `displayStatus` stores the group status.
If you want a group could open or close, its child columns must tell the grid which columns are visible in closed status.
Let us define another column under the **Employee Info** group. This column will be visible when the **Employee Info** column group is closed, displaying the **Total Sales**.
{% tabs %}
{% tab title="column-grouping.component.html" %}
```markup
...
{{ value | currency }}
```
{% endtab %}
{% tab title="column-grouping.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Total Sales column:
const totalSalesColumn = new DikeNumericColumnDef('totalSales', 'Total Sales');
totalSalesColumn.width = 150;
totalSalesColumn.displayTemplate = from(Promise.resolve().then(() => this.totalSalesTpl));
totalSalesColumn.displayOn = 'closed';
// Lastly, define the Employee Info group:
const employeeInfo = new DikeGroupColumnDef('employeeInfoGroup', 'Employee Info');
employeeInfo.order = 2;
// Add columns to the column group:
employeeInfo.children = [ employeeIdColumn, emailColumn, hireDateColumn, totalSalesColumn ];
// Then, add the colum group to the DikeGridComponent instance:
columnDef.addColumns(employeeInfo);
}
```
{% endtab %}
{% endtabs %}
In the previous code, we have defined the following:
1. Firstly, we determined the template for displaying the total sales field.
2. Then, we create the actual column definition for **Total Sales**. The `displayOn` property is equal to **closed**, meaning that the user will see this value when the **Employee Info** group is closed.
{% hint style="info" %}
The groups that can open or close will have a **right** or **left** arrow, indicating that they can change their status.
{% endhint %}
{% hint style="info" %}
If you do not specify the `displayOn` property, the default value will be ***open***.
{% endhint %}
### Initial Group Status
By default, the initial status of a group is ***open***. However, you can change this value by providing the ***closed*** value to the `displayStatus` property.
Let us change the initial status for the **Employee Info** group to a closed value.
{% code title="column-grouping.component.ts" %}
```typescript
// Lastly, define the Employee Info group:
const employeeInfo = new DikeGroupColumnDef('employeeInfoGroup', 'Employee Info');
employeeInfo.order = 2;
employeeInfo.displayStatus = 'closed';
```
{% endcode %}
When you launch the HTML containing the DikeGrid definition, the **Employee Info** group will appear closed.
{% hint style="warning" %}
If you set a group as ***closed*** and none of the child columns has the `displayOn` property to a ***closed*** value, the group status will be ***open***.
If you set a group as ***open*** and all the child columns have the `displayOn` property to a ***closed*** value, the group status will be ***open***.
{% endhint %}
### Group Status Event
When a column group changes its status, the DikeGrid instance emits an event. The name of the event is `columnGroupStatusChange`.
Let us listen to this group status event from the DikeGrid instance directly.
{% tabs %}
{% tab title="column-grouping.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-grouping.component.ts" %}
```typescript
onColumnGroupStatusChange(columnGroup: DikeGroupColumnDef): void {
console.log('onColumnGroupStatusChange: ', columnGroup);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
You can listen to this event from the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef) service through the `columnGroupStatusChange` property.
{% endhint %}
Open the **Personal Info** group and see the event information in the **dev console**.
## Column Chooser Menu
When you navigate to the **Column Chooser Menu** and open the **Employee Info** group, you will see a circle with an **accent** color next to the **Total Sales** column.
The circle next to the **Total Sales** column indicates that the column is visible when the parent group is ***closed***.
## Summary
In this section, we explored column groups creation and its status. Then, we listen to the event sent when this status has changed and spot a column displayed in a closed position.
### Complete code for this section
{% tabs %}
{% tab title="column-grouping.component.html" %}
```markup
{{ value | currency }}
```
{% endtab %}
{% tab title="column-grouping.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { from, Subscription } from 'rxjs';
import { DikeDateColumnDef, DikeGridColumnDef,
DikeGridDataSourceInput, DikeTextColumnDef, DikeGroupColumnDef, DikeNumericColumnDef
} from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
@Component({
selector: 'column-grouping',
templateUrl: './column-grouping.component.html',
styleUrls: ['./column-grouping.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnGroupingComponent implements OnInit, OnDestroy {
// Retrieve the corresponding templates:
@ViewChild('totalSales', { read: TemplateRef }) totalSalesTpl: TemplateRef;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 250;
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
hireDateColumn.width = 120;
// Define the Employee Id column:
const employeeIdColumn = new DikeTextColumnDef('employeeId', 'Employee Id');
employeeIdColumn.width = 350;
// Define the Total Sales column:
const totalSalesColumn = new DikeNumericColumnDef('totalSales', 'Total Sales');
totalSalesColumn.width = 150;
totalSalesColumn.displayTemplate = from(Promise.resolve().then(() => this.totalSalesTpl));
totalSalesColumn.displayOn = 'closed';
// Lastly, define the Employee Info group:
const employeeInfo = new DikeGroupColumnDef('employeeInfoGroup', 'Employee Info');
employeeInfo.order = 2;
employeeInfo.displayStatus = 'closed';
// Add columns to the column group:
employeeInfo.children = [ employeeIdColumn, emailColumn, hireDateColumn, totalSalesColumn ];
// Then, add the colum group to the DikeGridComponent instance:
columnDef.addColumns(employeeInfo);
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onColumnGroupStatusChange(columnGroup: DikeGroupColumnDef): void {
console.log('onColumnGroupStatusChange: ', columnGroup);
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Column Sizing
After setting the initial column size, this section describes how to change the column width dynamically.
## Live example
{% hint style="success" %}
[Column Sizing](https://demos.dikesoft.com/dk-grid/column/sizing) live example.
{% endhint %}
## Column width
When you define a column, this column will have an initial value for the `width` property.
{% hint style="info" %}
If `width` property is not defined, the **default** value will be **200**. The with's unit is **pixels**.
{% endhint %}
## Changing the column width through the UI
### Minimum and Maximum column width
If you want to change the width of a column, you must provide the `minWidth` and `maxWidth` properties.
{% hint style="info" %}
If you do not provide the `minWidth` and `maxWidth` properties, they will take the value of the `width` property.
{% endhint %}
{% hint style="success" %}
If you want the user to change the column width through the UI, mark the column as **resizable**.
{% endhint %}
To see these properties in action, consider the following initial configuration:
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { DikeGridColumnDef, DikeGridDataSourceInput,
DikeTextColumnDef
} from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-sizing',
templateUrl: './column-sizing.component.html',
styleUrls: ['./column-sizing.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnSizingComponent implements OnInit, OnDestroy {
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private columnDef: DikeGridColumnDef;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
emailColumn.order = 3;
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns(emailColumn);
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
With the initial configuration, we have the following:
1. The **Employee Id** column does not define its `width` nor its `resizable` property.
2. You can change the **Surname** column width through the UI because the configuration sets the `resizable` property and the `minWidth` and `maxWidth` properties have a different value of `width` property.
3. The **Name** column is **resizable**, and the `minWidth` and `maxWidth` properties will take the same value as the `width` property because this configuration does not set their values. Therefore, you will not be able to change the **Name** column width.
4. Finally, for the **Email** column, only the `width` property is set.
As you can see in the following gif, you can only change the **Surname** column width but not for the **Name** column.
{% hint style="info" %}
When a column is **resizable**, the cursor changes to **col-resize**, and when you start resizing it, the DikeGrid draws a **vertical line**. The color of the line will be the **accent** color.
{% endhint %}
### Changing the width through the vertical row lines
If the vertical lines per row are visible, you can resize a column using them.
Let us make the vertical lines per row visible. First, open the [Floating Configuration Panel](/#floating-configuration-panel), then check the **Vertical Row Lines** checkbox from the **Appearance** group.
In the following gif, you can see how dragging a vertical line changes the size of the column.
{% hint style="info" %}
Remember, columns displayed in the **left** or **center** panel have their **gutter-line** at their **right**. See the [Grid Structure - Gutters](/fundamentals/grid-structure/gutters#who-does-the-vertical-gutters-own) section.
{% endhint %}
### Columns in the right panel
Columns displayed in the right panel have their gutter-line at their left. Therefore, these columns change their size in an inverse direction compared to columns displayed in the left or center panel.
When you resize a column in the right panel to increase its width, you must move its gutter-line to the left.
If you want to decrease the column width, move the gutter-line to the right.
Let us create two more columns in the right panel, **Hire Date** and **Age** columns.
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
emailColumn.order = 3;
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns(emailColumn);
// Define the Age column to be displayed in the right Panel:
const ageColumn = new DikeTextColumnDef('age', 'Age');
ageColumn.width = 85;
ageColumn.maxWidth = 150;
ageColumn.order = 2;
ageColumn.resizable = true;
ageColumn.panel = 'rightPanel';
// Add the Age column:
columnDef.addColumns(ageColumn);
// Grab the DikeGridColumnDef instance:
this.columnDef = columnDef;
// Once all the columns have been added:
Promise.resolve().then(() => {
// Find the Employee Id column:
const employeeId = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
// Set the initial values in the text boxes:
if (!!employeeId && isDikeDataColumnDef(employeeId)) {
this.columnSizingForm.patchValue({
width: employeeId.width,
minWidth: employeeId.minWidth,
maxWidth: employeeId.maxWidth,
resizable: employeeId.resizable
});
}
});
}
```
{% endtab %}
{% endtabs %}
#### Dragging the panel division line
When you drag the line that divides two adjacent panels, all columns resize evenly. The resizing operation finishes until all columns reach their minimum or maximum width.
The same occurs for columns displayed in the left panel.
{% hint style="success" %}
You can change the width of the panel division line when the panel is being resized by providing an Injection Token called `DIVISION_PANEL_LINE_WIDTH_RESIZING`. By default, the width is **5 pixels** in width.
{% endhint %}
## DikeGrid Column API
You can change the size properties using the API from the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef)service instance.
{% hint style="success" %}
In the [Column Definition](/columns/column-definitions#dikegridcolumndef-less-than-t-greater-than-service) section, see how to grab the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef) instance from the corresponding [`DikeGridComponent`](/reference/components/dkgridcomponent).
{% endhint %}
### Employee Id column
Since the **Employee Id** column is not resizable and its `width` property is not defined, let us add the UI controls and the corresponding code to change its width using the DikeGrid API.
{% code title="column-sizing.component.html" %}
```markup
Employee Id
```
{% endcode %}
The previous `form` is added above the `dike-grid` selector generating the following output:
Now, you can change the **Employee Id** column's width, min-width, and max-width. If you click on the **checkbox** next to the Apply button, you can **mark** the Employee Id column as **resizable**.
#### Changing the width using the API
Consider the following code:
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
Resizable
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
onChangeColumnSize(): void {
// Search the employeeId column:
const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
if (!!targetColumn && isDikeDataColumnDef(targetColumn)) {
// If the column is found:
const width: number = this.columnSizingForm.get('width').value as number;
const minWidth: number | null = this.columnSizingForm.get('minWidth').value;
const maxWidth: number | null = this.columnSizingForm.get('maxWidth').value;
// Change the column size:
this.columnDef.changeColumnWidth(targetColumn, { width, minWidth, maxWidth });
}
}
```
{% endtab %}
{% endtabs %}
Once the input elements pass the validators, the button can invoke the callback method. Inside the callback definition:
1. Firstly, you must find the column to be modified.
2. Notice how the found column instance is narrowing to a reference of type [`DikeDataColumnDef`](/reference/classes/columns#dikedatacolumndef-less-than-t-r-greater-than), due to the `findColumn()` method returns a reference of type [`DikeColumnDef`](/reference/classes/columns#dikecolumndef).
3. The code uses the `changeColumnWidth()` method to pass the column instance and the size properties, where only the width is mandatory.
{% hint style="info" %}
Internally, the [`DikeGridComponent`](/reference/components/dkgridcomponent) validates the **width**, **minWidth**, and **maxWidth** arguments. For instance, if minWidth is greater than the width, the width value is assigned to minWidth.
{% endhint %}
{% hint style="info" %}
Despite the `resizable` property for the **Employee Id** column is not set, the size properties of the column can be changed using the API.
{% endhint %}
#### Setting the resizable property
Remember that the `resizable` property allows the user to change the width of a column or column group.
The following code snippet is the callback attached to the **checkbox change Event**.
{% code title="column-sizing.component.ts" %}
```typescript
onResizableChange(value: MatCheckboxChange): void {
// Search the employeeId column:
const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
if (!!targetColumn) {
// If the column is found, change its resizable property:
this.columnDef.setColumnResizable(targetColumn, value.checked);
}
}
```
{% endcode %}
Once again, the target column must be found, in this case. The method `setColumnResizable()` marks the **Employee Id** column as **resizable**.
The previous output shows how the **Employee Id** column is resized after setting it as **resizable**. We must have changed the `minWidth`, or `maxWidth` properties as well.
{% hint style="info" %}
Even though a column is marked as **resizable**, if the `minWidth` and `maxWidth` properties have the same value as the `width` property, the column will not resize using the UI.
{% endhint %}
## Column Sizing Event
If you notice, the last output reports the changes in the `width` property of the **Employee Id** column when this one is being resized.
The [`DikeGridComponent`](/reference/components/dkgridcomponent) emits an Event called `columnSizeChange`. This event is emitted every time a data column changes its size.
{% hint style="info" %}
The [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef)service also emits the `columnSizeChange` event.
{% endhint %}
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
onColumnSizeChange(column: DikeDataColumnDef): void {
if (column.fieldName === 'employeeId') {
this.columnSizingForm.patchValue({
width: column.width,
minWidth: column.minWidth,
maxWidth: column.maxWidth
});
}
}
```
{% endtab %}
{% endtabs %}
Since the `columnSizeChange` event sends any column that has changed in width, the if statement gives us the **Employee Id** column.
## Resizing Groups
By definition, a column group's width equals the sum of its child columns' width. Therefore, a column group does not have a `width` property.
All descendant columns, marked as **resizable**, will change in width when resizing a group.
{% hint style="info" %}
The `columnSizeChange` event does not send the group itself nor the descendant groups. Instead, it only **sends** the descendant **data columns**.
{% endhint %}
Let us define the following configuration:
1. Firstly, We have a primary group named **Personal Info**.
2. Under the **Personal Info** group, we have the **Complete Name** column group, the **Gender** and **Age** columns.
3. Finally, we have **Name** and **Surname** columns under the **Complete Name** group.
4. Except for the **Complete Name** group, all columns and column groups are resizable.
{% code title="column-sizing.component.ts" %}
```markup
```
{% endcode %}
{% hint style="info" %}
Column groups marked as **resizable** can change in width only from the UI.
{% endhint %}
As you can see in the previous output:
1. When resizing the **Personal Info** group, the operation draws a vertical line with an **accent** color until the columns.
2. The resize process draws the line only into the column's boundary for the **Surname** column.
{% hint style="success" %}
Remember, for resizing a column or a group, you must grab the gutter-line for the column. See the [Grid Structure - Gutters](/fundamentals/grid-structure/gutters#who-does-the-vertical-gutters-own) section for more details.
{% endhint %}
## Summary
Once you define a column at the creation phase, you can change its width at execution time, either from the **UI** or the **API**. Columns that are resizing through the UI must be **resizable**.
The DikeGrid instance only **sends** the changed **data columns** when the resizing operation occurs, not column groups.
### Complete code for this section
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
Employee Id
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { Subscription } from 'rxjs';
import { DikeDataColumnDef, DikeGridColumnDef, DikeGridDataSourceInput,
DikeTextColumnDef, isDikeDataColumnDef } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-sizing',
templateUrl: './column-sizing.component.html',
styleUrls: ['./column-sizing.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnSizingComponent implements OnInit, OnDestroy {
dkgDataSource: DikeGridDataSourceInput;
columnSizingForm: FormGroup;
gridProperties: DikeGridProperties;
private columnDef: DikeGridColumnDef;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private formBuilder: FormBuilder,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
emailColumn.order = 3;
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns(emailColumn);
// Define the Age column to be displayed in the right Panel:
const ageColumn = new DikeTextColumnDef('age', 'Age');
ageColumn.width = 85;
ageColumn.maxWidth = 150;
ageColumn.order = 2;
ageColumn.resizable = true;
ageColumn.panel = 'rightPanel';
// Add the Age column:
columnDef.addColumns(ageColumn);
// Grab the DikeGridColumnDef instance:
this.columnDef = columnDef;
// Once all the columns have been added:
Promise.resolve().then(() => {
// Find the Employee Id column:
const employeeId = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
// Set the initial values in the text boxes:
if (!!employeeId && isDikeDataColumnDef(employeeId)) {
this.columnSizingForm.patchValue({
width: employeeId.width,
minWidth: employeeId.minWidth,
maxWidth: employeeId.maxWidth,
resizable: employeeId.resizable
});
}
});
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Creating the form that binds the UI ontrols:
this.columnSizingForm = this.createMainForm();
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
getControl(formControlName: string): AbstractControl {
return this.columnSizingForm.get(formControlName);
}
onColumnSizeChange(column: DikeDataColumnDef): void {
if (column.fieldName === 'employeeId') {
this.columnSizingForm.patchValue({
width: column.width,
minWidth: column.minWidth,
maxWidth: column.maxWidth
});
}
}
onResizableChange(value: MatCheckboxChange): void {
// Search the employeeId column:
const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
if (!!targetColumn) {
// If the column is found, change its resizable property:
this.columnDef.setColumnResizable(targetColumn, value.checked);
}
}
onChangeColumnSize(): void {
// Search the employeeId column:
const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
if (!!targetColumn && isDikeDataColumnDef(targetColumn)) {
// If the column is found:
const width: number = this.columnSizingForm.get('width').value as number;
const minWidth: number | null = this.columnSizingForm.get('minWidth').value;
const maxWidth: number | null = this.columnSizingForm.get('maxWidth').value;
// Change the column size:
this.columnDef.changeColumnWidth(targetColumn, { width, minWidth, maxWidth });
}
}
private createMainForm(): FormGroup {
const mainForm = this.formBuilder.group({
resizable: [false]
});
const widthControl = new FormControl('',
[Validators.required, Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
widthControl.markAllAsTouched();
const minWidthControl = new FormControl('',
[Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
minWidthControl.markAsTouched();
const maxWidthControl = new FormControl('',
[Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
maxWidthControl.markAllAsTouched();
mainForm.addControl('width', widthControl);
mainForm.addControl('minWidth', minWidthControl);
mainForm.addControl('maxWidth', maxWidthControl);
return mainForm;
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Column Moving
This section describes how to make a column draggable and which type of movements you can do.
## Live example
{% hint style="success" %}
[Column Moving](https://demos.dikesoft.com/dk-grid/column/moving) live example.
{% endhint %}
## Allowing column dragging
To allow the user moves a column, you must set a flag at the grid scope by providing an input DikeGrid property named `allowColumnDragging`. Its **default** value is **false**.
{% code title="column-moving.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can change the value of the `allowColumnDragging` property at runtime.
{% endhint %}
You can open the [Floating Configuration Panel](/#floating-configuration-panel) of the live demo and change the value of the property `allowColumnDragging`.
## Draggable Columns
You can make a column **movable** by providing a property named `draggable`. Its **default** value is **false**.
{% hint style="warning" %}
Be aware that you can not change the `draggable` property at runtime. Use the `locked` property instead if you want the user not to move a column at runtime. For more details, see the Column Pinning section.
{% endhint %}
Let us set the following column configuration:
{% code title="column-moving.component.html" %}
```markup
```
{% endcode %}
With this configuration, we have:
1. All columns and column groups are **movable** except the **Name** column in the **root** group and the **Name** and **Surname** columns under the **Complete Name** group.
2. We have enabled the row grouping to move columns to the group panel. Columns **Surname** and **Hire Date** from the **root** group are **groupable**. **Gender** and **Age** columns under the **Personal Info** group are **groupable** as well.
3. All columns are in the center panel except the **Hire Date** column in the right panel.
{% hint style="warning" %}
You can move only **data** columns to the **group panel**, not column groups.
When you move a column group to the group panel using the **API**, the movement inserts only the **descendant data columns** into the group panel.
{% endhint %}
## Column movements
Once we have established some columns as **draggable**, be aware of the valid movements a column could take.
{% hint style="success" %}
For the description of the following movements, it will be helpful to grasp the [Gutters](/fundamentals/grid-structure/gutters) structure of the DikeGrid.
{% endhint %}
### Interchange Columns
This movement will swap two columns. The **source column** will take the **destination column's** place and vice versa. For this movement, the following rules apply:
1. The columns must belong to the same group of columns.
2. You can interchange columns that belong to the Content panels.
{% hint style="info" %}
If you try to swap a ***broken group***, you will join the group in the destination panel.
{% endhint %}
### Move Column Before
You can move a column ***before*** another column.
Let us say that you can move a given **column** at the left side of the **target column**. The actual movement will insert the given **column** at the **left-gutter** of the **target column**. Therefore, consider the following rules:
1. Columns must belong to the same group of columns.
2. The target column must belong to the right panel because columns have their gutter at their left.
3. If the target column lives in the left, center panel, or group panel, it must be the first column because they have both gutters.
### Move Column After
You can move one column ***after*** another column.
Same as before, let us say that you can move a given **column** at the right side of the **target column**. The actual movement will insert the given **column** at the **right-gutter** of the **target column**.
The rules are:
1. Columns must belong to the same group of columns.
2. The target column must belong to the group, left or center panel because columns have their gutter at their right.
3. If the target column lives in the right panel, it must be the last column because it has both gutters.
### Column to panel
This movement is possible when you drag a column to the ***left*** or ***right*** grid **border** or use the ***Pinning*** submenu of the **Column Context Menu**.
#### Drag a column to the grid's borders
Drag a column to the left or right grid border, as you can see in the following gif.
#### Using the Column Context Menu
Now, click on any [Column Context Menu](/fundamentals/grid-structure/column-context-menu) and select a panel to move the column.
{% hint style="info" %}
It is possible to move **all panel columns** to another panel using the **column** **API**.
{% endhint %}
## Breaking a column group
You can take a column that belongs to a column group and place it in another panel. This move grabs the column with its parent column and its parent, and so forth until the root.
The movement's outcome is a ***broken group***. For example, we moved the **Gender** column to the left panel. See the final state of the **Personal Info** group in the following screenshot.
### Unbroken column groups
If you do not want the user breaks a group, make its child columns **non-draggable**, as we did for **Name** and **Surname** columns under the **Complete Name** column group.
{% code title="column-moving.component.html" %}
```markup
```
{% endcode %}
You can not move the **Name** column or the **Surname** column. You can only move those columns by dragging the **Complete Name** group.
{% hint style="info" %}
When you drag a column, the DikeGrid instance **highlights** the proper columns or gutters to drop the column you are moving.
{% endhint %}
## Move columns using the API
You can achieve the previous movements using the column API.
{% hint style="info" %}
Remember, to use the **column API**, you must grab the instance of the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef#methods)service.
{% endhint %}
The following table shows the desired movement and its related method in the column API.
| Movement | Method(s) |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Interchange Columns | `swapColumns()` |
| Move Column Before | `moveColumnBefore()` |
| Move Column After | `moveColumnAfter()` |
| Column to Panel |
moveColumnIntoPanel()
To move all columns from one panel to another panel, use the method movePanelColumns()
|
{% hint style="success" %}
For further details, see the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef#methods)definition.
{% endhint %}
{% hint style="info" %}
Even though you do not set the flag `allowColumnDragging`, you can move a column using the API, but the column must be set as **draggable** and not **locked**.
{% endhint %}
To see the use of the API, we have created the following UI:
{% code title="column-moving.component.html" %}
```markup
```
{% endcode %}
We added the `form` selector above the `dike-grid` selector, generating the following output:
With the previous UI, you can do the following tasks:
1. You can choose the source column or the source panel from the first select control.
2. Depending on your selected option, the second dropdown control will have a proper destination place. For instance, if you choose a column, the destination control will contain all columns of the same group and panels the column does not live.
3. The radio-button group has methods that involve column between column movements.
4. When you select panels, the corresponding button is enabled.
It is essential to notice that we are **listening** to any change in the **DikeGrid's columns**, attaching a subscription to the `columnsChange` `Observable` from the `DikeGridColumnDef`.
{% code title="column-moving.component.ts" %}
```typescript
private setChangeGridColumnsSubscription(): void {
this.changeGridColumnsSubscription.unsubscribe();
this.changeGridColumnsSubscription = this.dikeGrid.columnDef.columnsChange.pipe(
map((columns: DikeColumnDef[]) => this.flatColumns(columns)),
observeOn(asapScheduler)
).subscribe((columns) => {
this.destinationColumns = null;
this.destinationPanels = null;
this.moveColumnsForm.patchValue({ source: null, destination: null, method: '' });
this.moveColumnsForm.get('method').enable();
this.gridColumns = columns;
});
}
```
{% endcode %}
Every time we receive a new set of columns, we flat them into a single array, invoking the method `flatColumns()`. So indeed, we are **flattening** the **column groups**, traversing them **recursively**.
{% code title="column-moving.component.ts" %}
```typescript
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
```
{% endcode %}
If you see the content of the **source dropdown** control, you see the columns **Hire Date**, **Employee Id**, **Personal Info** group, **Complete Name** group, then **Name** and **Surname** columns, **Gender** and **Age** columns, etc.
{% hint style="info" %}
The **non-draggable** columns are **disabled**, such as **Name** and **Surname**, under the **Complete Name** group.
{% endhint %}
## Column Moving Events
Every previous movement emits an event of type `DikeColumnMoveEvent`. We listen to the `columnMove` event at the grid scope.
{% tabs %}
{% tab title="column-moving.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-moving.component.ts" %}
```typescript
onColumnMove(movementData: DikeColumnMoveEvent): void {
console.log('Column movement: ', movementData);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
You can also listen to the `columnMove` event from the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef#events) instance.
{% endhint %}
See the definition of the `DikeColumnMoveEvent` interface:
```typescript
interface DikeColumnMoveEvent {
type: ColumnMovement;
movedColumns: DikeColumnDef[];
beforeColumn?: DikeColumnDef;
afterColumn?: DikeColumnDef;
destinationPanel?: DikeGridPanel;
}
```
And the `ColumnMovement` definition is:
```typescript
type ColumnMovement = 'swap-columns' | 'join-column-groups' | 'column-after' | 'column-before' | 'columns-to-panel';
```
As you can see, some fields are not required. However, depending on the type of movement, those fields are provided.
| Movement | DikeColumnMoved |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Interchange Columns |
type: swap-columns. movedColumns: The source and destination columns.
|
| Interchange Columns |
type: join-column-groups. movedColumns: The joined column group. destinationPanel: The panel the broken-destination group lives.
|
| Move Column Before |
type: column-before. movedColumns: The source column. beforeColumn: The target column. destinationPanel: The panel the target column lives.
|
| Move Column After |
type: column-after. movedColumns: The source column. afterColumn: The target column. destinationPanel: The panel the target column lives.
|
| Column to panel |
type: columns-to-panel. movedColumns: The source columns or all panel columns. destinationPanel. The provided panel is the destination panel.
|
{% hint style="success" %}
You can open the **dev console** for the live demo and see the emitted **event**.
{% endhint %}
## Summary
Before defining which columns will be movable, you must allow this action by providing a property named `allowColumnDragging` at the grid scope. To move a column, you must define a column as **draggable**. You can **interchange** columns only from the **Content panels**, and you can only add **data columns** to the **group panel**. You can move columns using the [Column Context Menu](/fundamentals/grid-structure/column-context-menu) as well.
### Complete code for this section
{% tabs %}
{% tab title="column-moving.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-moving.component.ts" %}
```typescript
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';
import { asapScheduler, Subscription } from 'rxjs';
import { map, observeOn } from 'rxjs/operators';
import { DikeColumnDef, DikeGridComponent, DikeGridDataSourceInput, isDikeGroupColumnDef, DikeGridPanel, DikeColumnMoveEvent } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-moving',
templateUrl: './column-moving.component.html',
styleUrls: ['./column-moving.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnMovingComponent implements OnInit, AfterViewInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
gridColumns: DikeColumnDef[];
gridPanels: DikeGridPanel[];
destinationColumns: DikeColumnDef[];
destinationPanels: DikeGridPanel[];
disableMethods: boolean;
moveColumnsForm: FormGroup;
private changeGridColumnsSubscription: Subscription = Subscription.EMPTY;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) {
this.gridPanels = ['groupPanel', 'leftPanel', 'centerPanel', 'rightPanel'];
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
this.createForm();
}
ngAfterViewInit(): void {
// We listen the columnsChange observable after the DikeGrid instance is ready:
this.setChangeGridColumnsSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridColumnsSubscription.unsubscribe();
}
onSourceSelectionChange(data: MatSelectChange): void {
const source = data.value;
let sourcePanel: DikeGridPanel;
this.destinationColumns = null;
this.moveColumnsForm.patchValue({ destination: null, method: '' });
this.moveColumnsForm.get('method').enable();
if (source instanceof DikeColumnDef) {
// We get only those columns in the same group:
this.destinationColumns = this.gridColumns.filter(column => column !== source &&
column.belongToGroup === source.belongToGroup);
sourcePanel = source.panel;
} else {
sourcePanel = source as DikeGridPanel;
}
// We take the panels different from the source selection:
this.destinationPanels = this.gridPanels.filter(panel => sourcePanel !== panel);
}
onDestinationSelectionChange(data: MatSelectChange): void {
const destination = data.value;
if (!(destination instanceof DikeColumnDef)) {
this.moveColumnsForm.patchValue({ method: '' });
this.moveColumnsForm.get('method').disable();
} else {
this.moveColumnsForm.get('method').enable();
}
}
onMoveColumns(): void {
if (this.moveColumnsForm.valid) {
// Take the columns from the form:
const sourceColumn = this.moveColumnsForm.get('source').value as DikeColumnDef;
const destinationColumn = this.moveColumnsForm.get('destination').value as DikeColumnDef;
// Take the method to be invoked:
const method = this.moveColumnsForm.get('method').value as string;
switch (method) {
case 'swap-columns':
this.dikeGrid.columnDef.swapColumns(sourceColumn, destinationColumn);
break;
case 'column-after':
this.dikeGrid.columnDef.moveColumnAfter(sourceColumn, destinationColumn);
break;
case 'column-before':
this.dikeGrid.columnDef.moveColumnBefore(sourceColumn, destinationColumn);
break;
}
}
}
onMoveColumnsToPanel(): void {
const source = this.moveColumnsForm.get('source').value;
const destinationPanel = this.moveColumnsForm.get('destination').value as DikeGridPanel;
if (!!source && !!destinationPanel) {
if (source instanceof DikeColumnDef) {
// Move the selected column to the destination panel:
this.dikeGrid.columnDef.moveColumnIntoPanel(source, destinationPanel);
} else {
// Move all columns from the source panel to the destnation panel:
this.dikeGrid.columnDef.movePanelColumns(source as DikeGridPanel, destinationPanel);
}
}
}
onColumnMove(movementData: DikeColumnMoveEvent): void {
console.log('Column movement: ', movementData);
}
private createForm(): void {
this.moveColumnsForm = new FormGroup({
source: new FormControl(null, Validators.required),
destination: new FormControl(null, Validators.required),
method: new FormControl({ value: '', disabled: false }, Validators.required),
});
}
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
private setChangeGridColumnsSubscription(): void {
this.changeGridColumnsSubscription.unsubscribe();
this.changeGridColumnsSubscription = this.dikeGrid.columnDef.columnsChange.pipe(
map((columns: DikeColumnDef[]) => this.flatColumns(columns)),
observeOn(asapScheduler)
).subscribe((columns) => {
this.destinationColumns = null;
this.destinationPanels = null;
this.moveColumnsForm.patchValue({ source: null, destination: null, method: '' });
this.moveColumnsForm.get('method').enable();
this.gridColumns = columns;
});
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Column Pinning
Once you have defined a column as draggable, you can make it non-draggable at runtime.
## Live example
{% hint style="success" %}
[Column Pinning](https://demos.dikesoft.com/dk-grid/column/pinning) live example.
{% endhint %}
## Lock/Unlock columns
When you define a column as **draggable**, it is possible to **freeze** that column by locking it.
{% hint style="info" %}
To **lock/unlock** a column through the **UI**, you must set the flag `allowColumnDragging` at the grid scope.
{% endhint %}
Open the [Column Context Menu](/fundamentals/grid-structure/column-context-menu#column-pinning) for any column defined as **draggable**. You will see the **lock/unlock** icons.
Locking a column is useful when the user moves a column to the **right** or **left** panel and then **freezes** the column to be always **visible**. Even though the user can lock a column in the center panel, it makes more sense to freeze columns in the left or right panels.
{% hint style="info" %}
The user can not move locked columns, and other columns can not occupy their place when dragging operation occurs.
{% endhint %}
## Defining frozen columns
To not allow a user to move a column nor lock/unlock it, define the column as **non-draggable**.
{% hint style="success" %}
Only **draggable** columns are susceptible to being **locked/unlocked**.
{% endhint %}
Consider the following column configuration:
{% code title="column-pinning.component.html" %}
```markup
```
{% endcode %}
With this configuration, we have:
1. All columns are **draggable** except the **Employee Id** column, the **Name** column in the **root** group, and the **Surname** under the **Complete Name** column group.
2. We **locked** the columns **Email** and **Name** under the **Complete Name** group.
3. Finally, we defined the **Employee Id** column in the **left panel**, which is **non-draggable**. The user can not move or lock/unlock this column.
As you can see, the user can not move the Employee Id column and will not lock/unlock it. If you try to move the column, you will see an icon that indicates the user cannot move that column.
## Lock/Unlock column using the API
You can lock/unlock columns using the column API.
{% hint style="info" %}
Remember, to use the **column API**, you must grab the instance of the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef#methods)service.
{% endhint %}
You use `lockColumn()` and `unlockColumn()` methods for locking and unlocking, respectively.
{% hint style="success" %}
Although you do not set the flag `allowColumnDragging`, you can **lock/unlock** a column using the **API**, but you must define the column as **draggable**.
{% endhint %}
To see the use of the API, we have created the following API:
{% code title="column-pinning.component.html" %}
```markup
Columns
{{ column.headerText }}
```
{% endcode %}
The generated output is:
With the previous UI, you can do the following tasks:
1. You can choose any defined column as **draggable**. It includes column groups.
2. Depending on the locked state, the button next to the dropdown control will display the lock or unlock label.
It is essential to notice that we are **listening** to any change in the **DikeGrid's columns**, attaching a callback to the `columnsChange` output property from the [`DikeGridComponent`](/reference/components/dkgridcomponent).
{% tabs %}
{% tab title="column-pinning.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-pinning.component.ts" %}
```typescript
onColumnsChange(columns: DikeColumnDef[]): void {
this.gridColumns = this.flatColumns(columns);
// Clear selection:
this.selectedColumn.patchValue(null);
}
```
{% endtab %}
{% endtabs %}
Every time we receive a new set of columns, we flat them into a single array, invoking the method `flatColumns()`. So indeed, we are **flattening** the **column groups**, traversing them **recursively**.
{% code title="column-pinning.component.ts" %}
```typescript
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
```
{% endcode %}
If you see the content of the **dropdown** control, you see the columns **Employee Id**, **Name**, **Personal Info** group, **Complete Name** group, then **Name** and **Surname** columns, etc.
{% hint style="info" %}
The **non-draggable** columns are **disabled**, such as **Employee Id**, **Name** in the **root** group, and **Surname**, under the **Complete Name** group.
{% endhint %}
## Events when Locking/Unlocking columns
When you lock or unlock a column, the DikeGrid instance emits the related event.
{% tabs %}
{% tab title="column-pinning.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-pinning.component.ts" %}
```typescript
onColumnLockedChange(column: DikeColumnDef): void {
console.log('Column locked: ', column);
}
onColumnUnLockedChange(column: DikeColumnDef): void {
console.log('Column unlocked: ', column);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
You can also listen to the `columnLockedChange` and `columnUnLockedChange` events from the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef#events)instance.
{% endhint %}
Both events emit the locked/unlocked column. Notice that the sent column is of type `DikeColumnDef` because you can lock/unlock column **groups**, not only data columns.
{% hint style="success" %}
Open the **dev console** to see the locked/unlocked column.
{% endhint %}
## Summary
To lock/unlock a column, you must define it as **draggable**. You can lock/unlock columns in any panel, even in the **group** panel, but **freezing** columns in the **left** or **right** panels makes more sense.
### Complete code for this section
{% tabs %}
{% tab title="column-pinning.component.html" %}
```markup
Columns
{{ column.headerText }}
```
{% endtab %}
{% tab title="column-pinning.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';
import { Subscription } from 'rxjs';
import { DikeGridDataSourceInput, DikeColumnDef, isDikeGroupColumnDef, DikeGridComponent } from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-pinning',
templateUrl: './column-pinning.component.html',
styleUrls: ['./column-pinning.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnPinningComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
selectedColumn: FormControl;
isColumnLocked: boolean;
gridColumns: DikeColumnDef[];
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) {
this.isColumnLocked = false;
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
this.selectedColumn = new FormControl(null, Validators.required);
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onSelectionChange(data: MatSelectChange): void {
this.isColumnLocked = (data.value as DikeColumnDef).locked;
}
onChangeLocking(): void {
if (this.selectedColumn.valid) {
const column = this.selectedColumn.value as DikeColumnDef;
if (column.locked) {
this.dikeGrid.columnDef.unlockColumn(column);
} else {
this.dikeGrid.columnDef.lockColumn(column);
}
}
}
onColumnsChange(columns: DikeColumnDef[]): void {
this.gridColumns = this.flatColumns(columns);
// Clear selection:
this.selectedColumn.patchValue(null);
}
onColumnLockedChange(column: DikeColumnDef): void {
console.log('Column locked: ', column);
}
onColumnUnLockedChange(column: DikeColumnDef): void {
console.log('Column unlocked: ', column);
}
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Row Sorting
This section describes how you can sort the DikeGrid rows.
## Live example
{% hint style="success" %}
[Row Sorting](https://demos.dikesoft.com/dk-grid/row/sorting) live example.
{% endhint %}
## Allowing the sorting operation
To allow the user to sort the DikeGrid rows, you must set a flag at the grid scope by providing an input property named `allowSorting`. Its **default** value is **false**.
{% code title="row-sorting.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can change the value of the `allowSorting` property at **runtime**.
{% endhint %}
Open the [Floating Configuration Panel](/#floating-configuration-panel) for the live example and **mark** the **Allow Sorting** checkbox.
## Sortable columns
If you want the user to sort the DikeGrid rows by a column, mark the column as **sortable**. Its default value is **false**.
{% hint style="info" %}
You can only make **sortable** data columns, not column groups.
{% endhint %}
See the following column configuration:
{% code title="row-sorting.component.html" %}
```markup
```
{% endcode %}
We have the following **sortable** columns with the previous configuration: **Name** and **Surname** under the **Complete Name** group, **Age** column under the **Personal Info** group, and the **Hire Date** column.
You can make a column **sortable** at **runtime** using the corresponding **API**. For example, see the following code snippet:
{% code title="row-sorting.component.ts" %}
```typescript
onSetColumnSortable(): void {
if (this.columnControl.valid) {
// Get the selected column:
const column = this.columnControl.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
// Toggle the sortable flag for the selected column:
this.dikeGrid.columnDef.setColumnSortable(column, !column.sortable);
}
}
}
```
{% endcode %}
As you can see, once you have got the column you want to set as **sortable** or **non-sortable**, use the `DikeGridColumnDef` service instance to change the column state.
{% hint style="success" %}
Before using the **column API**, you must grab the instance of the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef) service.
{% endhint %}
## Sorting rows through the UI
Once you define columns as **sortable**, you can sort the DikeGrid rows by these sortable columns.
### Clicking on the column header
You can sort the DikeGrid rows by clicking on the column header.
When you have clicked on the column header of a **sortable** column, you will see an **arrow** that indicates the **direction** of the sorting operation.
### Column Context Menu
When you define a column as **sortable**, you will see the sorting submenu in the [Column Context Menu](/fundamentals/grid-structure/column-context-menu). Then, you will see the sorting options.
## DikeGrid Sorting API
You can sort the DikeGrid rows using the **sorting API**.
Before using the **sorting API**, you must retrieve the corresponding DikeGrid instance by querying the component's view.
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
@Component({
selector: 'row-sorting',
templateUrl: './row-sorting.component.html',
styleUrls: ['./row-sorting.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSortingComponent implements OnInit {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
//...
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
The **sorting API** is an instance of type [`DikeGridSorting`](/reference/dkgrid-api/dkgridsorting) under the [`DikeGridComponent`](/reference/components/dkgridcomponent) through the **read-only** property named `sorting`.
{% endhint %}
The **sorting API** has the following methods:
| Method | Description |
| ---------------------- | --------------------------------------------------------------------------------------------- |
| `sortBy()` | It sorts the DikeGrid rows by the given column in the given direction. |
| `isDikeGridSortedBy()` | It evaluates if the DikeGrid is sorted by the given column. |
| `getCurrentSortable()` | It returns the column and the direction of the sorting operation. Otherwise, it returns null. |
| `clearSorting()` | It removes the current sorting operation. |
{% hint style="success" %}
For further details, see the [`DikeGridSorting`](/reference/dkgrid-api/dkgridsorting#methods) definition.
{% endhint %}
{% hint style="info" %}
You can sort the DikeGrid rows only by **one** column **sortable** at a time.
{% endhint %}
To see the use of the **sorting API**, we have created the following UI:
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
onSelectionChange(data: MatSelectChange): void {
const column = data.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
if (!column.sortable) {
this.rowSortingForm.get('direction').disable();
} else {
this.rowSortingForm.get('direction').enable();
}
}
}
onSortBy(): void {
if (this.rowSortingForm.valid) {
const column = this.rowSortingForm.get('column').value as DikeColumnDef;
const direction = this.rowSortingForm.get('direction').value as 'asc' | 'desc';
// if the DikeGrid instance is sorted, get the current columns and the sort direction:
const currentSortable = this.dikeGrid.sorting.getCurrentSortable();
/**
* We will sort the DikeGrid rows, if only if:
*
* 1. The DikeGrid is not sorted.
* 2. Or, the DikeGrid is sorted but the selected column is different than the current column.
* 3. Or, the DikeGrid is sorted by the selected column but the selected direction is different.
*/
if (isDikeDataColumnDef(column) &&
(!currentSortable || currentSortable.sortedColumn.columnId !== column.columnId || currentSortable.type !== direction)) {
this.dikeGrid.sorting.sortBy(column, direction);
}
}
}
onSetColumnSortable(): void {
if (this.columnControl.valid) {
// Get the selected column:
const column = this.columnControl.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
// Toggle the sortable flag for the selected column:
this.dikeGrid.columnDef.setColumnSortable(column, !column.sortable);
}
}
}
```
{% endtab %}
{% endtabs %}
The previous HTML code generates the following output:
With the previous UI, you can do the following tasks:
1. You can choose any data column from the dropdown control. Sortable columns have an icon indicating they are sortable.
2. You can change the sortable state of a data column.
3. To sort the DikeGrid rows, you must select the direction of the sorting operation. Then click on the **Sort By** button.
It is essential to notice that we are **listening** to any change in the **DikeGrid's columns**, attaching a callback to the `columnsChange` output property from the [`DikeGridComponent`](/reference/components/dkgridcomponent).
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
onColumnsChange(columns: DikeColumnDef[]): void {
this.gridColumns = this.flatColumns(columns);
// Clear selection:
this.rowSortingForm.patchValue({ column: null, direction: '' });
}
```
{% endtab %}
{% endtabs %}
Every time we receive a new set of columns, we flat them into a single array, invoking the method `flatColumns()`. So indeed, we are **flattening** the **column groups**, traversing them **recursively**.
{% code title="row-sorting.component.ts" %}
```typescript
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
```
{% endcode %}
If you see the content of the **dropdown** control, you see the columns **Employee Id**, **Personal Info** group, **Complete Name** group, then **Name** and **Surname** columns, etc.
The column groups are **disabled**, such as **Personal Info** and **Complete Name**.
## Sort event
Every time we sort the DikeGrid rows, the DikeGrid instance emits the related event.
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
onSortChange(sortedBy: DikeColumnSortEvent): void {
console.log('Sort change: ', sortedBy);
}
```
{% endtab %}
{% endtabs %}
The emitted object is of type `DikeColumnSortEvent`, which contains the **column** and the **direction** of the current sorting operation.
{% hint style="success" %}
Open the **dev console** to see the output of the `sortChange` event.
{% endhint %}
{% hint style="info" %}
You can also listen to the `sortChange` event from the [`DikeGridSorting`](/reference/dkgrid-api/dkgridsorting#events) instance.
{% endhint %}
## Summary
To perform the sorting operation, you must allow it by providing an input property named `allowSorting`. Then, when creating columns, you can define them as **sortable**. Nevertheless, you can change their state at **runtime** using the related **API**. You can perform the sorting operation through the **UI** or the **sorting API**.
### Complete code for this section
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';
import { Subscription } from 'rxjs';
import { DikeColumnDef, DikeColumnSortEvent, DikeGridComponent,
DikeGridDataSourceInput, isDikeDataColumnDef, isDikeGroupColumnDef
} from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'row-sorting',
templateUrl: './row-sorting.component.html',
styleUrls: ['./row-sorting.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSortingComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
gridColumns: DikeColumnDef[];
rowSortingForm: FormGroup;
columnControl: FormControl;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
this.createForm();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onSelectionChange(data: MatSelectChange): void {
const column = data.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
if (!column.sortable) {
this.rowSortingForm.get('direction').disable();
} else {
this.rowSortingForm.get('direction').enable();
}
}
}
onSortBy(): void {
if (this.rowSortingForm.valid) {
const column = this.rowSortingForm.get('column').value as DikeColumnDef;
const direction = this.rowSortingForm.get('direction').value as 'asc' | 'desc';
// if the DikeGrid instance is sorted, get the current columns and the sort direction:
const currentSortable = this.dikeGrid.sorting.getCurrentSortable();
/**
* We will sort the DikeGrid rows, if only if:
*
* 1. The DikeGrid is not sorted.
* 2. Or, the DikeGrid is sorted but the selected column is different than the current column.
* 3. Or, the DikeGrid is sorted by the selected column but the selected direction is different.
*/
if (isDikeDataColumnDef(column) &&
(!currentSortable || currentSortable.sortedColumn.columnId !== column.columnId || currentSortable.type !== direction)) {
this.dikeGrid.sorting.sortBy(column, direction);
}
}
}
onSetColumnSortable(): void {
if (this.columnControl.valid) {
// Get the selected column:
const column = this.columnControl.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
// Toggle the sortable flag for the selected column:
this.dikeGrid.columnDef.setColumnSortable(column, !column.sortable);
}
}
}
onSortChange(sortedBy: DikeColumnSortEvent): void {
console.log('Sort change: ', sortedBy);
}
onColumnsChange(columns: DikeColumnDef[]): void {
this.gridColumns = this.flatColumns(columns);
// Clear selection:
this.rowSortingForm.patchValue({ column: null, direction: '' });
}
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
private createForm(): void {
this.columnControl = new FormControl(null, Validators.required);
this.rowSortingForm = new FormGroup({
column: this.columnControl,
direction: new FormControl({ value: '', disabled: false }, Validators.required),
});
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Row Selection
The user can select one or all rows from the data source. This section describes how you can configure this feature.
## Live example
{% hint style="success" %}
[Row Selection](https://demos.dikesoft.com/dk-grid/row/selection) live example.
{% endhint %}
## Allowing the selection operation
To allow the user to **select/deselect** the DikeGrid rows, you must provide an input property named `allowSelection`. This property is at the grid scope.
{% code title="row-selection.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can change the value of the `allowSelection` property at **runtime**.
{% endhint %}
Open the [Floating Configuration Panel](/#floating-configuration-panel) for the live example and click on the **Allow Selection** checkbox.
Once you have enabled selection, you will see a **checkbox** column displayed for every row. To **select/deselect** a row, click on the related checkbox.
## Selectable rows
By default, when you enable selection for the DikeGrid, all rows are susceptible to being selected.
If you want the user can select only **some rows**, you can provide a **function** specifying the conditions the rows must meet. You can set this function by providing a property named `selectableRows`.
Let us define this function to allow the user to select rows whose age value is not 27.
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
selectableRowsDefinition(entry: Employee): boolean {
// Allow selection only for those rows whose age value is different of 27:
return entry.age !== 27;
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
The `selectableRows` property is of type [`SelectableFn`](/reference/dkgrid-api/dkgridselection#properties), and you can also provide this function using the **selection API**.
{% endhint %}
{% hint style="info" %}
You can change this function definition at **runtime**. Therefore, the DikeGrid instance will evaluate the currently selected rows, deselecting those rows that do not meet the new criteria.
{% endhint %}
As you can see, rows that do not meet the defined criteria display their checkbox **disabled**.
## Header Checkbox Selection
When you provide an **in-memory** data set, the DikeGrid instance always shows a checkbox in its header.
On the other hand, the DikeGrid instance will not show a checkbox in its header when you provide a **custom Datasource** because the DikeGrid does not know the total length of the provided data set.
{% hint style="success" %}
See the [Datasource](/fundamentals/datasource) section for further details about an **in-memory** data set and a **custom Datasource**.
{% endhint %}
By default, the checkbox in the header will select all rows even though the data set is filtered. However, if you want to select only the filtered rows, you can use the **selection API**.
## Group Selection
When you group rows by a column, every group will show its checkbox.
1. The selectable rows under the group will be selected when you click on the checkbox in the group. If the group has **non-selectable** rows, its state will be **indeterminate**.
2. When you click in any of the rows under the group, the checkbox in the group will update its status to indeterminate and become checked until you select all rows.
{% hint style="info" %}
The checkbox in the header will update its state as well.
{% endhint %}
We have enabled **row grouping** in the live demo to see this feature.
{% code title="row-selection.component.html" %}
```markup
```
{% endcode %}
As you can see, apart from allowing **row grouping**, we have enabled **column dragging**. Then, we set **Gender** and **Age** columns being **groupable**.
You can move the **Age** column to the group panel with the previous configuration. Thus, you can select any group or a row under any group.
## DikeGrid Selection API
You can also use the **selection API** to select rows.
Before using the **selection API**, you must retrieve the related DikeGrid instance by querying the component's view.
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
@Component({
selector: 'row-selection',
templateUrl: './row-selection.component.html',
styleUrls: ['./row-selection.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSelectionComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
// ...
}
```
{% endtab %}
{% endtabs %}
The **selection API** has the following methods:
| Method | Description |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `selectOne()` |
It marks the given row as selected.
The given row must pass the selectable function.
This method emits the selectionChange and selectedRowChange events.
|
| `select()` |
It marks the given rows as selected.
It emits the selectionChange event.
|
| `deselectOne()` |
It turns off the selected flag for the given row.
This method emits the selectionChange and deselectedRowChange events.
|
| `deselect()` |
It turns off the selected flag for the given rows.
This method emits the selectionChange event.
|
| `getSelectedRows()` | This method returns an array of all selected rows. |
| `getSelectedEntries()` | It returns all selected entries. |
| `selectAll()` | This method will set all rows coming from the data source as selected. |
| `deselectAll()` | It turns off the selection flag of all selected rows. |
| `resetSelection()` | This method deselects all selected rows and cleanses some internal variables. The DikeGrid instance will invoke this method every time you provide a new data set. |
{% hint style="success" %}
For further details, see the [`DikeGridSelection`](/reference/dkgrid-api/dkgridselection#methods) definition.
{% endhint %}
{% hint style="info" %}
To use any previous methods, you must have allowed selection by providing the input property named `allowSelection`.
{% endhint %}
Remember, when you provide a data source, the DikeGrid instance **wraps** every entry into an object of type `DikeGridRowEntry`. See the class hierarchy for the DikeGrid rows.
To see the **selection API** in action, we have created the following UI:
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
onSelectOne(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.selectOne(filteredRows[0]);
}
}
onSelect(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.select(filteredRows);
}
}
onDeselectOne(): void {
const selectedFromFiltered = this.dikeGrid.filter.getFilteredRows().filter(row => row.selected);
if (selectedFromFiltered.length > 0) {
this.dikeGrid.selection.deselectOne(selectedFromFiltered[0]);
}
}
onDeselect(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.deselect(filteredRows);
}
}
onGetSelectedRows(): void {
console.log('Selected rows: ', this.dikeGrid.selection.getSelectedRows());
}
onGetSelectedEntries(): void {
console.log('Selected entries: ', this.dikeGrid.selection.getSelectedEntries());
}
onSelectAll(): void {
this.dikeGrid.selection.selectAll();
}
onDeselectAll(): void {
this.dikeGrid.selection.deselectAll();
}
```
{% endtab %}
{% endtabs %}
The previous HTML code generates the following output:
For every button, we have attached the following actions:
1. Buttons **selectOne / filtered**, **select / filtered**, **deselectOne / filtered** and **deselect / filtered** work over the filtered set. These buttons are enabled if you have filtered the original set.
2. To allow filtering, we enabled the DikeGrid **Row Filter**.
3. The **selectAll** and **deselectAll** buttons are self-explanatory.
4. We printed out the **selected rows** and **selected entries** in the **dev console**.
Please, open the **live demo** and see the previous buttons in action.
To evaluate if the DikeGrid instance has a filter applied, we listen to the `filterChange` and `columnsChange` events.
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
onFilterChange(filterable: DikeFilterable): void {
// We ignore the argument filterable because we are only interested in the action.
this.isFiltered = !!this.dikeGrid ? this.dikeGrid.filter.isFilterApplied() : false;
}
onColumnsChange(columns: DikeColumnDef[]): void {
// We ignore the argument columns because we are only interested in the action.
this.isFiltered = !!this.dikeGrid ? this.dikeGrid.filter.isFilterApplied() : false;
}
```
{% endtab %}
{% endtabs %}
1. The `filterChange` event fires every time the user types something in the DikeGrid **Row Filter**.
2. We listen to the `columnsChange` event because every time the user groups the rows by a column, the user must move that column to the group panel, provoking the DikeGrid instance to raise the `columnsChange` event.
{% hint style="warning" %}
Remember that the DikeGrid ignores filters for the columns in the group panel.
{% endhint %}
## Selection events
Every time we **select** or **deselect** one or more rows, the DikeGrid instance emits the related event.
The following are the selection events:
| Event | Description |
| ------------------- | ---------------------------------------------------------- |
| `selectedRowChange` | It emits when the user selects one row. |
| `deselectRowChange` | It emits when the user deselects one row. |
| `selectionChange` | It emits when the user selects/deselects one or more rows. |
We listen to these three events:
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
onSelectedRowChange(row: DikeGridDataRowEntry): void {
console.log('Select one row change: ', row);
}
onDeselectedRowChange(row: DikeGridDataRowEntry): void {
console.log('Deselect one row change: ', row);
}
onSelectionChange(rows: DikeGridDataRowEntry[]): void {
console.log('Selection change: ', rows);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
Please, open the **dev console** to see the output of these events.
{% endhint %}
{% hint style="info" %}
You can also listen to these events from the [`DikeGridSelection`](/reference/dkgrid-api/dkgridselection#events) instance.
{% endhint %}
## Summary
To perform the **selection** operation, you must allow it by providing an input property named `allowSelection`. By default, the user can select all rows, but you can enable only some rows for selection by providing a **custom function** where every row must meet the established criteria. You can **select** or **deselect** rows through the **UI** or the **selection API**.
### Complete code for this section
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { DikeGridComponent, DikeGridDataRowEntry,
DikeGridDataSourceInput, DikeFilterable, DikeColumnDef
} from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
@Component({
selector: 'row-selection',
templateUrl: './row-selection.component.html',
styleUrls: ['./row-selection.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSelectionComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
isFiltered: boolean;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) {
this.isFiltered = false;
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
selectableRowsDefinition(entry: Employee): boolean {
// Allow selection only for those rows whose age value is different of 27:
return entry.age !== 27;
}
onSelectOne(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.selectOne(filteredRows[0]);
}
}
onSelect(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.select(filteredRows);
}
}
onDeselectOne(): void {
const selectedFromFiltered = this.dikeGrid.filter.getFilteredRows().filter(row => row.selected);
if (selectedFromFiltered.length > 0) {
this.dikeGrid.selection.deselectOne(selectedFromFiltered[0]);
}
}
onDeselect(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.deselect(filteredRows);
}
}
onGetSelectedRows(): void {
console.log('Selected rows: ', this.dikeGrid.selection.getSelectedRows());
}
onGetSelectedEntries(): void {
console.log('Selected entries: ', this.dikeGrid.selection.getSelectedEntries());
}
onSelectAll(): void {
this.dikeGrid.selection.selectAll();
}
onDeselectAll(): void {
this.dikeGrid.selection.deselectAll();
}
onFilterChange(filterable: DikeFilterable): void {
// We ignore the argument filterable because we are only interested in the action.
this.isFiltered = !!this.dikeGrid ? this.dikeGrid.filter.isFilterApplied() : false;
}
onColumnsChange(columns: DikeColumnDef[]): void {
// We ignore the argument columns because we are only interested in the action.
this.isFiltered = !!this.dikeGrid ? this.dikeGrid.filter.isFilterApplied() : false;
}
onSelectedRowChange(row: DikeGridDataRowEntry): void {
console.log('Select one row change: ', row);
}
onDeselectedRowChange(row: DikeGridDataRowEntry): void {
console.log('Deselect one row change: ', row);
}
onSelectionChange(rows: DikeGridDataRowEntry[]): void {
console.log('Selection change: ', rows);
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Row Grouping
This section describes how the user can display rows grouped by columns.
## Live example
{% hint style="success" %}
[Row Grouping](https://demos.dikesoft.com/dk-grid/row/grouping) live example.
{% endhint %}
## Allowing the Row-Grouping operation
To allow the user to **group** the DkGrid rows, you must provide an input property named `allowRowGrouping`.
{% code title="row-grouping.component.html" %}
```markup
```
{% endcode %}
{% hint style="warning" %}
You can set the value of the `allowRowGrouping` property only at creation time.
{% endhint %}
After enabling the row-grouping operation, you will see a panel above the column headers. This panel is the **group panel**.
## Row Grouping through the UI
To allow the user to move columns to the **group panel**, you must provide an input property named `allowColumnDragging`. Then, mark the columns you want the DkGrid rows grouped by as **draggable** and **groupable**.
{% code title="row-grouping.component.html" %}
```markup
```
{% endcode %}
We have defined **Country**, **Age**, **Gender,** and **Name** columns as **draggable** and **groupable**.
{% hint style="info" %}
Remember, you should not **lock** a column if you want to **drag** that column.
{% endhint %}
Open the [Floating Configuration Panel](/#floating-configuration-panel) and mark the **Allow Column Dragging** checkbox.
Let us group the DkGrid rows by the **Country** and **Gender** columns.
### Custom templates
As discussed in the [Column Definitions](/columns/column-definitions#templates-for-displaying-field-values) section, every column has a **default template** for displaying the corresponding field value for every row.
Every group row will take the default template for displaying its value after grouping the rows. However, you can change the default template, as you can see in the following code snippet:
{% code title="row-grouping.component.html" %}
```markup
{{ value }}
{{ value }}
```
{% endcode %}
{% hint style="warning" %}
When defining a template to use in the group rendering, the related inner component will not pass the **row entry** object when calling the specified template.
{% endhint %}
After grouping the DkGrid rows by the **Country** and **Gender** columns, you will see the following output:
{% hint style="success" %}
We have defined a custom pipe named **countryFlag** to map the country name with its corresponding flag file.
{% endhint %}
### Clearing the group panel
You can remove columns from the group panel one by one or all of them in one action.
You can click on the **close icon** next to the column name to remove that column from the group panel. The action will **move** the column from the group panel to the **center panel**.
Or, you can remove all columns by clicking on the **group panel icon** at the left of the panel itself. The action will **move** all the columns from the group panel to the **center panel**.
## Group Selection
You can open the [Floating Configuration Panel](/#floating-configuration-panel) and click on the **Allow Selection** checkbox to enable selection.
{% hint style="success" %}
See the [Row Selection - Group Selection](/rows/row-selection#group-selection) section for further details about group selection.
{% endhint %}
## Row Grouping using the API
You can use the **column API** to move columns to, from, or inside the group panel, and you can use the **rowGrouping API** to clear columns from the group panel.
{% hint style="info" %}
When you group the DkGrid rows by some columns, it is enough to define them as **draggable**, **groupable**, and not **locked** when using the **API**. Therefore, it does not matter if you do not provide the input property `allowColumnDragging`.
{% endhint %}
Before using the **API**, you must retrieve the corresponding DkGrid instance by querying the component's view.
{% tabs %}
{% tab title="row-grouping.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-grouping.component.ts" %}
```typescript
@Component({
selector: 'row-grouping',
templateUrl: './row-grouping.component.html',
styleUrls: ['./row-grouping.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowGroupingComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dkGrid: DkGridComponent;
// ...
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
The **Row-Grouping API** is an instance of type `DkGridRowGrouping` under the [`DikeGridComponent`](/reference/components/dkgridcomponent) through the **read-only** property named `rowGrouping`.
{% endhint %}
The **rowGrouping API** has the following method:
| Method | Description |
| -------------------- | --------------------------------------------------------------------------- |
| `clearRowGrouping()` | This method will move all columns from the group panel to the center panel. |
{% hint style="success" %}
For further details, see the [`DikeGridRowGrouping`](/reference/dkgrid-api/dkgridrowgrouping) definition.
{% endhint %}
{% hint style="success" %}
For further details about the **column API**, see the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef) definition.
{% endhint %}
To see the **API** in action, consider the following UI additions:
{% tabs %}
{% tab title="row-grouping.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-grouping.component.ts" %}
```typescript
onGroupBy(): void {
if (this.columnControl.valid) {
const contentPanelColumn = this.columnControl.value as DikeColumnDef;
this.dikeGrid.columnDef.moveColumnIntoPanel(contentPanelColumn, 'groupPanel');
}
}
onMoveColumn(): void {
if (this.groupByColumnControl.valid) {
const groupPanelColumn = this.groupByColumnControl.value as DikeColumnDef;
this.dikeGrid.columnDef.moveColumnIntoPanel(groupPanelColumn, 'centerPanel');
}
}
onClearGroupPanel(): void {
this.dikeGrid.rowGrouping.clearRowGrouping();
}
```
{% endtab %}
{% endtabs %}
The previous HTML code generates the following output:
With the previous UI, you can do the following actions:
1. First, you can choose a column from the **Content panels** dropdown control. **Draggable**, **groupable**, and **not locked** columns have an icon indicating they can group the DikeGrid rows. After selecting a column, you can click on the **Group by** button, moving the column to the group panel.
2. The **Group panel** dropdown control contains the columns in the group panel. You can choose a column and move it to the center panel by clicking on the related button.
3. You can click on the **Clear group panel** button to move all the columns from the group panel to the center panel.
Be aware that we left all the columns from the content panels enabled, even the column group named **Complete Name**.
{% hint style="warning" %}
You cannot move column groups to the group panel from the UI. Nevertheless, you can use the **column API** to move column groups to the group panel. The column API takes all the data columns from the given column group and inserts those defined as **groupable**, **draggable**, and **not locked**.
{% endhint %}
It is essential to notice that we are **listening** to any change in the **DikeGrid's columns**, attaching a callback to the `contentPanelsColumnsChange` and `groupPanelColumnsChange` events.
{% tabs %}
{% tab title="row-grouping.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-grouping.component.ts" %}
```typescript
onContentColumnsChange(columns: DikeColumnDef[]): void {
this.contentColumns = this.flatColumns(columns);
// Clear the selected column:
this.columnControl.patchValue(null);
}
onGroupColumnsChange(columns: DikeColumnDef[]): void {
this.groupColumns = this.flatColumns(columns);
// Clear the selected column:
this.groupByColumnControl.patchValue(null);
// Update the flag to let us know if the DikeGrid rows are grouped:
this.isDikeGridGroupedBy = columns.length > 0;
}
```
{% endtab %}
{% endtabs %}
Every time we receive a new set of columns, we flat them into a single array, invoking the method `flatColumns()`. So indeed, we are **flattening** the **column groups**, traversing them **recursively**.
{% code title="row-grouping.component.ts" %}
```typescript
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
```
{% endcode %}
If you see the items of the **Content panels** **dropdown** control, you see the columns **Employee Id**, **Country**, **Complete Name**, **Name**, **Surname**, etc.
## Customizing the group panel
You can change the **group panel** **height**, the **height of the columns** displayed in the group panel, and the **Row-Grouping indent width**. Indeed, you can hide the Row-Grouping indent.
{% hint style="success" %}
For further details, see the [Grid Structure - Group panel section](/fundamentals/grid-structure/panels#group-panel).
{% endhint %}
You can open the [Floating Configuration Panel](/#floating-configuration-panel) for the **live demo** and change any mentioned properties.
## Empty values
When the DikeGrid instance groups the rows, the following values are considered empties:
| DikeColumnDataType | Values |
| ------------------- | --------------------------------------------------------------------------- |
| `Text` and `Binary` | `null`, `undefined`, and empty `strings`. |
| `Numeric` | `null`, `undefined`, and `NaN` values. |
| `Date` | `null`, `undefined`, and `Invalid Dates`. |
{% hint style="info" %}
We recommend you define the **getter function** for the columns you define. For further details, see the [Column Definitions](/columns/column-definitions#retrieving-and-updating-a-field-value) section.
{% endhint %}
## Row-Grouping events
Regarding row grouping operation, the DikeGrid instance emits the following events:
| Event | Description |
| ------------------------- | ------------------------------------------------------------------------------------------ |
| `groupPanelColumnsChange` | Every time the user moves a column to, from, and inside the group panel, this event emits. |
| `collapseGroupRowChange` | It emits when the user opens or closes a group row. |
We listen to these two events at the grid scope:
{% tabs %}
{% tab title="row-grouping.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-grouping.component.ts" %}
```typescript
onGroupColumnsChange(columns: DikeColumnDef[]): void {
this.groupColumns = this.flatColumns(columns);
// Clear the selected column:
this.groupByColumnControl.patchValue(null);
// Update the flag to let us know if the DikeGrid rows are grouped:
this.isDikeGridGroupedBy = columns.length > 0;
}
onCollapseGroupRowChange(event: DikeGroupRowCollapseEvent): void {
console.log('DikeGroupRowCollapseEvent: ', event);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
You can listen to these events from the [`DikeGridRowGrouping`](/reference/dkgrid-api/dkgridrowgrouping#events) instance.
{% endhint %}
{% hint style="success" %}
Please, open the **dev console** to see the output of the `collapseGroupRowChange` event.
{% endhint %}
## Summary
Firstly, you must allow the **Row-Grouping** operation at the grid scope by providing an input property named `allowRowGrouping`. Then, to group the DikeGrid rows by a column, you must define that column as **draggable**, **groupable**, and **not locked**.
For row grouping, through the **UI**, you must provide the input property named `allowColumnDragging`.
### Complete code for this section
{% tabs %}
{% tab title="row-grouping.component.html" %}
```markup
{{ value }}
```
{% endtab %}
{% tab title="row-grouping.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { DikeColumnDef, DikeGridComponent, DikeGridDataSourceInput, DikeGroupRowCollapseEvent, isDikeGroupColumnDef } from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'row-grouping',
templateUrl: './row-grouping.component.html',
styleUrls: ['./row-grouping.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowGroupingComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
columnControl: FormControl;
groupByColumnControl: FormControl;
contentColumns: DikeColumnDef[];
groupColumns: DikeColumnDef[];
isDikeGridGroupedBy: boolean;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) {
this.isDikeGridGroupedBy = false;
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
this.columnControl = new FormControl(null, Validators.required);
this.groupByColumnControl = new FormControl(null, Validators.required);
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onContentColumnsChange(columns: DikeColumnDef[]): void {
this.contentColumns = this.flatColumns(columns);
// Clear the selected column:
this.columnControl.patchValue(null);
}
onGroupColumnsChange(columns: DikeColumnDef[]): void {
this.groupColumns = this.flatColumns(columns);
// Clear the selected column:
this.groupByColumnControl.patchValue(null);
// Update the flag to let us know if the DikeGrid rows are grouped:
this.isDikeGridGroupedBy = columns.length > 0;
}
onGroupBy(): void {
if (this.columnControl.valid) {
const contentPanelColumn = this.columnControl.value as DikeColumnDef;
this.dikeGrid.columnDef.moveColumnIntoPanel(contentPanelColumn, 'groupPanel');
}
}
onMoveColumn(): void {
if (this.groupByColumnControl.valid) {
const groupPanelColumn = this.groupByColumnControl.value as DikeColumnDef;
this.dikeGrid.columnDef.moveColumnIntoPanel(groupPanelColumn, 'centerPanel');
}
}
onClearGroupPanel(): void {
this.dikeGrid.rowGrouping.clearRowGrouping();
}
onCollapseGroupRowChange(event: DikeGroupRowCollapseEvent): void {
console.log('DikeGroupRowCollapseEvent: ', event);
}
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Row Pagination
This section describes how to display a fixed amount of rows, in other words, page by page.
## Live example
{% hint style="success" %}
[Row Pagination](https://demos.dikesoft.com/dk-grid/row/pagination) live example.
{% endhint %}
## Allowing pagination
To allow the user to paginate the DikeGrid rows, you must provide an input property named `allowPagination` at the grid scope.
{% code title="row-pagination.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can change the value of the `allowPagination` property at **runtime**.
{% endhint %}
Open the [Floating Configuration Panel](/#floating-configuration-panel) and click on the **Allow Pagination** checkbox.
After enabling the pagination, you will see the DikeGrid **paginator** at the bottom of the content rows.
## Page size
By default, the page size is **50**. You can change this value by providing an input property named `pageSize`.
As you can see in the previous code snippet, we have bound the `pageSize` property to the `gridProperties` object. Therefore, you can open the [Floating Configuration Panel](/#floating-configuration-panel) and change the value for the **page size**.
## Pagination Row
Since the DikeGrid structure uses the **CSS Grid Layout** specification, the paginator is called **Pagination Row**. Indeed, the Pagination Row is the **template-row** definition where the paginator lives.
{% hint style="info" %}
You can change the **height** of the **Pagination Row**. For further details, see the [Grid Structure - Paginator](/fundamentals/grid-structure/paginator#changing-the-pagination-row-height) section.
{% endhint %}
For this section, we have bound the input property `paginationRowHeight` to the related property from the `gridProperties` object.
{% code title="row-pagination.component.html" %}
```markup
```
{% endcode %}
## DikeGrid Pagination API
The DikeGrid internally uses the **MatPaginator** component. Therefore, the DikeGrid definition **wraps** the MatPaginator instance.
Before accessing and using the **pagination API**, you must retrieve the related DikeGrid instance by querying the component's view.
{% tabs %}
{% tab title="row-pagination.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-pagination.component.ts" %}
```typescript
@Component({
selector: 'row-pagination',
templateUrl: './row-pagination.component.html',
styleUrls: ['./row-pagination.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowPaginationComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
// ...
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
The **pagination API** is an instance of type [`DikeGridPagination`](/reference/dkgrid-api/dkgridpagination) under the `DikeGridComponent` through the **read-only** property named `pagination`.
{% endhint %}
The DikeGrid **pagination API** exposes the **MatPaginator** instance through a **read-only** property named **matPaginator**.
{% hint style="info" %}
Retrieving and using the DikeGrid **pagination API** helps in defining a **custom Datasource**.
{% endhint %}
## Pagination events
Every time the user navigates through the available pages, the DikeGrid instance emits a page event.
Since you can allow the pagination at runtime, the pagination API exposes an event that fires the MatPaginator instance.
The **pagination API** exposes the following events:
| Event | Description |
| ----------------- | ----------------------------------------------------------------------------- |
| `pageChange` | This event fires every time the user navigates through the available pages. |
| `paginatorChange` | This event fires when the user allows or disallows the DikeGrid's pagination. |
We are listening to both events:
{% tabs %}
{% tab title="row-pagination.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-pagination.component.ts" %}
```typescript
onPageChange(page: PageEvent): void {
console.log('Page change: ', page);
}
onPaginatorChange(paginator: MatPaginator): void {
console.log('Paginator change: ', paginator);
}
```
{% endtab %}
{% endtabs %}
For the `pageChange` event, the emitted object is the same as the **MatPaginator** sends. For further details, see the [Angular Material official](https://material.angular.io/components/paginator/api) docs.
{% hint style="success" %}
You can also listen to the pagination events from the [`DikeGridPagination`](/reference/dkgrid-api/dkgridpagination#events) instance.
{% endhint %}
{% hint style="success" %}
Open the **dev console** to see the output of the pagination events.
{% endhint %}
## Summary
To perform the pagination operation, you must allow it by providing an input property named `allowPagination`. The DikeGrid definition internally uses the **MatPaginator** component. Therefore, every DikeGrid instance exposes its corresponding MatPaginator instance through the **pagination API**.
### Complete code for this section
{% tabs %}
{% tab title="row-pagination.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-pagination.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { Subscription } from 'rxjs';
import { DikeGridComponent, DikeGridDataSourceInput } from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'row-pagination',
templateUrl: './row-pagination.component.html',
styleUrls: ['./row-pagination.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowPaginationComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(10000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onPageChange(page: PageEvent): void {
console.log('Page change: ', page);
}
onPaginatorChange(paginator: MatPaginator): void {
console.log('Paginator change: ', paginator);
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
# Column Filters
This section describes how to enable filtering for a column and what events are involved.
## Live example
{% hint style="success" %}
[Column Filters](https://demos.dikesoft.com/dk-grid/filtering/column-filters) live example.
{% endhint %}
## Defining a column as filterable
If you want to filter the DikeGrid rows by a column, you must provide an input property named `filterable` for that column definition.
Consider the following column definitions:
{% tabs %}
{% tab title="column-filters.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-filters.component.ts" %}
```typescript
@Component({
selector: 'column-filters',
templateUrl: './column-filters.component.html',
styleUrls: ['./column-filters.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnFiltersComponent implements OnInit, OnDestroy {
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.order = 4;
ageColumn.width = 100;
ageColumn.sortable = true;
ageColumn.filterable = true;
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
hireDateColumn.order = 5;
hireDateColumn.width = 120;
hireDateColumn.sortable = true;
hireDateColumn.filterable = true;
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.order = 6;
emailColumn.width = 250;
emailColumn.sortable = true;
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns([ ageColumn, hireDateColumn, emailColumn ]);
}
}
```
{% endtab %}
{% endtabs %}
As you can see, we defined the columns **Name**, **Age**, and **Hire Date** as **filterable**.
If you open the [Column Context Menu](/fundamentals/grid-structure/column-context-menu) for a **filterable** column, you will see the filter option available.
{% hint style="warning" %}
You can not define a **column group** as filterable.
{% endhint %}
## Initial filter
You can set an initial filter when defining a column.
See the following code:
{% tabs %}
{% tab title="column-filters.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-filters.component.ts" %}
```typescript
@Component({
selector: 'column-filters',
templateUrl: './column-filters.component.html',
styleUrls: ['./column-filters.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnFiltersComponent implements OnInit, OnDestroy {
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.order = 4;
ageColumn.width = 100;
ageColumn.sortable = true;
ageColumn.filterable = true;
ageColumn.groupable = true;
ageColumn.filter = [{
condition: ConditionType.GREATER_THAN,
logicalOperator: 'and',
value1: 50
}];
//...
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns([ ageColumn, hireDateColumn, emailColumn ]);
}
}
```
{% endtab %}
{% endtabs %}
We have set an initial filter for the **Name** column in the **HTML**. For the **Age** column, we defined the initial filter in **code**.
Open the [Column Context Menu](/fundamentals/grid-structure/column-context-menu) for the **Name** or the **Age** column. You will see the filter we have set at creation time.
The type of the object for setting an initial filter depends on the type of the column. For example, the **Age** column is a `Numeric` column. Thus, its filter property is of type `DikeNumericFilter[]`.
When defining an initial filter in the **HTML** template, the filter property is of type `DikeFilter[]`.
{% hint style="success" %}
See the [`DikeFilter`](/reference/interfaces/filtering#dikefilter) hierarchy definition.
{% endhint %}
## Modifying filters
You can **add** or **remove** filter conditions for any column defined as **filterable** through the [Column Context Menu](/fundamentals/grid-structure/column-context-menu).
Let us add a condition for the **Hire Date** column:
{% hint style="info" %}
You can add **any** number of conditions joined by logical operators (**OR**/**AND**).
{% endhint %}
## Filtering execution
### Debounce time
`Text` and `Numeric` columns have a **debounce time** when the user is typing a value to filter the DikeGrid rows. By default, the debounce time is **400** milliseconds.
As you can see, once the time has elapsed, the column sends the filter for its execution.
{% hint style="success" %}
You can change the time you wait for filter execution by providing the Injection Tokens `TEXT_FILTER_DEBOUNCE_TIME` and `NUMERIC_FILTER_DEBOUNCE_TIME`.
{% endhint %}
Let us change the debounce time for `Numeric` types.
{% code title="filtering.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: NUMERIC_FILTER_DEBOUNCE_TIME, useValue: 300 }
]
})
export class FilteringModule { }
```
{% endcode %}
### Filtering on-demand
If you want to control when to send the filter conditions, you can set a flag at grid scope by providing an input property named `onDemandFilter`.
{% code title="column-filters.component.html" %}
```markup
```
{% endcode %}
Since we take the flag value from the `gridProperties` object, please open the [Floating Configuration Panel](/#floating-configuration-panel) and mark the checkbox **on-demand Filter** under the **Filtering** section.
Open the [Column Context Menu](/fundamentals/grid-structure/column-context-menu) for a **filterable** column. Next, you will see the **Filter** button. Click on this button when you have finished defining the filter conditions for the column.
## Filtering using the API
You can achieve all the previous tasks by using the corresponding API.
Before using the API, we have to retrieve the DikeGrid instance from the component's view.
{% tabs %}
{% tab title="column-filters.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-filters.component.ts" %}
```typescript
@Component({
selector: 'column-filters',
templateUrl: './column-filters.component.html',
styleUrls: ['./column-filters.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnFiltersComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
//...
}
```
{% endtab %}
{% endtabs %}
### DikeGrid Column API
Using the **column API,** you can change, at **runtime**, a column definition to be filterable or change its filter conditions.
The following methods belong to the **column API** regarding filtering:
| Method | Description |
| --------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `setColumnFilterablility()` | Use this method to change a column to be **filterable**. You can provide an **initial filter** to be applied. |
| `changeColumnFilter()` | This method sets the given **filter definition** for the given column. |
{% hint style="success" %}
For further details, see the [`DikeGridColumnDef`](/reference/dkgrid-api/dkgridcolumndef#methods) definition.
{% endhint %}
### DikeGrid Filter API
The following methods comprise the **filter API**:
| Method | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------ |
| `clearFilter()` | This method will **remove** all the filter **conditions** from every filterable. |
| `isFilterApplied()` | It returns a **boolean value** indicating if the DikeGrid instance has one filter condition, at least. |
| `getFilteredRows()` | It returns all the **rows** that **meet** all the filter conditions **criteria**. |
{% hint style="success" %}
For further details, see the [`DikeGridFilter`](/reference/dkgrid-api/dkgridfilter#methods) definition.
{% endhint %}
To see the API in action, let us define the following UI:
{% tabs %}
{% tab title="column-filters.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-filters.component.ts" %}
```typescript
onColumnAsFilterable(): void {
// Get the Surname column:
const surnameColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'lastName');
// The column exist and is a data column:
if (!!surnameColumn && isDikeDataColumnDef(surnameColumn)) {
// Toggle the filterable value:
this.dikeGrid.columnDef.setColumnFilterability(surnameColumn, !surnameColumn.filterable);
}
}
onInitialFilter(): void {
// Get the email column:
const emailColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'email');
// The column exist and is a data column:
if (!!emailColumn && isDikeDataColumnDef(emailColumn)) {
// Toggle the filterable value and set an initial filter:
this.dikeGrid.columnDef.setColumnFilterability(emailColumn, !emailColumn.filterable, [{
condition: ConditionType.CONTAINS, logicalOperator: 'and', value: '@gmail.com'
} as DikeTextFilter]);
}
}
onChangeColumnFilter(): void {
// Get the age column:
const ageColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'age');
// The column exist and is a data column:
if (!!ageColumn && isDikeDataColumnDef(ageColumn)) {
// Define the new filter:
const newFilter: DikeNumericFilter[] = [ { condition: ConditionType.EQUALS, logicalOperator: 'or', value1: 23 } ];
// Merge the existing filter with the new one:
const finalFilter: DikeNumericFilter[] = !!ageColumn.filter ? [ ...ageColumn.filter, ...newFilter ] : newFilter;
// Apply the new filter:
this.dikeGrid.columnDef.changeColumnFilter(ageColumn, finalFilter);
}
}
onGetFilterables(): void {
console.log('Filterables: ', this.dikeGrid.filter.filterables);
}
onGetFilteredRows(): void {
console.log('Filtered rows: ', this.dikeGrid.filter.getFilteredRows());
}
onClearFilter(): void {
this.dikeGrid.filter.clearFilter();
}
```
{% endtab %}
{% endtabs %}
The previous definition generates the following output:
In the following list, we describe every button action:
1. **Surname - filterable**. Click on this button to make the **Surname** column filterable or not filterable. It toggles the current filterable value.
2. **Email - Initial filter**. Same as before, it toggles the current filterable value. When the column becomes filterable, the given filter is applied. Otherwise, the DikeGrid instance will ignore the given filter.
3. **Age - Change column filter**. Since the **Age** column is filterable, we change its filter, merging the current condition with the new one. If you click more than once, the action will append the new filter condition to the existing ones.
4. **Filterables**. Clicking on this button will print out, to the **dev console,** the current filterables.
5. **Filtered rows**. Clicking on this button will print out, to the **dev console**, all the rows that meet the filter conditions criteria.
6. **Clear filter**. Clicking on this button will **remove** all the filter conditions.
{% hint style="info" %}
When defining a column as **filterable**, the DikeGrid **registers** that column in an internal **Map** structure named ***filterables***. The items of this Map are of type [`DikeFilterable`](/reference/interfaces/filtering#dikefilterable-less-than-t-greater-than).
{% endhint %}
## Filter Events
When defining a column as **filterable** or **adding/removing** a filter condition, the DikeGrid instance **emits** the related events.
The filter events are:
| Event | Description |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `registerFilterableChange` | It emits when you define a column as **filterable**. Then, the DikeGrid instance will add the column to the internal Map named ***filterables***. |
| `deregisterFilterableChange` | It emits when you make a column **not filterable** when it was **filterable**. Then, the DikeGrid instance will remove the column to the internal Map named ***filterables***. |
| `filterChange` | It emits when the user has **defined/changed** a filter condition. |
| `clearFilterChange` | It emits after the DikeGrid instance has **removed** all the filter conditions. |
Let us listen to these events:
{% tabs %}
{% tab title="column-filters.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-filters.component.ts" %}
```typescript
onRegisterChange(filterable: DikeFilterable): void {
console.log('Register change: ', filterable);
}
onDeregisterChange(filterable: DikeFilterable): void {
console.log('Deregister change: ', filterable);
}
onFilterChange(filterable: DikeFilterable): void {
console.log('Filter change: ', filterable);
}
onClearFilterChange(): void {
console.log('Clear filter - filterables: ', this.dikeGrid.filter.filterables);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
Please, open your **dev console** to see the output of these events.
{% endhint %}
{% hint style="info" %}
You can also listen to these events from the [`DikeGridFilter`](/reference/dkgrid-api/dkgridfilter#events) instance.
{% endhint %}
## Row Grouping and Filtering
When grouping the DikeGrid rows by a column and filtering those rows, you will see the **filter icon** on the right side of the **group** name showing how many data rows for that group have met the filter criteria.
We have **allowed Row-Grouping**, and we have defined the Age column as **groupable**.
{% tabs %}
{% tab title="column-filters.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-filters.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.order = 4;
ageColumn.width = 100;
ageColumn.sortable = true;
ageColumn.filterable = true;
ageColumn.groupable = true;
ageColumn.draggable = true;
ageColumn.filter = [{
condition: ConditionType.GREATER_THAN,
logicalOperator: 'and',
value1: 50
}];
//...
}
```
{% endtab %}
{% endtabs %}
If you **group** the DikeGrid rows by a column with filters, the DikeGrid will **ignore** those filters.
As you can see in the previous output, the DikeGrid **ignores** the filter when **grouping** the DikeGrid rows by the **Age** column despite defining a filter for this column. As a result, the DikeGrid shows all the values for the **Age** column as **groups**.
## Summary
It is enough to define a column as **filterable** to give the user the ability to filter the DikeGrid rows. The user can add any number of filter conditions. By default, `Text` and `Numeric` filter types have a **debounce time**, but you can change this value or send filters **on-demand**.
You can use the **column API** and the **filter API** to perform filtering tasks. All the filter actions emit their corresponding **event**.
### Complete code for this section.
{% tabs %}
{% tab title="column-filters.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-filters.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { ConditionType, DikeDateColumnDef, DikeFilterable, DikeGridColumnDef, DikeGridComponent, DikeGridDataSourceInput,
DikeNumericColumnDef, DikeNumericFilter, DikeTextColumnDef, DikeTextFilter, isDikeDataColumnDef } from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
@Component({
selector: 'column-filters',
templateUrl: './column-filters.component.html',
styleUrls: ['./column-filters.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnFiltersComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.order = 4;
ageColumn.width = 100;
ageColumn.sortable = true;
ageColumn.filterable = true;
ageColumn.groupable = true;
ageColumn.draggable = true;
ageColumn.filter = [{
condition: ConditionType.GREATER_THAN,
logicalOperator: 'and',
value1: 50
}];
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
hireDateColumn.order = 5;
hireDateColumn.width = 120;
hireDateColumn.sortable = true;
hireDateColumn.filterable = true;
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.order = 6;
emailColumn.width = 250;
emailColumn.sortable = true;
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns([ ageColumn, hireDateColumn, emailColumn ]);
}
ngOnInit(): void {
// Get 1000 entries from the REST API:
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onColumnAsFilterable(): void {
// Get the Surname column:
const surnameColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'lastName');
// The column exist and is a data column:
if (!!surnameColumn && isDikeDataColumnDef(surnameColumn)) {
// Toggle the filterable value:
this.dikeGrid.columnDef.setColumnFilterability(surnameColumn, !surnameColumn.filterable);
}
}
onInitialFilter(): void {
// Get the email column:
const emailColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'email');
// The column exist and is a data column:
if (!!emailColumn && isDikeDataColumnDef(emailColumn)) {
// Toggle the filterable value and set an initial filter:
this.dikeGrid.columnDef.setColumnFilterability(emailColumn, !emailColumn.filterable, [{
condition: ConditionType.CONTAINS, logicalOperator: 'and', value: '@gmail.com'
} as DikeTextFilter]);
}
}
onChangeColumnFilter(): void {
// Get the age column:
const ageColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'age');
// The column exist and is a data column:
if (!!ageColumn && isDikeDataColumnDef(ageColumn)) {
// Define the new filter:
const newFilter: DikeNumericFilter[] = [ { condition: ConditionType.EQUALS, logicalOperator: 'or', value1: 23 } ];
// Merge the existing filter with the new one:
const finalFilter: DikeNumericFilter[] = !!ageColumn.filter ? [ ...ageColumn.filter, ...newFilter ] : newFilter;
// Apply the new filter:
this.dikeGrid.columnDef.changeColumnFilter(ageColumn, finalFilter);
}
}
onGetFilterables(): void {
console.log('Filterables: ', this.dikeGrid.filter.filterables);
}
onGetFilteredRows(): void {
console.log('Filtered rows: ', this.dikeGrid.filter.getFilteredRows());
}
onClearFilter(): void {
this.dikeGrid.filter.clearFilter();
}
onRegisterChange(filterable: DikeFilterable): void {
console.log('Register change: ', filterable);
}
onDeregisterChange(filterable: DikeFilterable): void {
console.log('Deregister change: ', filterable);
}
onFilterChange(filterable: DikeFilterable): void {
console.log('Filter change: ', filterable);
}
onClearFilterChange(): void {
console.log('Clear filter - filterables: ', this.dikeGrid.filter.filterables);
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% tab title="filtering.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { DikeDataGridModule, NUMERIC_FILTER_DEBOUNCE_TIME,
CUSTOM_ROW_TEXT_FILTER_CONDITIONS, CustomRowTextCaseFilterCondition, ConditionType,
CUSTOM_TEXT_FILTER_CONDITIONS, CustomTextCaseFilterCondition,
DikeDataColumnDef, DikeTextFilter } from '@dikesoft/angular-data-grid';
import { SharedModule } from 'app/shared/shared.module';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { filteringRoutes } from 'app/modules/admin/filtering/filtering.routing';
import { ColumnFiltersComponent } from './column-filters/column-filters.component';
import { FilterTypesComponent } from './filter-types/filter-types.component';
import { InLineFiltersComponent } from './in-line-filters/in-line-filters.component';
@NgModule({
declarations: [
ColumnFiltersComponent,
FilterTypesComponent,
InLineFiltersComponent
],
imports: [
CommonModule,
RouterModule.forChild(filteringRoutes),
SharedModule,
DikeDataGridModule
],
providers: [
{ provide: NUMERIC_FILTER_DEBOUNCE_TIME, useValue: 300 },
{
provide: CUSTOM_ROW_TEXT_FILTER_CONDITIONS,
useFactory: (): CustomRowTextCaseFilterCondition =>
new CustomRowTextCaseFilterCondition()
.addExistingCondition(ConditionType.ENDS_WITH)
},
{
provide: CUSTOM_TEXT_FILTER_CONDITIONS,
useFactory: (): CustomTextCaseFilterCondition =>
new CustomRowTextCaseFilterCondition()
.addCondition({
text: 'Custom Lower Case',
value: 'global-customLowerCaseText',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeTextFilter): boolean =>
dataColumnDef.getValue(entry).toLowerCase().includes(values.value)
})
}
]
})
export class FilteringModule { }
```
{% endtab %}
{% endtabs %}
# Filter types
This section describes the types of filters and how you can add or overwrite conditions for each of them.
In general, filters depend on the column type where the filter will apply. Therefore, the filter types are `Text`, `Numeric`, `Date`, and `Binary`.
There is another type of filter named `Multiple Selection` filter. But this type of filter can apply to `Text` and `Numeric` filters.
{% hint style="info" %}
See the column types in the [Columns Definitions](/columns/column-definitions#column-types) section.
{% endhint %}
## Live example
{% hint style="success" %}
[Filter types](https://demos.dikesoft.com/dk-grid/filtering/filter-types) live example.
{% endhint %}
## Filter conditions
The following table shows the existing filter types and the conditions that apply for each of them:
| Filter type | Conditions |
| -------------------- | ----------------------------------------------------------------------------------------------------------- |
| `Text` | Empty, Equals, Not Equals, Contains, Not Contains, Starts With, and Ends With. |
| `Numeric` | Empty, Equals, Not Equals, Less Than, Less Than or Equals, Greater Than, Greater Than Or Equals, and Range. |
| `Date` | Empty, Equals, Not Equals, Less Than, Less Than or Equals, Greater Than, Greater Than Or Equals, and Range. |
| `Binary` | Empty, Equals, and Not Equals. |
| `Multiple Selection` | Empty, Equals, and Not Equals. |
## Customizing filter conditions
Since filter execution comes down to evaluating every filter condition against the data set, you will see how to implement your filter conditions per column or at the grid scope.
{% hint style="info" %}
All **custom** instances do not have any defined condition. You must add or implement every filter condition.
{% endhint %}
{% hint style="success" %}
When defining a custom condition, you must implement an object of type [`Condition`](/reference/interfaces/filtering#condition-less-than-t-r-v-greater-than).
{% endhint %}
### Text Filter
You must provide an instance of type [`CustomTextCaseFilterCondition`](/reference/classes/filtering#customtextcasefiltercondition-less-than-t-greater-than) when defining a column.
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
@Component({
selector: 'filter-types',
templateUrl: './filter-types.component.html',
styleUrls: ['./filter-types.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FilterTypesComponent implements OnInit, OnDestroy {
nameConditions: CustomTextCaseFilterCondition;
ngOnInit(): void {
// We only add Contains and Not Contains filter conditions to the Name column:
this.nameConditions = new CustomTextCaseFilterCondition()
.addExistingCondition(ConditionType.CONTAINS)
.addExistingCondition(ConditionType.NOT_CONTAINS)
// And we provide our Starts With implementation:
.addCondition({
text: 'My Starts With',
value: ConditionType.STARTS_WITH,
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeTextCaseFilter) =>
entry.firstName.toLocaleLowerCase().startsWith(values.value.toLowerCase())
});
}
}
```
{% endtab %}
{% endtabs %}
We added only two conditions to the **Name** column: **Contains** and **Not Contains**. We also added our custom implementation of the **StartsWith** condition.
{% hint style="warning" %}
The `customFilterConditions` property of the [`DikeGridColumnComponent`](/reference/components/dkgridcolumncomponent#properties) is of type [`CustomFilterConditionInstance`](/reference/type-aliases/filtering#customfilterconditioninstance-less-than-t-greater-than). Therefore, be aware of assigning the correct custom instance.
{% endhint %}
### Numeric Filter
You must provide a [`CustomNumericFilterCondition`](/reference/classes/filtering#customnumericfiltercondition-less-than-t-greater-than) instance for numeric types when defining a column.
For the **Age** column, let us define a filter that gives us all the numbers outside a close interval.
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.order = 3;
ageColumn.width = 100;
ageColumn.filterable = true;
ageColumn.sortable = true;
ageColumn.customFilterConditions = new CustomNumericFilterCondition()
.addCondition({
text: 'Not In Close Interval [value1, value2]',
value: 'not-in-range-interval',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeNumericFilter) =>
!(entry.age >= values.value1 && entry.age <= values.value2)
});
//...
}
```
{% endtab %}
{% endtabs %}
Notice how we have added the word ***range*** in the condition value (**not-in-range-interval**). If you omit the *range* word, the UI will not show the second textbox for typing a numeric value.
### Date Filter
You must provide a [`CustomDateFilterCondition`](/reference/classes/filtering#customdatefiltercondition-less-than-t-greater-than) instance for `Date` types when defining a column.
{% hint style="info" %}
A Date Filter has the same conditions as a Numeric Filter.
{% endhint %}
Let us define some custom conditions for the **Hire Date** column:
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
hireDateColumn.order = 5;
hireDateColumn.width = 120;
hireDateColumn.sortable = true;
hireDateColumn.filterable = true;
hireDateColumn.customFilterConditions = new CustomDateFilterCondition()
.addExistingCondition(ConditionType.GREATER_THAN)
.addExistingCondition(ConditionType.LESS_THAN)
.addCondition({
text: 'Close Interval',
value: 'close-range-interval',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeDateFilter) =>
entry.hireDate >= values.value1 && entry.hireDate <= values.value2
});
//...
}
```
{% endtab %}
{% endtabs %}
We have added two existing conditions in the previous example: **Greater Than** and **Less Than**. We also defined a custom condition: **Close Interval**. Same as before, we added the word ***range*** to the value of the custom condition.
{% hint style="warning" %}
As you can see, the DikeGrid uses the native `Date` type. So do not forget to import the `MatNativeDateModule` or a custom implementation instead.
{% endhint %}
### Binary Filter
With the Binary Filter, the user must select between two options only. Furthermore, those options are mutually exclusive by definition.
{% hint style="info" %}
For filtering, the DikeGrid casts Binary Filters values to string values.
{% endhint %}
If you only define a `Binary` column as **filterable**, you will see the filters options as shown in the following screenshot:
Let us define options according to our values in our data set for the **Gender** column. For `Binary` columns, we have to provide a [`CustomBinaryFilterCondition`](/reference/classes/filtering#custombinaryfiltercondition-less-than-t-greater-than) instance to add or overwrite conditions.
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Gender column:
const genderColumn = new DikeBinaryColumnDef('gender', 'Gender');
genderColumn.order = 4;
genderColumn.width = 110;
genderColumn.sortable = true;
genderColumn.filterable = true;
genderColumn.customFilterConditions = new CustomBinaryFilterCondition()
.addExistingCondition(ConditionType.EQUALS)
.addExistingCondition(ConditionType.NOT_EQUALS);
// Then, add the visible options:
genderColumn.customFilterConditions.options = [ { label: 'Female', value: 'female' }, { label: 'Male', value: 'male', selected: true } ];
}
```
{% endtab %}
{% endtabs %}
We have defined the following features with the previous code snippet:
1. We added **Equals** and **Not Equals** conditions. If you try adding a **non-valid** condition, the DikeGrid will only **add** **valid** filter conditions.
2. We have defined our **labels** and **values** according to the **Gender** column values.
3. Notice how we have added an **initial filter** for the **Gender** column. We tell our DikeGrid that filters the data set with a male value setting the `selected` property to true.
The previous filter definition generates the following output:
{% hint style="info" %}
Options for Binary custom filters are of type [`DikeBinarySelectionModel`](/reference/interfaces/filtering#dikebinaryselectionmodel), and you can only provide **two** options. If you offer more than two options, DikeGrid will ignore them.
{% endhint %}
{% hint style="danger" %}
If you try to add a condition different from **Equals**, **Not Equal**, or **Empty**, the DikeGrid will throw an error. You can only overwrite the mentioned conditions.
{% endhint %}
### Multiple Selection
In some cases, you want the user to select several options but a fixed number of options.
Consider the following definitions in the evaluation of the conditions:
| Condition | Evaluation |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equals | The DikeGrid evaluates the selected options with the **OR** logical operator. |
| Not Equals | The DikeGrid evaluates the selected options with the **AND** logical operator. Then, it takes the **complement** of the result set. |
| Empty | If you add the Empty condition, it will appear as a checkbox indicating if the filtering operation **includes** or **excludes** the empty values. The latter depends on the Equals or Not Equals selection, respectively. |
#### Multiple Text Filter
For Multiple Text Filter conditions, you must provide a [`CustomMultipleTextFilterCondition`](/reference/classes/filtering#custommultipletextfiltercondition-less-than-t-greater-than) instance to a `Text` column type.
Let us define a Multiple Text Filter for the **Surname** column:
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
@Component({
selector: 'filter-types',
templateUrl: './filter-types.component.html',
styleUrls: ['./filter-types.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FilterTypesComponent implements OnInit, OnDestroy {
surnameConditions: CustomMultipleTextFilterCondition;
ngOnInit(): void {
// We add all the valid conditions for Multiple Selection filters:
this.surnameConditions = new CustomMultipleTextFilterCondition()
.addExistingCondition(ConditionType.EMPTY)
.addExistingCondition(ConditionType.EQUALS)
.addExistingCondition(ConditionType.NOT_EQUALS);
// And we have added several options:
this.surnameConditions.options = [
{ label: 'Abbott', value: 'Abbott' },
{ label: 'Adams', value: 'Adams' },
{ label: 'Bahringer', value: 'Bahringer' },
{ label: 'Balistreri', value: 'Balistreri' },
{ label: 'Beier', value: 'Beier' },
{ label: 'Bernier', value: 'Bernier' },
{ label: 'Dare', value: 'Dare' },
{ label: 'Gutkowski', value: 'Gutkowski' },
{ label: 'Herman', value: 'Herman' },
{ label: 'Lockman', value: 'Lockman' },
{ label: 'Marvin', value: 'Marvin' },
{ label: 'Parker', value: 'Parker' },
{ label: 'Reynolds', value: 'Reynolds' },
{ label: 'Ritchie', value: 'Ritchie' },
{ label: 'Schmidt', value: 'Schmidt' },
{ label: 'Thompson', value: 'Thompson' },
{ label: 'Walker', value: 'Walker' },
{ label: 'Williamson', value: 'Williamson' },
{ label: 'Zulauf', value: 'Zulauf' }
];
}
}
```
{% endtab %}
{% endtabs %}
With the previous code snippet:
1. We have added the **Empty**, **Equals**, and **Not Equals** filter conditions.
2. We have defined several options from which the user can select.
3. We could have provided an initial filter **selecting** more than one option.
{% hint style="info" %}
You can provide any number of options for **Multiple Text Filter**. The array you provide is of type [`DikeTextSelectionModel`](/reference/interfaces/filtering#diketextselectionmodel).
{% endhint %}
#### Multiple Numeric Filter
For Multiple Numeric Filter conditions, you must provide a [`CustomMultipleNumericFilterCondition`](/reference/classes/filtering#custommultiplenumericfiltercondition-less-than-t-greater-than) instance to a `Numeric` column type.
Let us define a Multiple Text Filter for the **Performance** column:
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Performance column:
const performanceColumn = new DikeNumericColumnDef