Skip to content

Commit 168e2f9

Browse files
author
pipeline
committed
feature(EJ2-2894): row, column and detail template sample added.
1 parent 538004e commit 168e2f9

20 files changed

+358
-4
lines changed

‎src/button/default.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
</div>
5959
<div id="description">
6060
<p>
61-
Button is used to perform an action by clicking it. It supports both text and icons.
61+
Button is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.
6262
</p>
6363
<p>
6464
In this sample, Play button is a toggle button and it can been enabled using <b>isToggle</b> property. To change text and icon you have to handle click event.

‎src/grid/columntemplate.component.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Component, OnInit, Inject, ViewEncapsulation } from '@angular/core';
2+
import { employeeData } from './data';
3+
4+
@Component({
5+
selector: 'ej2-gridcolumntemplate',
6+
templateUrl: 'columntemplate.html',
7+
styleUrls: ['columntemplate.style.css'],
8+
encapsulation: ViewEncapsulation.None
9+
})
10+
export class ColumnTemplateComponent implements OnInit {
11+
public data: Object[];
12+
13+
constructor(@Inject('sourceFiles') private sourceFiles: any) {
14+
sourceFiles.files = ['columntemplate.style.css'];
15+
}
16+
17+
ngOnInit(): void {
18+
this.data = employeeData;
19+
}
20+
21+
}

‎src/grid/columntemplate.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="control-section">
2+
<ej-grid #grid [dataSource]='data'>
3+
<e-columns>
4+
<e-column headerText='Employee Image' width='150' textAlign='center'>
5+
<template #template let-data>
6+
<div class="image">
7+
<img src="src/grid/images/{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}"/>
8+
</div>
9+
</template>
10+
</e-column>
11+
<e-column field='EmployeeID' headerText='Employee ID' width='125' textAling='right'></e-column>
12+
<e-column field='FirstName' headerText='Name' width='120'></e-column>
13+
<e-column field='Title' headerText='Title' width='170'></e-column>
14+
<e-column field='HireDate' headerText='Hire Date' width='135' textAling='right' format='yMd'></e-column>
15+
<e-column field='ReportsTo' headerText='Reports To' width='120' textAling='right'></e-column>
16+
</e-columns>
17+
18+
</ej-grid>
19+
20+
<div id="description">
21+
<p>
22+
The Grid provides a way to use a custom layout for each cell using column template feature. The
23+
<code><a target="_blank" class="code"
24+
href="http://ej2.syncfusion.com/documentation/grid/api-column.html#template-string">columns->template
25+
</a></code> property accepts the template for the particular cell.
26+
</p>
27+
<p>
28+
In this demo, using column template, we have presented <strong>Employee Image</strong> column as template column.
29+
</p>
30+
</div>
31+
</div>

‎src/grid/columntemplate.style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.image img {
2+
height: 55px;
3+
width: 55px;
4+
border-radius: 50px;
5+
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
6+
}

‎src/grid/detailtemplate.component.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component, OnInit, Inject, ViewEncapsulation } from '@angular/core';
2+
import { employeeData } from './data';
3+
import { DetailRowService } from '@syncfusion/ej2-ng-grids';
4+
import { Internationalization } from '@syncfusion/ej2-base';
5+
6+
let instance: Internationalization = new Internationalization();
7+
8+
@Component({
9+
selector: 'ej2-griddetailtemplate',
10+
templateUrl: 'detailtemplate.html',
11+
styleUrls: ['detailtemplate.style.css'],
12+
providers: [DetailRowService],
13+
encapsulation: ViewEncapsulation.None
14+
})
15+
export class DetailTemplateComponent implements OnInit {
16+
public data: any;
17+
18+
constructor(@Inject('sourceFiles') private sourceFiles: any) {
19+
sourceFiles.files = ['detailtemplate.style.css'];
20+
}
21+
22+
ngOnInit(): void {
23+
this.data = employeeData;
24+
}
25+
26+
public format(value: Date): string {
27+
return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
28+
}
29+
}
30+
31+
export interface DateFormat extends Window {
32+
format?: Function;
33+
}

‎src/grid/detailtemplate.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<div class="control-section">
2+
<ej-grid #grid [dataSource]='data' id='Grid'>
3+
<template #detailTemplate let-data>
4+
<table class="detailtable" width="100%">
5+
<colgroup>
6+
<col width="35%">
7+
<col width="35%">
8+
<col width="30%">
9+
</colgroup>
10+
<tbody>
11+
<tr>
12+
<td rowspan="4" style="text-align: center;">
13+
<img class='photo' src="src/grid/images/{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}" />
14+
</td>
15+
<td>
16+
<span style="font-weight: 500;">First Name: </span> {{data.FirstName}}
17+
</td>
18+
<td>
19+
<span style="font-weight: 500;">Postal Code: </span> {{data.PostalCode}}
20+
</td>
21+
</tr>
22+
<tr>
23+
<td>
24+
<span style="font-weight: 500;">Last Name: </span> {{data.LastName}}
25+
</td>
26+
<td>
27+
<span style="font-weight: 500;">City: </span> {{data.City}}
28+
</td>
29+
</tr>
30+
<tr>
31+
<td>
32+
<span style="font-weight: 500;">Title: </span> {{data.Title}}
33+
</td>
34+
<td>
35+
<span style="font-weight: 500;">Phone: </span> {{data.HomePhone}}
36+
</td>
37+
</tr>
38+
<tr>
39+
<td>
40+
<span style="font-weight: 500;">Address: </span> {{data.Address}}
41+
</td>
42+
<td>
43+
<span style="font-weight: 500;">HireDate: </span> {{format(data.HireDate)}}
44+
</td>
45+
</tr>
46+
</tbody>
47+
</table>
48+
</template>
49+
<e-columns>
50+
<e-column field='EmployeeID' headerText='Employee ID' width='125' textAling='right'></e-column>
51+
<e-column field='FirstName' headerText='Name' width='120'></e-column>
52+
<e-column field='Title' headerText='Title' width='170'></e-column>
53+
<e-column field='HireDate' headerText='Hire Date' width='135' textAling='right' format='yMd'></e-column>
54+
<e-column field='ReportsTo' headerText='Reports To' width='120' textAling='right'></e-column>
55+
</e-columns>
56+
57+
</ej-grid>
58+
59+
60+
<div id="description">
61+
<p>
62+
The detail row template provides an additional information about a particular data row which can show or hide by clicking
63+
on expand or collapse button. The <code><a target="_blank" class="code"
64+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#detailtemplate-string">
65+
detailTemplate</a></code> property accepts the template for the detail row.
66+
</p>
67+
<p>
68+
In this demo, we have presented Employee Information with image in the detail row.
69+
</p>
70+
<br/>
71+
<p style="font-weight: 500">Injecting Module</p>
72+
<p>
73+
Grid features are segregated into individual feature-wise modules. To use detail template feature, we need to inject <code>DetailRowService</code> into the <code>@NgModule.providers</code> section.
74+
</p>
75+
</div>
76+
</div>

‎src/grid/detailtemplate.style.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
.detailtable td {
3+
font-size: 13px;
4+
padding: 4px;
5+
max-width: 0;
6+
overflow: hidden;
7+
text-overflow: ellipsis;
8+
white-space: nowrap;
9+
}
10+
11+
.photo {
12+
width: 100px;
13+
height: 100px;
14+
border-radius: 50px;
15+
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
16+
}
17+
18+
@media screen and (max-width: 800px) and (min-width: 320px) {
19+
.photo {
20+
width: 70px;
21+
height: 70px;
22+
}
23+
}

‎src/grid/grid.module.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ import { GridLinesComponent } from './gridlines.component';
2424
import { DragAndDropComponent } from './draganddrop.component';
2525
import { AggregateComponent } from './aggregatedefault.component';
2626
import { AggregateGroupComponent } from './aggregategroup.component';
27+
import { ColumnTemplateComponent } from './columntemplate.component';
28+
import { RowTemplateComponent } from './rowtemplate.component';
29+
import { DetailTemplateComponent } from './detailtemplate.component';
2730
import { SharedModule } from '../common/shared.module';
2831

2932
export const gridRouteConfig: Object[] = [
@@ -36,7 +39,7 @@ export const gridRouteConfig: Object[] = [
3639
{ 'path': 'grid/scrolling', component: ScrollComponent, name: 'Scrolling', order: '01', category: 'Grid' },
3740
{ 'path': 'grid/searching', component: SearchComponent, name: 'Searching', order: '01', category: 'Grid' },
3841
{ 'path': 'grid/masterdetail', component: MasterComponent, name: 'Master/Detail', order: '01', category: 'Grid' },
39-
{ 'path': 'grid/draganddrop', component: DragAndDropComponent, name: 'Row Drag And Drop', order: '01', category: 'Grid',
42+
{ 'path': 'grid/draganddrop', component: DragAndDropComponent, name: 'Row Drag And Drop', order: '01', category: 'Grid',
4043
hideOnDevice: true },
4144
{ 'path': 'grid/localdata', component: LocalDataComponent, 'name': 'Local Binding', order: '02', category: 'Data Binding' },
4245
{ 'path': 'grid/remotedata', component: DataBindingComponent, 'name': 'Remote Binding', order: '02', category: 'Data Binding' },
@@ -49,13 +52,19 @@ export const gridRouteConfig: Object[] = [
4952
{ 'path': 'grid/aggregatedefault', component: AggregateComponent, name: 'Default Aggregate', order: '05', category: 'Aggregate',
5053
type: 'new' },
5154
{ 'path': 'grid/aggregategroup', component: AggregateGroupComponent,
52-
name: 'Group and Caption aggregate', order: '05', category: 'Aggregate', type: 'new' }
55+
name: 'Group and Caption aggregate', order: '05', category: 'Aggregate', type: 'new' },
56+
{ 'path': 'grid/columntemplate', component: ColumnTemplateComponent, name: 'Column Template', order: '03',
57+
category: 'Column', type: 'new'},
58+
{ 'path': 'grid/rowtemplate', component: RowTemplateComponent, name: 'Row Template', order: '01', category: 'Grid', type: 'new'},
59+
{ 'path': 'grid/detailtemplate', component: DetailTemplateComponent, name: 'Detail Template', order: '01',
60+
category: 'Grid', type: 'new'}
5361
];
5462

5563
let declarations: Type<Object>[] = [DefaultComponent, GridLinesComponent,
5664
LocalDataComponent, DataBindingComponent, ShowHideComponent, MasterComponent, DetailComponent, ReorderComponent,
5765
GroupComponent, StackedHeaderComponent, AutoWrapComponent, SortComponent, PageComponent, FilterComponent, SelectionComponent,
58-
ScrollComponent, SearchComponent, SelectionApiComponent, DragAndDropComponent, AggregateComponent, AggregateGroupComponent];
66+
ScrollComponent, SearchComponent, SelectionApiComponent, DragAndDropComponent, AggregateComponent, AggregateGroupComponent,
67+
RowTemplateComponent, ColumnTemplateComponent, DetailTemplateComponent];
5968

6069
@NgModule({
6170
imports: [RouterModule.forChild(gridRouteConfig), CommonModule, HttpModule, ToolbarModule, GridModule, SharedModule],

‎src/grid/images/1.png‎

48.6 KB
Loading

‎src/grid/images/2.png‎

49.6 KB
Loading

0 commit comments

Comments
 (0)