Custom dialog when click on smar-grid cell (Angular)

[admin]

Hi,
I am evaluating the HTML UI Element. Now trying to create a custom dialog box when selecting a grid cell. The following is a summary of the issues that I encountered:
a) I have a child angular component which has a “smart-grid” custom tag. In the typescript file, I initialize the smart-grid in the ngAfterViewInit() function. In the function, I also attach a cellClick listener (which is firing).
<div>
<div>this.grid.addEventListener(‘cellClick’, function (event: CustomEvent) {</div>
<div>
<div>
<div>  const gridCell = <GridCell>event.detail.cell;</div>
</div>
</div>
<div>  this.myClicked.emit(gridCell);</div>
<div>});</div>
<div>b) In the same component, I have an Output emitter</div>
<div>
<div>
<div>@Output() myClicked: EventEmitter<any> = new EventEmitter();</div>
<div>c) I tried to emit the output variable in the addEventListener function (as per (a)). It is however, it always return with the “undefined myClicked error”. I think the issues might be something to do with web component integration with Angular. I tried to declare any variable outside the ‘cellClick’ callback function, and use it within the ‘cellClick’ function, and, the result is, the callback function can’t use any angular variables.</div>
<div>d) The idea of emitting the event, is that the parent component can display a custom dialog box (with custom gridCell data) when someone click on the grid cell.</div>
<div>e) And after checking the API documentation, in order for me to use the events of grid and other web component, it always attached event to the web compoent via addEventListener.</div>
<div></div>
<div>Thus, for me to use the htmlelements components, I need your help, that, how can I use any angular variables within the addEventListener function.</div>
<div></div>
</div>
<div>I hope to hear from you, of course, as usual, as promptly as possible.</div>
<div></div>
</div>
<div>Best regards</div>
</div>
<div></div>
<div>-vinci-</div>
<div></div>

[admin]

I am evaluating the HTML UI Element. Now I am trying to create a custom dialog box when selecting a grid cell. The following is a summary of the issues that I encountered:
a) I have a child angular component that has a “smart-grid” custom tag. In the typescript file, I initialize the smart-grid in the ngAfterViewInit() function. In the function, I also attach a cellClick listener (which is firing).
this.grid.addEventListener(‘cellClick’, function (event: CustomEvent) {
const gridCell = <GridCell>event.detail.cell;
this.myClicked.emit(gridCell);
});
b) In the same component, I have an Output emitter
@Output() myClicked: EventEmitter<any> = new EventEmitter();
c) I tried to emit the output variable in the addEventListener function (as per (a)). It is however, it always return with the “undefined myClicked error”. I think the issues might be something to do with web component integration with Angular. I tried to declare any variable outside the ‘cellClick’ callback function, and use it within the ‘cellClick’ function, and, the result is, the callback function can’t use any angular variables.
d) The idea of emitting the event, is that the parent component can display a custom dialog box (with custom gridCell data) when someone click on the grid cell.
e) And after checking the API documentation, in order for me to use the events of grid and other web component, it always attached event to the web compoent via addEventListener.
Thus, for me to use the htmlelements components, I need your help, that, how can I use any angular variables within the addEventListener function.
I hope to hear from you, of course, as usual, as promptly as possible.
Best regards
-vinci-

[Hristofor]

Hi vinci goh,
After following your steps in order to create a test demo, we didn’t encounter any issues whatsoever. So I will share the full code for the demo so you can have a look at how to implement the input/output parent-child behavior in your working scenario:
Here’s the HTML of the ‘child-component.component.html’:

<smart-grid #grid></smart-grid>

Here’s the ‘child-component.component.ts’:

import { Component, ViewChild, AfterViewInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { GridComponent, GridColumn, DataAdapter, Smart, GridCell } from 'smart-webcomponents-angular/grid';
import { GetData } from '../../../common/data'
@Component({
	selector: 'app-child-component',
	templateUrl: './child-component.component.html',
	styleUrls: ['child-component.component.css'],
	encapsulation: ViewEncapsulation.None
})
export class ChildComponent implements AfterViewInit {
	@ViewChild("grid", { read: GridComponent, static: false }) grid: GridComponent;
	@Output() myClicked: EventEmitter<any> = new EventEmitter<any>();
	ngAfterViewInit(): void {
		const that = this;
		that.grid.dataSource = new Smart.DataAdapter(
			<DataAdapter>{
				dataSource: GetData(500),
				dataFields:
					[
						'id: number',
						'firstName: string',
						'lastName: string',
						'productName: string',
						'quantity: number',
						'price: number',
						'total: number'
					]
			});
		that.grid.columns =
			<GridColumn[]>[
				{ label: 'First Name', dataField: 'firstName', columnGroup: 'name' },
				{ label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
				{ label: 'Product', dataField: 'productName', columnGroup: 'order' },
				{ label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
				{ label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order' },
				{ label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order' }
			];
		that.grid.paging.enabled = true;
		that.grid.pager.visible = true;
		that.grid.selection = {
			enabled: true,
			allowCellSelection: true,
			allowRowHeaderSelection: true,
			allowColumnHeaderSelection: true,
			mode: 'extended'
		};
		that.grid.addEventListener('cellClick', function (event: CustomEvent) {
			const gridCell = <GridCell>event.detail.cell;
			that.myClicked.emit(gridCell.element);
		});
	}
}

Here’s the ‘app.component.html’:

<app-child-component (myClicked)="log($event)"></app-child-component>

Here’s the ‘app.component.ts’:

import { Component, ViewChild, AfterViewInit, ViewEncapsulation, Input } from '@angular/core';
@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['app.component.css'],
	encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
	log(gridCell: any) {
		console.log(gridCell);
	}
}

The example shows how to emit the clicked grid cell element to the parent component but you can replace that with any details for the cell you need. If you need further assistance or have any questions feel free to ask.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi, Christopher,
Thank you for the prompt reply.
I tested the code provided by you. It works.
 
Best regards
-vinci-

[Author]

Posts