tiberiuzuld / angular-gridster2 Goto Github PK

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 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.

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

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

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

1. Use Webpack v2 - my project webpack is v2
2. Call the CSS file this way and correct loaders.
   @component({
   selector: 'cv-experience',
   templateUrl:'cv-experience.html',
   styles:[require('./cv.css').toString()]
   })

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?

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.

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

@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

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 @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.

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.

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]">

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.

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

app.component.ts.txt
app.component.html.txt

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.

Drag event does not seem to be handled on firefox. Even the online demo does not work.

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.

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.

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.

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?

@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.

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 ?

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

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

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.

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.

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.

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.

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

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.

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.

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

<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.

please provide a change log between releases so users are aware of breaking changes on new releases.

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.

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

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

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.

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

As discussed in #11 to implement a better visual feedback on resize and drag.
Suggestion here

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?

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();
}

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

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.

Hi,
How can we bind the component to widget. Please help me on this.

Thanks,
Avanthika.

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.