Back

Dynamic data example

Platform:Angular

In this Generic UI example you can learn how to dynamically change the grid data source. On the grid below you can see a list of projects. Each project has some basic data information like: 'name', 'leader', 'start date', 'end date' and progress. 'New Project' form allows you to add a new entry to the projects list. To change project data inside grid simply click on any cell and type in a new value.

The source code at the bottom of this page shows how to manipulate Generic UI data source.

New Project

Source Code

dynamic-data-grid.html
dynamic-data-grid.ts
projects.ts
ProjectRepository
<div class="tw-grid tw-grid-cols-auto-fit-330 tw-gap-6">

	<gui-grid *ngIf="isBrowser"
			  [cellEditing]="true"
			  [columns]="columns"
			  [maxHeight]="450"
			  [sorting]="true"
			  [source]="source"
			  class="tw-col-span-2">
	</gui-grid>

	<form [formGroup]="createProjectForm" class="tw-max-w-sm tw-border tw-p-6">

		<h3>New Project</h3>

		<label class="tw-grid">
			Project name:
			<input formControlName="name" gui-input>
		</label>

		<label class="tw-grid">
			Project leader:
			<input formControlName="leader" gui-input>
		</label>

		<label class="tw-grid">
			Start date:
			<input gui-input formControlName="startDate" type="date">
		</label>

		<label class="tw-grid">
			End date:
			<input gui-input formControlName="endDate" type="date">
		</label>

		<label class="tw-grid">
			Progress:
			<mat-slider [formControlName]="'progress'"
						thumbLabel
						tickInterval="10"
						step="1"
						min="0"
						max="100"></mat-slider>
		</label>


		<button (click)="createProject()"
				[disabled]="!createProjectForm.valid"
				gui-button
				type="submit"
				class="tw-mt-6">
			Add
		</button>

	</form>

</div>
import { AfterViewInit, ChangeDetectionStrategy, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { GuiCellView, GuiColumn, GuiDataType } from '@generic-ui/ngx-grid';

import { Project } from '../common/data/project';
import { ProjectRepository } from '../common/data/project.repository';
import { CreateProjectRequest } from '../common/create-project.request';
import { isPlatformBrowser } from '@angular/common';
import { HighlightService } from '../../../../common/prism/highlight.service';


@Component({
	selector: 'gw-example-dynamic-data-grid',
	templateUrl: `./example-dynamic-data-grid.component.html`,
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleDynamicDataGridComponent implements OnInit, AfterViewInit {

	columns: Array<GuiColumn> = [{
		header: 'Project Name',
		field: 'name'
	}, {
		header: 'Leader',
		field: 'leader'
	}, {
		header: 'Start Date',
		field: 'startDate',
		type: GuiDataType.DATE
	}, {
		header: 'End Date',
		field: 'endDate',
		type: GuiDataType.DATE
	}, {
		header: 'Progress',
		field: 'progress',
		type: GuiDataType.NUMBER,
		view: GuiCellView.PERCENTAGE_BAR
	}];

	source: Array<any> = [];

	createProjectForm: FormGroup;

	selectedProject: Project;

	isBrowser = false;

	constructor(@Inject(PLATFORM_ID) private platformId: any,
				private projectRepository: ProjectRepository,
				private formBuilder: FormBuilder,
				private highlightService: HighlightService) {
		this.isBrowser = isPlatformBrowser(platformId);
	}

	ngOnInit() {
		this.createProjectForm = this.formBuilder.group({
			'name': ['', [Validators.required]],
			'leader': ['', [Validators.required]],
			'startDate': ['', [Validators.required]],
			'endDate': ['', [Validators.required]],
			'progress': ['', [Validators.required, Validators.min(0), Validators.max(100)]]
		});

		this.projectRepository
			.getAll()
			.subscribe((projects: Array<Project>) => {
				this.source = projects;
			});
	}

	ngAfterViewInit() {
		this.highlightService.highlightAll();
	}

	createProject(): void {
		let request = new CreateProjectRequest.fromForm(this.createProjectForm.value);

		this.projectRepository.addProject(request);

		this.createProjectForm.reset();
	}
}

export class Project {

	constructor(readonly id: string,
				readonly name: string,
				readonly leader: string,
				readonly startDate: Date,
				readonly endDate: Date,
				readonly progress: number) {
	}

}

export const projects = [
	new Project('#1', 'Build a House', 'Chuck Norris', new Date(2012, 0, 1), new Date(2013, 0, 1), 43),
	new Project('#2', 'Start online book store', 'Jeff', new Date(2019, 0, 1), new Date(2020, 6, 1), 90),
	new Project('#3', 'Build a space station', 'Elon', new Date(1999, 5, 12), new Date(2015, 0, 1), 39),
	new Project('#4', 'Create operation system', 'Bill', new Date(2004, 3, 12), new Date(2007, 4, 12), 24),
	new Project('#5', 'Make online music store', 'Steve', new Date(2001, 2, 12), new Date(204, 8, 12), 80),
	new Project('#6', 'Develop online radio broadcast', 'Mark', new Date(2011, 5, 12), new Date(2011, 9, 12), 58),
	new Project('#7', 'Start a vending machine business', 'Warren', new Date(2011, 5, 12), new Date(2018, 5, 12), 90),
	new Project('#8', 'Start a dojo', 'Steven', new Date(2001, 5, 12), new Date(2002, 5, 12), 82),
	new Project('#9', 'Make a transportation app', 'Adam', new Date(1987, 5, 12), new Date(1989, 1, 12), 32),
	new Project('#10', 'Start a pod-cast show', 'Joe', new Date(1982, 5, 12), new Date(1999, 3, 12), 99),
	new Project('#11', 'Build a car', 'Robert', new Date(2002, 5, 12), new Date(2003, 5, 12), 1),
	new Project('#12', 'Re-evaluate the number of stars', 'Neil', new Date(2009, 5, 12), new Date(2015, 5, 12), 100),
	new Project('#13', 'Build a wall', 'Donald', new Date(2015, 5, 12), new Date(2016, 5, 12), 40),
	new Project('#14', 'Start a shoe company', 'Al', new Date(2018, 5, 12), new Date(2020, 5, 12), 2),
	new Project('#15', 'Build a new cell phone', 'Wang Wei', new Date(2019, 5, 12), new Date(2021, 5, 12), 70),
	new Project('#16', 'Create a board game', 'Elizabeth', new Date(2005, 5, 12), new Date(2006, 5, 12), 72),
	new Project('#17', 'Build a dishwasher', 'Anna', new Date(2001, 5, 12), new Date(2010, 5, 12), 30),
	new Project('#18', 'Invent fire proof material', 'Patricia', new Date(2003, 5, 12), new Date(2004, 5, 12), 75),
	new Project('#19', 'Build a reinforced body suit', 'Stephanie', new Date(2001, 5, 12), new Date(2003, 5, 12), 92),
	new Project('#20', 'Create a battery', 'Olga', new Date(2003, 5, 12), new Date(2008, 5, 12), 50)
];
import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';

import { Project } from './project';
import { projects } from './projects';
import { CreateProjectRequest } from '../create-project.request';

@Injectable()
export class ProjectRepository {

	private readonly projects = new Map<string, Project>();

	private readonly projects$ = new ReplaySubject<Array<Project>>(1);

	constructor() {
		this.initProjects();
	}

	getAll(): Observable<Array<Project>> {
		return this.projects$.asObservable();
	}

	addProject(request: CreateProjectRequest): void {

		const id = `#$ {this.createId() + 1}`,
			project = new Project(
				id,
				request.name,
				request.leader,
				request.startDate,
				request.endDate,
				request.progress);

		this.projects.set(project.id, project);
		this.emitProjects();
	}

	private initProjects(): void {
		for (let project of projects) {
			this.projects.set(project.id, project);
		}
		this.emitProjects();
	}

	private emitProjects(): void {
		const projects = Array.from(this.projects as any, (v: Project) => v[1]);
		this.projects$.next(projects);
	}

	private createId(): number {

		const projectIds = Array.from(this.projects as any, (v: Project) => v[0]);

		let idNumbers = [];

		for (let i = 0; i < projectIds.length; i++) {
			let idNumber = projectIds[i].replace(/^\D+/g, '');
			idNumbers.push(idNumber);
		}

		return Math.max.apply(Math, idNumbers);
	}
}

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.