Skip to content

Commit

Permalink
Merge branch 'mvenkov/add-row-selector-template-samples' of https://g…
Browse files Browse the repository at this point in the history
…ithub.com/IgniteUI/igniteui-angular-samples into mvenkov/add-row-selector-template-samples
  • Loading branch information
wnvko committed Sep 11, 2019
2 parents 1986771 + 3788c6e commit 032a990
Show file tree
Hide file tree
Showing 28 changed files with 209 additions and 42 deletions.
15 changes: 14 additions & 1 deletion live-editing/configs/ComboConfigGenerator.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { HttpClientModule } from "@angular/common/http";
import { IgxComboModule, IgxSelectModule, IgxSwitchModule, IgxToastModule } from "igniteui-angular";
import { IgxButtonModule, IgxCardModule, IgxComboModule, IgxSelectModule,
IgxSwitchModule, IgxToastModule } from "igniteui-angular";
import { RemoteService } from "../../src/app/grid/services/remote.service";
import { ComboBindingComponent } from "../../src/app/lists/combo/combo-binding/combo-binding.component";
import { ComboFeatures } from "../../src/app/lists/combo/combo-features/combo-features.component";
import { ComboMainComponent } from "../../src/app/lists/combo/combo-main/combo-main.component";
import { ComboOverlayComponent } from "../../src/app/lists/combo/combo-overlay/combo-overlay.component";
Expand Down Expand Up @@ -91,6 +93,17 @@ export class ComboConfigGenerator implements IConfigGenerator {
component: ComboOverlayComponent
}));

configs.push(new Config({
additionalFiles: ["/src/app/lists/combo/combo-binding/cities.ts"],
appModuleConfig: new AppModuleConfig({
imports: [IgxComboModule, IgxButtonModule, IgxCardModule, ComboBindingComponent],
ngDeclarations: [ComboBindingComponent],
ngImports: [IgxComboModule, IgxButtonModule, IgxCardModule]
}),
component: ComboFeatures,
shortenComponentPathBy: "/lists/combo/"
}));

return configs;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<igx-column [field]="'Fax'" [header]="'Fax'" width="100px"></igx-column>
</igx-grid>
<igx-grid #targetGrid igxDrop [data]="data2" [height]="'480px'" [width]="'640px'" [autoGenerate]="false" [emptyGridTemplate]="dragHereTemplate"
(onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)" (onDrop)="onDropAllowed($event)" [primaryKey]="'ID'">
(enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)" (dropped)="onDropAllowed($event)" [primaryKey]="'ID'">
<igx-column [field]="'ID'" [header]="'ID'" width="100px"></igx-column>
<igx-column [field]="'CompanyName'" [header]="'Company Name'" width="100px"></igx-column>
<igx-column [field]="'ContactName'" [header]="'Contact Name'" width="100px" [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,16 @@ export class GridDragBaseSampleComponent {
}

public onDropAllowed(args) {
args.cancel = true;
this.targetGrid.addRow(args.dragData.rowData);
this.sourceGrid.deleteRow(args.dragData.rowID);
}

public onEnterAllowed(args) {
this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
}

public onLeaveAllowed(args) {
this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
}

private changeGhostIcon(ghost, icon: string) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</ng-template>
</igx-grid>
<igx-grid #targetGrid igxDrop [data]="data2" [height]="'480px'" [width]="'640px'" [autoGenerate]="false" [emptyGridTemplate]="dragHereTemplate"
(onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)" (onDrop)="onDropAllowed($event)" [primaryKey]="'ID'">
(enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)" (dropped)="onDropAllowed($event)" [primaryKey]="'ID'">
<igx-column [field]="'ID'" [header]="'ID'" width="100px"></igx-column>
<igx-column [field]="'CompanyName'" [header]="'Company Name'" width="100px"></igx-column>
<igx-column [field]="'ContactName'" [header]="'Contact Name'" width="100px" [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,16 @@ export class GridDragToGridSampleComponent {
}

public onDropAllowed(args) {
args.cancel = true;
this.targetGrid.addRow(args.dragData.rowData);
this.sourceGrid.deleteRow(args.dragData.rowID);
}

public onEnterAllowed(args) {
this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
}

public onLeaveAllowed(args) {
this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
}

private changeGhostIcon(ghost, icon: string) {
Expand Down
2 changes: 1 addition & 1 deletion src/app/grid/grid-row-drag/grid-row-drag.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="solar-system">
<div class="planets">
<planet #planet *ngFor="let data of planetData" [data]="data"
igxDrop (onEnter)="onEnter($event, planet)" (onLeave)="onLeave($event)" (onDrop)="onDrop($event, planet)"></planet>
igxDrop (enter)="onEnter($event, planet)" (leave)="onLeave($event)" (dropped)="onDrop($event, planet)"></planet>
</div>
<div class="sun-wrapper">
<div class="sun">
Expand Down
6 changes: 2 additions & 4 deletions src/app/grid/grid-row-drag/grid-row-drag.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ export class GridDragSampleComponent {
}

public onEnter(args, planet: PlanetComponent) {
args.drag.dragGhost.classList.add(
args.drag.ghostElement.classList.add(
this.isDropAllowed(args.dragData.rowData.name, planet.name) ? HoverClassList.ALLOW : HoverClassList.DENY);
}

public onLeave(args) {
const dragGhost: HTMLElement = args.drag.dragGhost;
const dragGhost: HTMLElement = args.drag.ghostElement;

if (dragGhost) {
dragGhost.classList.remove(HoverClassList.ALLOW);
Expand All @@ -49,8 +49,6 @@ export class GridDragSampleComponent {
}

public onDrop(args, planet: PlanetComponent) {
args.cancel = true;

const row: IgxRowComponent<IgxGridBaseComponent & IGridDataBindable> = args.dragData;
if (this.isDropAllowed(row.rowData.name, planet.name)) {
row.rowData.planet = planet.name;
Expand Down
2 changes: 1 addition & 1 deletion src/app/grid/grid-row-reorder-sample/grid-row-reorder.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="grid-container">
<igx-grid #grid [data]="data" [height]="'800px'" [width]="'1000px'" [autoGenerate]="false" [rowDraggable]="true"
[primaryKey]="'ID'" igxDrop (onDrop)="onDropAllowed($event)">
[primaryKey]="'ID'" igxDrop (dropped)="onDropAllowed($event)">
<igx-column [field]="'ID'" [header]="'ID'" width="100px"></igx-column>
<igx-column [field]="'CompanyName'" [header]="'Company Name'" width="100px"></igx-column>
<igx-column [field]="'ContactName'" [header]="'Contact Name'" width="100px" [minWidth]="'60px'"
Expand Down
1 change: 0 additions & 1 deletion src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export class GridRowReorderComponent {
}

public onDropAllowed(args) {
args.cancel = true;
const event = args.originalEvent;
const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(),
{ x: event.pageX, y: event.pageY });
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="drop-area" igxDrop (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)"
(onDrop)="onDropAllowed($event)">
<div class="drop-area" igxDrop (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)"
(dropped)="onDropAllowed($event)">
<igx-icon>delete</igx-icon>
<div>Drag a row here to delete it</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,16 @@ export class HGridRowDragBaseComponent {
}

public onDropAllowed(args: IDropDroppedEventArgs) {
args.cancel = true;
const draggedRow: IgxHierarchicalRowComponent = args.dragData;
draggedRow.delete();
}

public onEnterAllowed(args) {
this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
}

public onLeaveAllowed(args) {
this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
}

private changeGhostIcon(ghost, icon: string) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="drop-area" igxDrop (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)"
(onDrop)="onDropAllowed($event)">
<div class="drop-area" igxDrop (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)"
(dropped)="onDropAllowed($event)">
<igx-icon>delete</igx-icon>
<div>Drag a row here to delete it</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,16 @@ export class HGridDragSampleComponent {
}

public onDropAllowed(args: IDropDroppedEventArgs) {
args.cancel = true;
const draggedRow: IgxHierarchicalRowComponent = args.dragData;
draggedRow.delete();
}

public onEnterAllowed(args) {
this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
}

public onLeaveAllowed(args) {
this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
}

private changeGhostIcon(ghost, icon: string) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<igx-hierarchical-grid class="hgrid" igxDrop #grid1 [data]="localData" [primaryKey]="'id'"
[rowDraggable]="true" [rowSelectable]="true" (onRowDragStart)="rowDragStart($event)" (onDrop)="rowDrop($event)"
[rowDraggable]="true" [rowSelectable]="true" (onRowDragStart)="rowDragStart($event)" (dropped)="rowDrop($event)"
[height]="'540px'" [width]="'800px'" #hGrid>
<igx-column field="name" header="Name"></igx-column>
<igx-column field="system" header="Is System Drive"></igx-column>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export class HGridRowReorderComponent {
}

public rowDrop(args: IDropDroppedEventArgs): void {
args.cancel = true;
const targetRow = args.dragData;
const event = args.originalEvent;
const cursorPosition: Point = { x: event.pageX, y: event.pageY };
Expand Down
74 changes: 74 additions & 0 deletions src/app/lists/combo/combo-binding/cities.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
export interface ICity {
name: string;
id: string;
country: string;
}

export const CITIES: ICity[] = [
{
name: "Sofia",
id: "BG01",
country: "Bulgaria"
}, {
name: "Plovdiv",
id: "BG02"
,
country: "Bulgaria"
}, {
name: "Varna",
id: "BG03",
country: "Bulgaria"
}, {
name: "Burgas",
id: "BG04",
country: "Bulgaria"
}, {
name: "London",
id: "UK01",
country: "United Kingdom"
}, {
name: "Birmingham",
id: "UK02",
country: "United Kingdom"
}, {
name: "Liverpool",
id: "UK03",
country: "United Kingdom"
}, {
name: "Nottingham",
id: "UK04",
country: "United Kingdom"
}, {
name: "Tokyo",
id: "JP01",
country: "Japan"
}, {
name: "Yokohama",
id: "JP02",
country: "Japan"
}, {
name: "Osaka",
id: "JP03",
country: "Japan"
}, {
name: "Nagoya",
id: "JP04",
country: "Japan"
}, {
name: "Berlin",
id: "DE01",
country: "Germany"
}, {
name: "Hamburg",
id: "DE02",
country: "Germany"
}, {
name: "Munich",
id: "DE03",
country: "Germany"
}, {
name: "Koeln",
id: "DE04",
country: "Germany"
}
];
23 changes: 23 additions & 0 deletions src/app/lists/combo/combo-binding/combo-binding.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<div class="combo-section">
<igx-combo #withValueKey [data]="cities" valueKey="id" displayKey="name" groupKey="country"
[(ngModel)]="selectedValueKey">
</igx-combo>
<button igxButton (click)="selectFavorites(true)">Select Favorites</button>
<h6>Selected Cities:</h6>
<div>{{ selectedValueKey }}</div>
</div>
<div class="combo-section">
<igx-combo #noValueKey [data]="cities" displayKey="name" groupKey="country" [(ngModel)]="selectedNoValueKey">
</igx-combo>
<button igxButton (click)="selectFavorites(false)">Select Favorites</button>
<h6>Selected Cities:</h6>
<div class="cities-container">
<igx-card type="outlined" *ngFor="let city of selectedNoValueKey">
<igx-card-header>
<h5 igxCardHeaderTitle>{{ city.name }}</h5>
<h5 igxCardHeaderSubtitle>{{ city.country }}</h5>
{{ city.id }}
</igx-card-header>
</igx-card>
</div>
</div>
23 changes: 23 additions & 0 deletions src/app/lists/combo/combo-binding/combo-binding.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
:host {
display: flex;
width: 100%;
flex-flow: row wrap;
}

button {
margin: 8px 0px;
}

.combo-section {
margin: 24px;
width: 320px;
}

.cities-container {
max-height: 200px;
overflow-y: auto;

igx-card {
margin: 8px 8px 8px 0;
}
}
34 changes: 34 additions & 0 deletions src/app/lists/combo/combo-binding/combo-binding.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Component, ViewChild } from "@angular/core";
import { IComboSelectionChangeEventArgs, IgxComboComponent } from "igniteui-angular";
import { CITIES, ICity } from "./cities";

@Component({
selector: "app-combo-binding",
templateUrl: "combo-binding.component.html",
styleUrls: ["combo-binding.component.scss"]
})
export class ComboBindingComponent {
@ViewChild("withValueKey", { read: IgxComboComponent, static: false })
public comboValueKey: IgxComboComponent;
@ViewChild("noValueKey", { read: IgxComboComponent, static: false })
public comboNoValueKey: IgxComboComponent;

public cities: ICity[] = CITIES;
public selectedValueKey: string[] = ["UK01", "BG01"];
public selectedNoValueKey: ICity[] = [this.cities[4], this.cities[0]];

public handleSelectionChange(event: IComboSelectionChangeEventArgs) {
console.log(event);
}

public selectFavorites(valueKey: boolean) {
if (valueKey) {
this.comboValueKey.selectItems(["UK01", "BG01", "DE01", "JP01"]);
} else {
const selectedItems: ICity[] = this.cities.filter((e: ICity) => {
return ["UK01", "BG01", "DE01", "JP01"].indexOf(e.id) > -1;
});
this.comboNoValueKey.selectItems(selectedItems);
}
}
}
1 change: 1 addition & 0 deletions src/app/lists/lists-routes-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

export const listsRoutesData = {
"combo-features": { displayName: "Combos Features", parentName: "Combo" },
"combo-binding": { displayName: "Combo Binding", parentName: "Combo" },
"combo-remote": { displayName: "Remote Combo", parentName: "Combo" },
"combo-styling": { displayName: "Combo Styling", parentName: "Combo" },
"combo-template": { displayName: "Templating Combo", parentName: "Combo" },
Expand Down
6 changes: 6 additions & 0 deletions src/app/lists/lists-routing.module.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { CascadingCombos } from "./combo/cascading-combos/cascading-combos.component";
import { ComboBindingComponent } from "./combo/combo-binding/combo-binding.component";
import { ComboFeatures } from "./combo/combo-features/combo-features.component";
import { ComboMainComponent } from "./combo/combo-main/combo-main.component";
import { ComboOverlayComponent } from "./combo/combo-overlay/combo-overlay.component";
Expand All @@ -24,6 +25,11 @@ export const listsRoutes: Routes = [
component: ComboMainComponent,
path: "combo"
},
{
component: ComboBindingComponent,
data: listsRoutesData["combo-binding"],
path: "combo-binding"
},
{
component: ComboFeatures,
data: listsRoutesData["combo-features"],
Expand Down
Loading

0 comments on commit 032a990

Please sign in to comment.