Skip to content

Commit c9ed154

Browse files
AlisherAmonulloevAlisherAmonulloev
committed
Update projects
1 parent fe600fc commit c9ed154

29 files changed

+456
-331
lines changed

‎Angular/src/app/app.component.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1-
<div class="default-style">
2-
<dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
1+
<div id="app-container">
2+
<dx-drop-down-box
3+
[(value)]="selectedFruit"
4+
[(opened)]="isDropDownBoxOpened"
5+
[dataSource]="dataSource"
6+
label="Fruits"
7+
labelMode="floating"
8+
[acceptCustomValue]="true"
9+
[openOnFieldClick]="false"
10+
(onEnterKey)="addItem()"
11+
>
12+
<dx-list
13+
[dataSource]="dataSource"
14+
selectionMode="single"
15+
(onSelectionChanged)="changeDropDownBoxValue($event)"
16+
[allowItemDeleting]="true"
17+
(onItemDeleting)="onItemDeleting($event)"
18+
>
19+
</dx-list>
20+
</dx-drop-down-box>
321
</div>

‎Angular/src/app/app.component.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
.default-style {
1+
#app-container {
2+
width: 350px;
3+
position: relative;
24
margin: 50px;
3-
width: 90vw;
5+
padding: 20px;
6+
border: 1px solid #ddd;
47
}

‎Angular/src/app/app.component.ts‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,37 @@
1-
import { Component } from '@angular/core';
2-
import { ClickEvent } from 'devextreme/ui/button';
1+
import { Component, ViewChild } from '@angular/core';
2+
import { DxListComponent } from 'devextreme-angular';
3+
import { DxListTypes } from 'devextreme-angular/ui/list';
34

45
@Component({
56
selector: 'app-root',
67
templateUrl: './app.component.html',
78
styleUrls: ['./app.component.scss'],
89
})
910
export class AppComponent {
10-
title = 'Angular';
11+
@ViewChild(DxListComponent, { static: false }) list!: DxListComponent;
1112

12-
counter = 0;
13+
fruits: string[] = ['Apples', 'Oranges', 'Lemons', 'Pears', 'Pineapples'];
1314

14-
buttonText = 'Click count: 0';
15+
dataSource: string[] = this.fruits;
1516

16-
onClick(e: ClickEvent): void {
17-
this.counter++;
18-
this.buttonText = `Click count: ${this.counter}`;
17+
selectedFruit = '';
18+
19+
isDropDownBoxOpened = false;
20+
21+
changeDropDownBoxValue(args: DxListTypes.SelectionChangedEvent): void {
22+
this.selectedFruit = args.addedItems[0];
23+
this.isDropDownBoxOpened = false;
24+
}
25+
26+
addItem(): void {
27+
this.dataSource.push(this.selectedFruit);
28+
this.selectedFruit = '';
29+
this.list.instance.reload();
30+
}
31+
32+
onItemDeleting(e: DxListTypes.ItemDeletingEvent): void {
33+
if (this.dataSource.length === 1) {
34+
e.cancel = true;
35+
}
1936
}
2037
}

‎Angular/src/app/app.module.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3-
import { DxButtonModule } from 'devextreme-angular/ui/button';
3+
import { DxDropDownBoxModule } from 'devextreme-angular/ui/drop-down-box';
4+
import { DxListModule } from 'devextreme-angular/ui/list';
45
import { AppRoutingModule } from './app-routing.module';
56
import { AppComponent } from './app.component';
67

@@ -11,7 +12,8 @@ import { AppComponent } from './app.component';
1112
imports: [
1213
BrowserModule,
1314
AppRoutingModule,
14-
DxButtonModule,
15+
DxDropDownBoxModule,
16+
DxListModule,
1517
],
1618
providers: [],
1719
bootstrap: [AppComponent],

‎Angular/src/app/orig_app.component.css‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎Angular/src/app/orig_app.component.html‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎Angular/src/app/orig_app.component.ts‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎Angular/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Angular</title>
5+
<title>Getting Started with DevExtreme Angular DropDownBox</title>
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="icon" type="image/x-icon" href="favicon.ico" />

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ This repository stores the code examples of the DropDownBox component for the [G
1818
- **jQuery**
1919
- [index.js](jQuery/src/index.js)
2020
- **React**
21-
- [App.js](React/src/App.js)
21+
- [App.tsx](React/src/App.tsx)
2222
- **Vue**
2323
- [App.vue](Vue/src/App.vue)
24+
- [DropDownContent.vue](Vue/src/components/DropDownContent.vue)
2425

2526
## Documentation
2627

‎React/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>Getting Started with DevExtreme React DropDownBox</title>
88
</head>
99
<body>
1010
<div id="root"></div>

0 commit comments

Comments
 (0)