Dragging not working when other component selector includes.

[Sandeepvedam]

Hi,

First, Thanks for great plugin. :)

I am facing issue that is widget not dragging when i included table component selector inside widget tag.

Code:

<widget [size]="[5,3]" widgetId="big" class="handle">
        <data-table >
        </data-table>
      </widget>

Please help me.

Thanks,
Sandeep.

[jaumard]

Hello,

So data-table is another angular component right ? Did it use some events ?
Because maybe it intercept events and make the dragging not working...

[Sandeepvedam]

Yes. data-table is another component. I have not used events in table component.
I have mentioned event(onDrag) in dashboard tag. Can i mention same to data-table selector?

[jaumard]

The onDrag event will work only for the widget itself, not child components
I will try to reproduce the problem, if you have the possibility to create a small project to reproduce the problem it can help me see what's wrong. I never encounter this before

[Sandeepvedam]

Yes. I will create sample project. So that we can reproduce the problem

[Sandeepvedam]

Hello,

Here is the GIT repo : https://github.com/Sandeepvedam/angular-widgets

[jaumard]

Thanks ! I'll take a look asap and let you know :)

[Sandeepvedam]

Okay. Thanks

[jaumard]

I take a quick look and it's weird should work... On my project I do like this https://github.com/mylisabox/lisa-ui/blob/master/src/app/components/widget/widget.component.html#L1 with the widgethandle directive but can't test on your sample as there some compilation errors (but I was able to run it)...
The only difference is that on my project I add widgets dynamically where you add them statically so maybe there a problem there. Can you test to play with the directive and let me know please ?

[Sandeepvedam]

I saw your code. It is making some what confusion to me with out running the application. When i run the app it is failing API calls. :)

[Sandeepvedam]

I added something like below. Is that correct format.

widgets = [
{
"id": 1,
"name": "DataTable",
"size": [
4,
3
]
},
{
"id": 2,
"name": "BarChart",
"size": [
2,
2
]
}
];

Still i am not able to drag. May be way of writing code is wrong in my case. Can you please help me :)

[jaumard]

As I say it may not be because of your code if widgets with basic HTML inside are draggable... Maybe something is wrong on the library code for static widgets (as you can see mine are not added there https://github.com/mylisabox/lisa-ui/blob/master/src/app/pages/home/home.component.html#L54, they are added dynamically). I need to dig more into this see what wrong... I'll try to reproduce on my demo project, it will be easier to see what's wrong there.
Thanks for the feedback !

[Sandeepvedam]

Thank you very much.

We can not drag one widget into available space.

Let's say from above image. I can't drag table widget beside to chart widget.
It will be good if you provide this kind of features.

http://angular-dashboard-framework.github.io/angular-dashboard-framework/#/sample/01
http://wrapbootstrap.com/preview/WB0573SK0

[jaumard]

I don't plan to do such feature as I don't need it (I made this project for my L.I.S.A. project to manage widget dashboard) and the behavior I want for this project is this one. I think to do such feature you need to change the all algorithm to be able to do that because the current one only place widget on the next available position and it's not aware of anything else, there no real grid or something.
Maybe I'm wrong but doesn't sound like an easy task to me.

The link you provide they work with a grid and widget are resized depending on this grid, here there no grid but widgets have size and are placed one after the other on the next available position.

Sorry for me English I hope I'm clear ^^