How to use the angular-gridster2.DisplayGrid.Always function in angular-gridster2
To help you get started, we’ve selected a few angular-gridster2 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
tiberiuzuld / angular-gridster2 / src / app / sections / drag / drag.component.ts View on Github 
ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
pushItems: true,
swap: false,
draggable: {
delayStart: 0,
enabled: true,
ignoreContentClass: 'gridster-item-content',
ignoreContent: false,
dragHandleClass: 'drag-handler',
stop: DragComponent.eventStop,
start: DragComponent.eventStart,
dropOverItems: false,
dropOverItemsCallback: DragComponent.overlapEvent,
},
resizable: {
enabled: true
}ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
compactType: CompactType.None,
pushItems: true,
draggable: {
enabled: true
},
resizable: {
enabled: true
},
minCols: 1,
maxCols: 100,
minRows: 1,
maxRows: 100,
maxItemCols: 100,
minItemCols: 1,
maxItemRows: 100,
minItemRows: 1,ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
pushItems: true,
pushDirections: {north: true, east: true, south: true, west: true},
pushResizeItems: false,
swap: false,
draggable: {
enabled: true
},
resizable: {
enabled: true
}
};
this.dashboard = [
{cols: 2, rows: 1, y: 0, x: 0},
{cols: 2, rows: 2, y: 0, x: 2},
{cols: 1, rows: 1, y: 0, x: 4},ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
margin: 10,
outerMargin: true,
outerMarginTop: null,
outerMarginRight: null,
outerMarginBottom: null,
outerMarginLeft: null,
};
this.dashboard = [
{cols: 2, rows: 1, y: 0, x: 0},
{cols: 2, rows: 2, y: 0, x: 2},
{cols: 1, rows: 1, y: 0, x: 4},
{cols: 3, rows: 2, y: 1, x: 4},
{cols: 1, rows: 1, y: 4, x: 5},
{cols: 1, rows: 1, y: 2, x: 1},
{cols: 2, rows: 2, y: 5, x: 5},ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
resizable: {
delayStart: 0,
enabled: true,
start: ResizeComponent.eventStart,
stop: ResizeComponent.eventStop,
handles: {
s: true,
e: true,
n: true,
w: true,
se: true,
ne: true,
sw: true,
nw: true
}
},ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
pushItems: true,
draggable: {
enabled: true
},
resizable: {
enabled: true
}
};
this.dashboard = [
{cols: 2, rows: 1, y: 0, x: 0},
{cols: 2, rows: 2, y: 0, x: 2},
{cols: 1, rows: 1, y: 0, x: 4},
{cols: 3, rows: 2, y: 1, x: 4},
{cols: 1, rows: 1, y: 4, x: 5},
{cols: 1, rows: 1, y: 2, x: 1},ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
pushItems: true,
swap: false,
draggable: {
enabled: true,
},
resizable: {
enabled: true
}
};
this.dashboard = [
{cols: 2, rows: 1, y: 0, x: 0},
{cols: 1, rows: 1, y: 0, x: 2},
{cols: 1, rows: 1, y: 1, x: 1},
{cols: 1, rows: 1, y: 1, x: 0}
];ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
initCallback: GridEventsComponent.gridInit,
destroyCallback: GridEventsComponent.gridDestroy,
gridSizeChangedCallback: GridEventsComponent.gridSizeChanged,
itemChangeCallback: GridEventsComponent.itemChange,
itemResizeCallback: GridEventsComponent.itemResize,
itemInitCallback: GridEventsComponent.itemInit,
itemRemovedCallback: GridEventsComponent.itemRemoved,
itemValidateCallback: GridEventsComponent.itemValidate,
pushItems: true,
draggable: {
enabled: true
},
resizable: {
enabled: true
}
};ngOnInit() {
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
enableEmptyCellClick: false,
enableEmptyCellContextMenu: false,
enableEmptyCellDrop: false,
enableEmptyCellDrag: false,
enableOccupiedCellDrop: false,
emptyCellClickCallback: this.emptyCellClick.bind(this),
emptyCellContextMenuCallback: this.emptyCellClick.bind(this),
emptyCellDropCallback: this.emptyCellClick.bind(this),
emptyCellDragCallback: this.emptyCellClick.bind(this),
emptyCellDragMaxCols: 50,
emptyCellDragMaxRows: 50,
};
this.dashboard = [
{cols: 2, rows: 1, y: 0, x: 0},
{cols: 2, rows: 2, y: 0, x: 2},emptyCellDragMaxCols: 50,
emptyCellDragMaxRows: 50,
ignoreMarginInRow: false,
draggable: {
enabled: true,
},
resizable: {
enabled: true,
},
swap: false,
pushItems: true,
disablePushOnDrag: false,
disablePushOnResize: false,
pushDirections: {north: true, east: true, south: true, west: true},
pushResizeItems: false,
displayGrid: DisplayGrid.Always,
disableWindowResize: false,
disableWarnings: false,
scrollToNewItems: false
};
this.dashboard = [
{cols: 2, rows: 1, y: 0, x: 0},
{cols: 2, rows: 2, y: 0, x: 2, hasContent: true},
{cols: 1, rows: 1, y: 0, x: 4},
{cols: 1, rows: 1, y: 2, x: 5},
{cols: 1, rows: 1, y: 1, x: 0},
{cols: 1, rows: 1, y: 1, x: 0},
{cols: 2, rows: 2, y: 3, x: 5, minItemRows: 2, minItemCols: 2, label: 'Min rows & cols = 2'},
{cols: 2, rows: 2, y: 2, x: 0, maxItemRows: 2, maxItemCols: 2, label: 'Max rows & cols = 2'},
{cols: 2, rows: 1, y: 2, x: 2, dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
{cols: 1, rows: 1, y: 2, x: 4, dragEnabled: false, resizeEnabled: false, label: 'Drag&Resize Disabled'},
