Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0ab56af

Browse files
adumesnyadumesny
committed
ng two.html demo
added two grid demo to angular demo. showing issue with component not being created/deleted when dragged.
1 parent 005e0b2 commit 0ab56af

File tree

3 files changed

+89
-5
lines changed

3 files changed

+89
-5
lines changed

‎angular/projects/demo/src/app/app.component.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<button (click)="onShow(4)" [class.active]="show===4">Component ngFor</button>
99
<button (click)="onShow(5)" [class.active]="show===5">Component Dynamic</button>
1010
<button (click)="onShow(6)" [class.active]="show===6">Nested Grid</button>
11+
<button (click)="onShow(7)" [class.active]="show===7">Two Grids + sidebar</button>
1112
</div>
1213

1314
<div class="test-container">
@@ -68,6 +69,37 @@
6869
</gridstack>
6970
</div>
7071

72+
<div *ngIf="show===7">
73+
<p><b>two.html</b>: shows multiple grids and outside drag&drop</p>
74+
<div class="row">
75+
<div class="col-md-3">
76+
<div class="sidebar">
77+
<!-- will size to match content -->
78+
<div class="grid-stack-item">
79+
<div class="grid-stack-item-content">Drag me</div>
80+
</div>
81+
<!-- manually force a drop size of 2x1 -->
82+
<div class="grid-stack-item" gs-w="2" gs-h="1" gs-max-w="3">
83+
<div class="grid-stack-item-content">2x1, max=3</div>
84+
</div>
85+
</div>
86+
</div>
87+
<div class="col-md-9">
88+
<div class="trash" id="trash">
89+
</div>
90+
</div>
91+
</div>
92+
<div class="row" style="margin-top: 20px">
93+
<div class="col-md-6">
94+
<gridstack [options]="twoGridOpt1"></gridstack>
95+
</div>
96+
<div class="col-md-6">
97+
<gridstack [options]="twoGridOpt2"></gridstack>
98+
</div>
99+
</div>
100+
</div>
101+
102+
71103
<div class="grid-container"></div>
72104

73105
<div class="text-container">

‎angular/projects/demo/src/app/app.component.ts

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,23 @@ export class AppComponent implements OnInit {
6666
acceptWidgets: true,
6767
children: this.subChildren
6868
};
69+
public twoGridOpt1: NgGridStackOptions = {
70+
column: 6,
71+
cellHeight: 50,
72+
margin: 5,
73+
minRow: 1, // don't collapse when empty
74+
disableOneColumnMode: true,
75+
removable: '.trash',
76+
acceptWidgets: true,
77+
float: true,
78+
children: [
79+
{x: 0, y: 0, w: 2, h: 2},
80+
{x: 3, y: 1, h: 2},
81+
{x: 4, y: 1},
82+
{x: 2, y: 3, w: 3, maxW: 3, id: 'special', content: 'has maxW=3'},
83+
]
84+
};
85+
public twoGridOpt2: NgGridStackOptions = { ...this.twoGridOpt1, float: false }
6986
private serializedData?: NgGridStackOptions;
7087

7188
constructor() {
@@ -110,15 +127,13 @@ export class AppComponent implements OnInit {
110127
case 4: data = this.items; break;
111128
case 5: data = this.gridOptionsFull; break;
112129
case 6: data = this.nestedGridOptions; break;
130+
case 7: data = this.twoGridOpt1;
131+
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
132+
break;
113133
}
114134
if (this.origTextEl) this.origTextEl.nativeElement.value = JSON.stringify(data, null, ' ');
115135
});
116136
if (this.textEl) this.textEl.nativeElement.value = '';
117-
118-
// if (val === 6 && !this.gridComp) {
119-
// const cont: HTMLElement | null = document.querySelector('.grid-container');
120-
// if (cont) GridStack.addGrid(cont, this.serializedData);
121-
// }
122137
}
123138

124139
/** called whenever items change size/position/etc.. */

‎angular/projects/demo/src/styles.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,40 @@
22
@import "../../../../demo/demo.css";
33
/* required file for gridstack 2-11 column */
44
@import "../../../../dist/gridstack-extra.css";
5+
6+
/* for two.html example from bootstrap.min.css */
7+
.row {
8+
display: -ms-flexbox;
9+
display: flex;
10+
-ms-flex-wrap: wrap;
11+
flex-wrap: wrap;
12+
margin-right: -15px;
13+
margin-left: -15px;
14+
box-sizing: border-box;
15+
}
16+
.col-md-3 {
17+
-ms-flex: 0 0 25%;
18+
flex: 0 0 25%;
19+
max-width: 25%;
20+
box-sizing: border-box;
21+
}
22+
.col-md-9 {
23+
-ms-flex: 0 0 75%;
24+
flex: 0 0 75%;
25+
max-width: 75%;
26+
box-sizing: border-box;
27+
}
28+
.col-md-6 {
29+
-ms-flex: 0 0 50%;
30+
flex: 0 0 50%;
31+
max-width: 50%;
32+
box-sizing: border-box;
33+
}
34+
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
35+
position: relative;
36+
width: 100%;
37+
padding-right: 15px;
38+
padding-left: 15px;
39+
box-sizing: border-box;
40+
}
41+

0 commit comments

Comments
 (0)