BTMorton
Dragging external items
What do you think about dragging external items onto the ngGrid?
Maybe we could support this by marking outside draggable objects as ngGridDraggable (new component) which will carry some data (an object). We will then use this object to create a new ngGridItem on the grid.
Will this fit the purpose of this library? I would gladly do a pull request if so.
At the moment, it's not possible to handle within the grid due to it being a directive and the item list being populated outside. If there were a component version of the grid with two-way binding on the item list it could be done, but with it using directives, in order to add an item, you have to actually add it to the item source that is bound to the for loop.
I guess, it would be possible for a new directive "ngGridDraggable" to trigger the grids dragging property and set itself as the dragging item, but on drag stop the grid would then try to add the item to it's internal representation of the grid state, which would result in there being a "ghost item". Well, we could add a case for that, but then the most we could do is trigger an event and the user will have to handle adding it to the item set. Either way, not ideal. Thoughts?
What I did in my fork: https://github.com/catalysts/angular2-grid branch demo-eocs was exactly what you said here.
I added an event which would be triggered on drop and in my app I listened for that event and added the item to the items list (which added it to the grid). Even so, I don't really like this solution because it seems to be a hack.
What do you think about making the directive a component with an internal list of items? Then you could do something like:
<ngGrid [items]="items" ></ngGrid>
If we do it like this then there is no need for a for-loop inside the ngGrid component. The config per item could be specified in the items list.
What do you think? is this to big of a change? maybe we can do this and still keep the current format so we don't break apps using the current implementation.
One more usecase for this: dragging from one grid to another. So we could have 2 grid side by side (or one inside another) and we could drag from the first to the second
Yes an ngGrid component would work. I would probably add it as NgGridComponent that utilises the directives rather than replacing the current implementation. However, that would then require being able to specify the item layout within that, say by doing:
<ngGrid [items]="items">
<ngGridItem #item>
<div>{{item.title}}</div>
<div>{{item.content}}</div>
</ngGridItem>
</ngGrid>
I'll have to look into how Angular 2 handles that kind of thing, and should probably do #83 first.
I've created a new issue for creating the component #86, so we can move this discussion there and come back to this after that's done
So I played around to the component and ended up with a template like this (inside it):
<div [ngGrid]="config">
<div [ngGridItem]="item.config"
*ngFor="let item of items; let i = index"
id="gridItem_{{i}}">
</div>
</div>
and the template of a gridItem is given by another component (and added dynamically):
private addItems(items: any[]): void {
items.forEach((item, index) => this.createItem(item.component, index));
}
private createItem(component, index) {
this.cmpResolver.resolveComponent(component)
.then((factory:ComponentFactory) => factory.create(this.viewContainer.injector, undefined, `#gridItem_${index}`))
}
This way we can specify the component and config of our item inside an object with this structure:
{
config: {
col: 0,
row: 12,
sizex: 16,
sizey: 2,
},
component: TestComponent,
},
What do you think of this approach? it is working pretty well for me
Is there a "built-in" way to use ngGrid to create a toolbox and a canvas so we can drag/drop items from the toolbox to the canvas. The items wouldn't be movable/resizable within the toolbox but would be on the canvas. Finally, when selecting an item on the toolbox, we would "copy" the item before dragging it to the canvas so it remains on the toolbox. I guess you see the big picture! Thanks in advance!
