Skip to content

Commit 3830a21

Browse files
georgi-slageorgi-sla
committed
chore: add dropdowns demo
1 parent 82d7886 commit 3830a21

File tree

6 files changed

+324
-0
lines changed

6 files changed

+324
-0
lines changed

‎examples-standalone/kendoangular-landing-page/src/app/components/dropdowns/dropdowns.component.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.wrapper {
2+
display: flex;
3+
box-sizing: border-box;
4+
padding-bottom: 30px;
5+
min-height: 420px;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
10+
.components-wrapper {
11+
display: grid;
12+
grid-template-columns: repeat(3, 1fr);
13+
gap: 20px;
14+
width: 1170px;
15+
justify-content: center;
16+
align-items: center;
17+
}

‎examples-standalone/kendoangular-landing-page/src/app/components/dropdowns/dropdowns.component.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<div class="wrapper">
2+
<div class="components-wrapper">
3+
<div class="component-wrapper">
4+
<p>AutoComplete</p>
5+
<kendo-autocomplete [data]="listItems" placeholder="Your favorite sport"> </kendo-autocomplete>
6+
</div>
7+
<div class="component-wrapper">
8+
<p>ComboBox</p>
9+
<kendo-combobox [data]="listItems" [allowCustom]="allowCustom" [(value)]="selectedValues"> </kendo-combobox>
10+
</div>
11+
<div class="component-wrapper">
12+
<p>MultiColumnComboBox</p>
13+
<kendo-multicolumncombobox [data]="employees" textField="name" valueField="id">
14+
<kendo-combobox-column field="name" title="Name" [width]="200"> </kendo-combobox-column>
15+
<kendo-combobox-column field="title" title="Title" [width]="250"> </kendo-combobox-column>
16+
<kendo-combobox-column field="country" title="Country" [width]="80" class="k-text-center">
17+
</kendo-combobox-column>
18+
</kendo-multicolumncombobox>
19+
</div>
20+
<div class="component-wrapper">
21+
<p>DropDownList</p>
22+
<kendo-dropdownlist [data]="listItems" [(value)]="selectedValues"></kendo-dropdownlist>
23+
</div>
24+
<div class="component-wrapper">
25+
<p>MultiSelect</p>
26+
<kendo-multiselect [data]="listItems" [(value)]="value"></kendo-multiselect>
27+
</div>
28+
<div class="component-wrapper">
29+
<p>DropDownTree</p>
30+
<kendo-dropdowntree
31+
kendoDropDownTreeExpandable
32+
[(expandedKeys)]="expandedNodeIndices"
33+
[kendoDropDownTreeHierarchyBinding]="furniture"
34+
[value]="dropdowntreeValue"
35+
childrenField="items"
36+
expandBy="text"
37+
textField="text"
38+
valueField="id"
39+
>
40+
</kendo-dropdowntree>
41+
</div>
42+
</div>
43+
</div>

‎examples-standalone/kendoangular-landing-page/src/app/components/dropdowns/dropdowns.component.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Component } from '@angular/core';
2+
import { KENDO_DROPDOWNS } from '@progress/kendo-angular-dropdowns';
3+
import { employees } from '../../data/employees';
4+
import { Employee } from '../../models/employee';
5+
import { dropdowntreeData } from '../../data/dropdowntree-data';
6+
import { CommonModule } from '@angular/common';
7+
8+
@Component({
9+
selector: 'app-dropdowns',
10+
imports: [KENDO_DROPDOWNS, CommonModule],
11+
templateUrl: './dropdowns.component.html',
12+
styleUrl: './dropdowns.component.css',
13+
})
14+
export class DropdownsComponent {
15+
public allowCustom = true;
16+
public selectedValues: string = 'Baseball';
17+
public value: any = ['Baseball', 'Cricket'];
18+
public dropdowntreeValue: { text: string; id: number } = { text: 'Sofas', id: 3 };
19+
public employees: Employee[] = employees;
20+
public furniture: any[] = dropdowntreeData;
21+
public expandedNodeIndices: string[] = ['Furniture'];
22+
public listItems: Array<string> = [
23+
'Baseball',
24+
'Basketball',
25+
'Cricket',
26+
'Field Hockey',
27+
'Football',
28+
'Table Tennis',
29+
'Tennis',
30+
'Volleyball',
31+
];
32+
}

‎examples-standalone/kendoangular-landing-page/src/app/data/dropdowntree-data.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const dropdowntreeData: any[] = [
2+
{
3+
id: 1,
4+
text: 'Furniture',
5+
items: [
6+
{ id: 2, text: 'Tables & Chairs' },
7+
{ id: 3, text: 'Sofas' },
8+
{ id: 4, text: 'Occasional Furniture' },
9+
],
10+
},
11+
];

‎examples-standalone/kendoangular-landing-page/src/app/data/employees.ts

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import { Employee } from '../models/employee';
2+
3+
export const employees: Employee[] = [
4+
{
5+
id: 1,
6+
title: 'Human Resources Assistant III',
7+
name: 'Sig Jeannel',
8+
phone: '(936) 9429601',
9+
country: 'US',
10+
},
11+
{
12+
id: 2,
13+
title: 'Operator',
14+
name: 'Shelden Greyes',
15+
phone: '(343) 6656271',
16+
country: 'GB',
17+
},
18+
{
19+
id: 3,
20+
title: 'Operator',
21+
name: 'Megen Cody',
22+
phone: '(178) 2336256',
23+
country: 'BR',
24+
},
25+
{
26+
id: 4,
27+
title: 'VP Quality Control',
28+
name: 'Clevey Thursfield',
29+
phone: '(277) 7415010',
30+
country: 'BR',
31+
},
32+
{
33+
id: 5,
34+
title: 'Data Coordiator',
35+
name: 'Ruthi Baldini',
36+
phone: '(766) 5691615',
37+
country: 'BR',
38+
},
39+
{
40+
id: 6,
41+
title: 'Professor',
42+
name: 'Annecorinne Morter',
43+
phone: '(807) 2524830',
44+
country: 'FR',
45+
},
46+
{
47+
id: 7,
48+
title: 'Assistant Manager',
49+
name: 'Gracia Punyer',
50+
phone: '(515) 9749536',
51+
country: 'ES',
52+
},
53+
{
54+
id: 8,
55+
title: 'Account Executive',
56+
name: 'Duky Hurring',
57+
phone: '(897) 7202034',
58+
country: 'BR',
59+
},
60+
{
61+
id: 9,
62+
title: 'Professor',
63+
name: 'Briana Shemelt',
64+
phone: '(205) 2560799',
65+
country: 'US',
66+
},
67+
{
68+
id: 10,
69+
title: 'Analyst Programmer',
70+
name: 'Lexis Mostin',
71+
phone: '(903) 8388089',
72+
country: 'FR',
73+
},
74+
{
75+
id: 11,
76+
title: 'GIS Technical Architect',
77+
name: 'Felizio Gooda',
78+
phone: '(372) 2389397',
79+
country: 'DE',
80+
},
81+
{
82+
id: 12,
83+
title: 'Financial Advisor',
84+
name: 'Aubry Oxberry',
85+
phone: '(665) 4176083',
86+
country: 'BR',
87+
},
88+
{
89+
id: 13,
90+
title: 'Environmental Tech',
91+
name: 'Orly Glasbey',
92+
phone: '(449) 8482879',
93+
country: 'BR',
94+
},
95+
{
96+
id: 14,
97+
title: 'Cost Accountant',
98+
name: 'Stephanus Culp',
99+
phone: '(148) 3124030',
100+
country: 'BR',
101+
},
102+
{
103+
id: 15,
104+
title: 'Database Administrator IV',
105+
name: 'Roseanna Janecek',
106+
phone: '(125) 4421623',
107+
country: 'FR',
108+
},
109+
{
110+
id: 16,
111+
title: 'Civil Engineer',
112+
name: 'Weidar McCombe',
113+
phone: '(488) 7911627',
114+
country: 'FR',
115+
},
116+
{
117+
id: 17,
118+
title: 'Analyst Programmer',
119+
name: 'Evelin Spirritt',
120+
phone: '(821) 9538078',
121+
country: 'BR',
122+
},
123+
{
124+
id: 18,
125+
title: 'Nurse Practicioner',
126+
name: 'Andria Helbeck',
127+
phone: '(387) 9614638',
128+
country: 'BR',
129+
},
130+
{
131+
id: 19,
132+
title: 'Systems Administrator I',
133+
name: 'Mariellen Ravelus',
134+
phone: '(300) 6741661',
135+
country: 'DE',
136+
},
137+
{
138+
id: 20,
139+
title: 'Help Desk Operator',
140+
name: 'Corri Pergens',
141+
phone: '(769) 7145603',
142+
country: 'BR',
143+
},
144+
{
145+
id: 21,
146+
title: 'Human Resources Assistant II',
147+
name: 'Friedrick Macknish',
148+
phone: '(196) 4156385',
149+
country: 'FR',
150+
},
151+
{
152+
id: 22,
153+
title: 'VP Accounting',
154+
name: 'Georgette Trevorrow',
155+
phone: '(319) 1412549',
156+
country: 'FR',
157+
},
158+
{
159+
id: 23,
160+
title: 'Senior Cost Accountant',
161+
name: 'Vanya Goalby',
162+
phone: '(496) 7538982',
163+
country: 'FR',
164+
},
165+
{
166+
id: 24,
167+
title: 'Actuary',
168+
name: 'Abel Ansell',
169+
phone: '(571) 9908377',
170+
country: 'US',
171+
},
172+
{
173+
id: 25,
174+
title: 'Speech Pathologist',
175+
name: 'Odille Barus',
176+
phone: '(974) 1137672',
177+
country: 'FR',
178+
},
179+
{
180+
id: 26,
181+
title: 'Structural Analysis Engineer',
182+
name: 'Rudolf Consadine',
183+
phone: '(450) 7612220',
184+
country: 'FR',
185+
},
186+
{
187+
id: 27,
188+
title: 'Engineer III',
189+
name: 'Christabel Bick',
190+
phone: '(361) 5159566',
191+
country: 'FR',
192+
},
193+
{
194+
id: 28,
195+
title: 'Senior Developer',
196+
name: 'Lancelot Tanzer',
197+
phone: '(502) 3949900',
198+
country: 'US',
199+
},
200+
{
201+
id: 29,
202+
title: 'Software Engineer I',
203+
name: 'Bink Byk',
204+
phone: '(475) 9070061',
205+
country: 'FR',
206+
},
207+
{
208+
id: 30,
209+
title: 'Speech Pathologist',
210+
name: 'Rhys Pheazey',
211+
phone: '(365) 8904529',
212+
country: 'BR',
213+
},
214+
];

‎examples-standalone/kendoangular-landing-page/src/app/models/employee.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface Employee {
2+
id: number;
3+
title: string;
4+
name: string;
5+
phone: string;
6+
country: string;
7+
}

0 commit comments

Comments
 (0)