tiberiuzuld / angular-gridster2 Goto Github PK
View Code? Open in Web Editor NEWAngular gridster 2
Home Page: https://tiberiuzuld.github.io/angular-gridster2
License: MIT License
Angular gridster 2
Home Page: https://tiberiuzuld.github.io/angular-gridster2
License: MIT License
I am making a extensible dashboard. Depending on the data that I receive from the server, there need to be tiles created with different components in it. Because it is extensible, we cannot make a simple factory for this. An independent person needs to be able to make its own tilewidget, and be able to render that tile in the gridster by sending the right data to it.
I set the dragAndDrop option to false, and when I navigate to a new page my app breaks.
gridsterOptions:IGridsterOptions = {
lanes: 5,
direction: "vertical",
dragAndDrop: false
}
I found this into the gridster-item.component.ts class:
this.dragSubscription is undefined but into the ngOnDestroy(), you try to unsubscribe on it
ngOnInit() {
this.gridster.registerItem(this);
if(this.gridster.options.dragAndDrop) {
this.createMouseDrag(this.$element);
this.createTouchDrag(this.$element);
// Update position
this.dragSubscription = this.dragging.subscribe((pos) => {
if(!this.pin){
this.$element.style.top = (pos.top - this.gridster.$element.offsetTop) + 'px';
this.$element.style.left = (pos.left - this.gridster.$element.offsetLeft) + 'px';
}
});
}
}
ngOnDestroy() {
let index = this.gridster.items.findIndex((z) => z == this);
if(index){
this.gridster.items.splice(index,1);
}
this.dragSubscription.unsubscribe();
}
I would like to be able to call a function or so to make the redraw the whole dashboard.
I tried calling
this.options.optionsChanged();
but I end up with a error
this.options.optionsChanged is not a function
using angular-gridster2 in apps using older versions or angular 2.x.x results in a crash.
[email protected] is the last release the works for me.
[email protected] is not AOT complicit as well.
if there is no way to support the older versions of angular. i suggest releasing a 2.4.5 which is AOT complicit so it gives the necessary time before we can all upgrade to angular 4.0
Hello,
I am having dynamically generated grid-items. each grid-item has different charts like bar-chart, gauge etc.
I want to set different rows and cols for bar-chart and different for gauge dynamically.
When layout is changing dynamic, there are no event fired for component that has size changed because of new layout.
We need to catch this event to resize child component of the widget if any
When playing with the lib, if I put wrong/duplicated values for { cols, rows, x, y} to the list of widgets, they just disappear and no error thrown.
Expected behavior is when there are collisions in the settings, we should throw warning/error in the console to let user know which one is not correct if possible
Hi,
How can we bind the component to widget. Please help me on this.
Thanks,
Avanthika.
when an Item is added, it gets placed at at the top most empty position as expected.
it would also be cool if the empty spaces be removed by cascading the items to top and left when and item is removed.
@tiberiuzuld It'd be great if you can provide this option as the original plugin does http://dsmorse.github.io/gridster.js/demos/resize-limits.html
The gridster element is deep-styled, would it be possible to add an option to support styling ? Or just not use the :host style binding property ? Thanks.
Hello,
I created a new angular project. I've tried your sample code:
app.component.ts:
this.options = {
gridType: 'fit',
compactUp: false,
compactLeft: false,
itemChangeCallback: AppComponent.itemChange,
itemResizeCallback: AppComponent.itemResize,
margin: 10,
outerMargin: true,
maxItemCols: 50,
minItemCols: 1,
maxItemRows: 50,
minItemRows: 1,
defaultItemCols: 1,
defaultItemRows: 1,
fixedColWidth: 250,
fixedRowHeight: 250,
draggable: {
enabled: true,
stop: AppComponent.eventStop
},
resizable: {
enabled: true,
stop: AppComponent.eventStop
},
swap: false
};
this.dashboard = [
{ cols: 2, rows: 1, y: 0, x: 0 }];
app.component.html:
<gridster [options]="options">
<gridster-item [item]="item" *ngFor="let item of dashboard">
Hello
I see one gridster item on devices with max-width 655px only. On smartphone is visible, on tablet and pc not. My css-file is empty. Here my project info:
@angular/cli: 1.0.0
node: 6.9.5
os: linux x64
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/core: 4.0.0
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/router: 4.0.0
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.0
Drag event does not seem to be handled on firefox. Even the online demo does not work.
i have a check box to enable/ disable options.draggable.enabled. But it's not working, i can see options.draggable.enabled value getting changed to true/ false. Still widgets is draggable all the time. Your demo app works fine, i have checked that.
I am calling optionsChanged() method after the options change but not working. Could you please check and let me know.
Can you support promise/cancellable for the stop callback?
A simple use case is users want to rearrange the widget position but we want their confirmation(via popup dialog) before apply new position.
The library is awesome! Is there any way to get the source code for the demo app? I hope it's angular 2 + webpack, since we're using that.
Hi,
how to get setting 2 column width with vertical scroll grid.
whenever i add 5th item the grid gets converted to 3 column grid and i've also tried setting maxcolumn to 2 and also tried with fixed grid still no luck.
I can't install the packages after the last change:
D:\angular-gridster2>npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\rc\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v6.10.0
npm ERR! npm v3.10.8
npm ERR! code ETARGET
npm ERR! notarget No compatible version found: append-transform@^0.4.3
npm ERR! notarget Valid install targets:
npm ERR! notarget 0.4.0, 0.3.0, 0.2.2, 0.2.1, 0.2.0
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'istanbul-lib-hook'
npm ERR! notarget
Can you please check this out?
Is there any way i can add drag handle css? I have a bootstrap panel inside the widget and i want to move the widget using panel header only. Other thing is if i want to select a label text from a widget, due to the drag handle i can't select the text.
Is it possible to set item.cols, item.rows with a button or text input. We would like to maximize box item with click on the header title of the box.
Hey @tiberiuzuld
Was drag-handler ever implemented to this version (angular 1 version)? If not, I can spin something up and contribute if you'd like. Thanks.
Hello,
Working on implementing gridster2 for angular 1 version. Demo looked great and does pretty much exactly what I want...however, after setting up the env with all the correct files, injecting dependencies, etc., getting three errors in console that I'm not sure I can explain/resolve. Wondering if you have seen these before? Errors are:
$window.addResizeListener is not a function for line 774 in gridster.js (looks like there isn't that function on $window object)
Cannot read property 'addClass' of undefined for line 830 in gridster.js (looks like vm.element is undefined)
Thanks very much.
please provide a change log between releases so users are aware of breaking changes on new releases.
I believe the issue comes from GridsterComponent.prototype.calculateLayout()
where this.gridLines.updateGrid();
is called without the true
argument, causing the gridsterGrid component to hide itself.
You can reproduce this bug using the demo, set the grid type to fixed and drag any widget to the edge of the screen.
I was wondering if this completely works and if it doesn't give any break. I have put this module into my project that was initialized with Angular-CLI, and thus Angular 4.1.3. This works, but I don't know if it could give any breaks afterwards when I start developing.
Hi @tiberiuzuld
After upgrading from version 2.4.6 to 2.4.9 min/max ItemRows and min/max ItemCols stopped working.
They are not taken into account and item can be freely resize to any size.
This bug also occurs on the angular-gridster2 demo.
Hi @tiberiuzuld ... I know that i've asked for backporting to 1.x version which i truly appreciate. I'm wondering whether or not as part of that feature, you plan on implementing a limit on the amount a tile can be resized. This use case is because i don't want someone using the dashboard to be able to resize the tile to an enormous size. Is there a feature like this in the 2.x version? Thanks so much
Hello,
I am integrating your component in my Angular 4 project. I have created a simple grid by following sample code, its running fine and I am able to see a widget in dashboard. But I am not getting any itemResize or itemChange events when I resize grid item.
I am also attaching code files for your reference(Please remove trailing .txt extension from files).
Please check and let me know if I am missing anything at my end.
Browser : Chrome
Project Config :
"@angular/animations": "^4.0.2", "@angular/common": "^4.0.2", "@angular/compiler": "^4.0.2", "@angular/core": "^4.0.2", "@angular/flex-layout": "^2.0.0-beta.7", "@angular/forms": "^4.0.2", "@angular/http": "^4.0.2", "@angular/material": "^2.0.0-beta.3", "@angular/platform-browser": "^4.0.2", "@angular/platform-browser-dynamic": "^4.0.2", "@angular/router": "^4.0.2", "angular-gridster2": "^2.7.4",
Thanks
Hey @tiberiuzuld
I am using this grid control on both iPad and iPhone. On iPad the items in the grid are resizable and swap enabled. On iPhone it enters in mobile state as expected and grid items are shown in one after another in vertical order.
In mobile state all these items are not resizable, draggable and swap enabled .
Please let me know how to achieve all same features in mobile state also.
Thanks
Thank you for your quick response!
I have still one request, if possible: unfortunatelly, our project's package.json is currently fixed to angular libraries fixed to 2.4.0. is it possible to make the dependencies go from then?
@tiberiuzuld
when the user drags, removes or resizes an item, is there a way to get the updated dashboard list?
I need it so, I can save it a users saved config for his dashboard.
I am having dynamically generated grid-items. Could you please provide exact meaning of maxItemCols,minItemCols,maxItemRows,minItemRows,defaultItemCols,defaultItemRows,fixedColWidth, fixedRowHeight, and other properities. As this library is behaving strange, its not behaving as the way of height and width.
Right now, I can't resize an item if there are no spaces around it.
The expected behavior is user should be able to resize any items regardless of spaces around it.
When no spaces around it, just push other items on the left/down as the original plugin does
http://dsmorse.github.io/gridster.js/demos/resize.html
ERROR in Error encountered resolving symbol values statically. Calling function 'require', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol GridsterComponent in /home/dashboard-ui/node_modules/angular-gridster2/dist/gridster.component.d.ts, resolving symbol GridsterComponent in /home/dashboard-ui/node_modules/angular-gridster2/dist/gridster.component.d.ts
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/dashboard-ui/src'
@ ./src/main.ts 5:0-74
@ multi ./src/main.ts
Try to resize the browser to mobile size on this demo https://tiberiuzuld.github.io/angular-gridster2/angular/
The grid is not stacked as expected, all tiles are showing at the same position
<gridster-item [item]="item" *ngFor="let item of dashboard"> <input type="text" value="Cannot Edit"/> </gridster-item>
The textbox is not editable in the above code.
Hi,
i am getting "Expected 'styles' to be an array of strings. at assertArrayOfStrings" when i included "angular-gridster2" in my project which uses webpack. Got this link to solve this error (http://javaee.ch/2017/02/21/angular-how-to-import-your-css-file-with-webpack-without-errors/). Two things mentioned in the link
You have two CSS file references inside gridster.component.ts & gridsterItem.component.ts. In those files styles files referred as styles: [require('./gridsterItem.css')]. Do you think this is causing the webpack css packaging issue?
Hi,
I tried this awesome module. I have used this under app.component and it works as expect. However when I use it under sub components it does not work.
when cloning the project, npm install throws me:
-- UNMET PEER DEPENDENCY [email protected]
(maybe it's not a problem)
BUT, when I npm start, this is what I get:
ERROR in D:/angular-gridster2/src/app/app.component.ts (5,13): Cannot find name 'module'.)
ERROR in D:/angular-gridster2/lib/gridster.component.ts (9,13): Cannot find name 'module'.)
ERROR in D:/angular-gridster2/lib/gridsterItem.component.ts (9,13): Cannot find name 'module'.)
P.S. what is strange, is that it worked this weekend (yesterday)!
Hi,
I tried the demo and it works fine.
But if I just put the gridster-root inside a simple div, then the gridster disapears (becomes blank).
Am I missing something obvious with angular or some setting with gridster ?
I am having dynamically generated gridster-item. How to delete one of them?? Below is my code of dynamically generating gridster item-
<gridster [options]="options">
<gridster-item class="ResponsiveView CustomGridsterItem" *ngFor="let widget of widgetCount;let i=index;" [item]="dashboard[i]">
<dynamic-component [componentData]="componentData[i]">
For a dashboard layout, sometimes I need to set a specific width/height for the widgets.
I found that there is no way to set the widget_base_dimensions when use your lib.
Can you support it? It's a blocker to us in order to use your lib in our project.
http://dsmorse.github.io/gridster.js/#widget_base_dimensions_opt
Hello,
Link demo: https://tiberiuzuld.github.io/angular-gridster2/angular/
Run this demo in Chrome on PC works fine.
If I run the demo in Chrome to simulate an iPad so I can't delete items with delete button. I expected click event, but I received stopEvent. I have the same behavior on real device ( iPad ). On iPhone works fine. I think that depends on different css for small devices.
Hi @tiberiuzuld again
I found a strange bug (on Chrome 57 & 58).
When dragging an item out of the gridster area, drop it there and try again to drag it, then item starts "flying" with cursor. You can not put it anywhere anymore.
I attached a screencast with this problem.
It is impossible to resize items on a firefox. I tested on the latest Firefox (53.0).
Resize also does not work on angular-gridster2 demo.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.