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. With the help of the forms positioned on the right side of the screen, you can change dynamically data of the grid. 'New Project' form allows you to add a new project to the projects list, whereas the 'Project details' lets you change or delete already created project. You can click on one of the projects to pass its values to the 'Project details' form and then change the given data as you please.

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

New Project

Project details

Source Code

In this source code example, we are changing dynamically the grid  source. We are using both forms to get the values we need and then push or edit changes to the grid data source.

One of the grid features is to get the selected grid item values with a simple click on the item. It is done with a help of itemsSelected output. The main thing to point out is that this function returns an array. Therefore,  to get the selected grid item values, you have to pass an array index number to it, which in this case is - projects[0]. In the fillEditProjectForm() function, we have to add the if(!this.selectedProject) condition. It checks if the selected item has been unselected and if true, it resets the edit form values.

The ProjectRepository is a simple service, that stores projects list presented in the grid and also has 'CRUD' functions.

dynamic-data-grid.html
dynamic-data-grid.ts
projects.ts
ProjectRepository
<div class="dd-container">

	<div class="gweb-dynamic-data-grid">

		<gui-grid (itemsSelected)="onItemSelected($event)"
				  [columns]="columns"
				  [source]="source"
				  [sorting]="true"
				  [cellEditing]="true">
		</gui-grid>

	</div>

	<div class="gweb-dynamic-data-form">

		<div class="new-project">

			<form [formGroup]="createProjectForm" class="create-form">

				<h3>New Project</h3>

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

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

				<label>
					Start date:
					<input formControlName="startDate" gui-input>
				</label>

				<label>
					End date:
					<input formControlName="endDate" gui-input>
				</label>

				<label>
					Progress:
					<input formControlName="progress" gui-input>
				</label>

				<div class="form-buttons">
					<button (click)="createProject()"
							[disabled]="!createProjectForm.valid"
							gui-button
							type="submit">
						Create
					</button>
				</div>

			</form>
		</div>

		<div class="project-details">

			<form [formGroup]="editProjectForm" class="edit-form">

				<h3>Project details</h3>

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

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

				<label>
					Start date:
					<input formControlName="startDate" gui-input>
				</label>

				<label>
					End date:
					<input formControlName="endDate" gui-input>
				</label>

				<label>
					Progress:
					<input formControlName="progress" gui-input>
				</label>

				<div class="form-buttons">
					<button (click)="changeProjectDetails()"
							[disabled]="!editProjectForm.valid"
							gui-button>
						Edit
					</button>
					<button (click)="deleteProject()"
							[disabled]="!selectedProject"
							gui-button>
						Delete
					</button>
				</div>

			</form>

		</div>

	</div>

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

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

import { Project } from '../common/data/project';
import { ProjectRepository } from '../common/data/project.repository';

import { EditProjectRequest } from '../common/edit-project.request';
import { CreateProjectRequest } from '../common/create-project.request';

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

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

	source: Array<any> = [];

	createProjectForm: FormGroup;

	editProjectForm: FormGroup;

	selectedProject: Project;

	constructor(private projectRepository: ProjectRepository,
				private formBuilder: FormBuilder) {
	}

	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.editProjectForm = this.formBuilder.group({
			'id': [''],
			'name': ['', [Validators.required]],
			'leader': ['', [Validators.required]],
			'startDate': ['', [Validators.required]],
			'endDate': ['', [Validators.required]],
			'progress': ['', [Validators.min(0), Validators.max(100)]]
		});

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

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

		this.projectRepository.addProject(request);

		this.createProjectForm.reset();
	}

	changeProjectDetails(): void {

		let request = new EditProjectRequest.fromForm(this.editProjectForm.value);

		this.projectRepository.editProject(request);
		this.selectedProject = null;
		this.editProjectForm.reset();
	}

	deleteProject(): void {

		this.projectRepository.removeProject(this.selectedProject.id);
		this.editProjectForm.reset();
	}

	onItemSelected(projects: Array<Project>): void {

		this.selectedProject = projects[0];
		this.fillEditProjectForm();
	}

	private fillEditProjectForm(): void {

		if (!this.selectedProject) {
			this.editProjectForm.reset();
			return;
		}

		this.editProjectForm.get('id').setValue(this.selectedProject.id);
		this.editProjectForm.get('name').setValue(this.selectedProject.name);
		this.editProjectForm.get('leader').setValue(this.selectedProject.leader);
		this.editProjectForm.get('startDate').setValue(this.selectedProject.startDate);
		this.editProjectForm.get('endDate').setValue(this.selectedProject.endDate);
		this.editProjectForm.get('progress').setValue(this.selectedProject.progress);
	}

}
export class Project {

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

}

export const projects = [
	new Project('#1', 'Build a House', 'Chuck Norris', '01/12/1997', '01/12/1999', 43),
	new Project('#2', 'Start online book store', 'Jeff', '05/07/1994', '09/01/2000', 90),
	new Project('#3', 'Build a space station', 'Elon', '06/05/2002', '24/11/2098', 39),
	new Project('#4', 'Create operation system', 'Bill', '08/06/1983', '20/11/1985', 24),
	new Project('#5', 'Make online music store', 'Steve', '13/09/1999', '09/01/2001', 80),
	new Project('#6', 'Develop online radio broadcast', 'Mark', '08/09/1995', '01/04/1999', 58),
	new Project('#7', 'Start a vending machine business', 'Warren', '01/02/1952', '01/03/1952', 90),
	new Project('#8', 'Start a dojo', 'Steven', '02/12/1986', '04/04/1995', 82),
	new Project('#9', 'Make a transportation app', 'Adam', '03/06/2009', '04/02/2014', 32),
	new Project('#10', 'Start a pod-cast show', 'Joe', '03/01/2010', '01/07/2017', 99),
	new Project('#11', 'Build a car', 'Robert', '01/02/1999', '02/03/2001', 1),
	new Project('#12', 'Re-evaluate the number of stars', 'Neil', '01/01/2001', '02/03/2006', 100),
	new Project('#13', 'Build a wall', 'Donald', '01/02/2017', '01/03/2020', 40),
	new Project('#14', 'Start a shoe company', 'Al', '02/10/1995', '02/11/1997', 2),
	new Project('#15', 'Build a new cell phone', 'Wang Wei', '01/12/2004', '02/11/2016', 70),
	new Project('#16', 'Create a board game', 'Elizabeth', '02/11/1976', '01/12/1977', 72),
	new Project('#17', 'Build a dishwasher', 'Anna', '02/12/1982', '03/02/1984', 30),
	new Project('#18', 'Invent fire proof material', 'Patricia', '02/03/1999', '01/03/2002', 75),
	new Project('#19', 'Build a reinforced body suit', 'Stephanie', '01/02/1975', '05/02/1983', 92),
	new Project('#20', 'Create a battery', 'Olga', '02/03/1972', '23/05/1986', 50)
];
import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';

import { Project } from './project';
import { projects } from './projects';

import { EditProjectRequest } from '../edit-project.request';
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();
	}

	removeProject(id: string): boolean {

		const result = this.projects.delete(id);

		this.emitProjects();

		return result;
	}

	editProject(request: EditProjectRequest): void {

		const project = new Project(
			request.id,
			request.name,
			request.leader,
			request.startDate,
			request.endDate,
			request.progress);

		this.projects.set(request.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.