Dynamic component in panels an drag and drop

[Aurelien]

Hi,

For my new dashboard, i want to use predefined layouts.

When an user selects one, it creates some empty panels.

Then, the user can insert some components in these panels (like widgets).

Actually, I can insert some components in one panel. But I want the panel fit with the last component, so I don't known how increase the sizeY of the panel for each component added (actually I just increase of 3 sizeY for each component).

Other question, it is possible to drag and drop a component in a panel to an other panel?

Thanks a lot

[LeoLavanya Dhanaraj]

Hi Aurelien,

Greetings from Syncfusion support.

Query 1: Components inside the Dashboard Layout panel.

From your shared datils, we understand that you want to add the component inside the Dashboard Layout panel dynamically. We have achieved the similar requirement in the below forum.

https://www.syncfusion.com/forums/173731/how-to-render-dynamically-multiple-components-on-the-dashboard-layout-in-angular?reply=S2UMod

Follow the suggested way as mentioned in the forum and get back to us if you any further assistance.

Query 2 : How to render some components inside a single panel.

We understand that you want to render a few additional components inside of a single Dashboard Layout component and that you expect these components will fit into the corresponding panel. We have prepared an Angular Dashboard Layout sample in the latest version based on your requirement. Here, we have rendered three Grid components inside the Dashboard panel and set the overflow CSS property to Auto for avoiding the content overflow issues.

Refer to the below mentioned code snippets.

[App.component.html]

<ejs-dashboardlayout id="default_dashboard" ... >

    <div id="one" class="e-panel" ... >

        <div id="grid">

            <ejs-grid #grid ... >

                ...

            </ejs-grid>

            <br />

            <ejs-grid #grid ... >

                ...

            </ejs-grid>

            <br>

            <ejs-grid #grid ... >

                ...

            </ejs-grid>

        </div>

    </div>

</ejs-dashboardlayout>

 

#grid {

    height: 100%;

    width: 100%;

    overflow: auto;

}

Sample : https://stackblitz.com/edit/dashboard-with-grid-ogvo5n?file=app.component.html

Please check if the provided sample is suitable for your requirement and get back to us if you need any further assistance.

Query 3 : Is it possible to drag and drop a component in a panel to another panel.

From your shared details, we understand that you want to perform the drag and drop actions form one panel content to another panel. Currently, we don’t have a direct support for this requirement. But we have a support for dragging functionality to drag and reorder the panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the user to decide whether to place the panel in the current position or revert to previous position without disturbing the layout.

Refer to the below link, to know more about drag and drop functionalities in Dashboard Layout component.

https://ej2.syncfusion.com/angular/documentation/dashboard-layout/interaction-with-panels/dragging-moving-of-panels/

Check the shared details and sample. Please get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Aurelien]

It's okay for me firsts questions, thanks.

For the third, do you think it is possible to chose a type of layout (for example a 4/8 layout), and when I want create a new panel, it fit with the layout width (so 33% here)?

After that, maybe I can drag and drop my panel on the second part of my layout and fit with it (66%).

Thanks

[LeoLavanya Dhanaraj]

Hi Aurelien,

From your shared details, we were quite unclear about your exact requirement. Whether you expect the dragged panel to automatically adapt to the existing panel dimensions or the panel content (the component within the panel content) to auto-adjust when the panel is resized.

If you want to perform the drag and drop function between the panels, it will only rearrange within the layout with the same dimension as the panel. We need some additional details to validate your requirements. If possible, please provide your exact requirements as video footage. These details will help us to check and provide a prompt solution.

Please get back to us with the requested details.

Regards,

Leo Lavanya Dhanaraj

[Aurelien]

Hi,

Thanks for your answer.

I made some screenshots to explain my problem of my user interface mockup.

Firstly, I choose one predefined layout and I have this:

Then, I want to add a first then a second widget.

They will be added to the first panel and must increase this one when more widgets are added.

And finally, I want to drag and drop a widget in an other "panel".

Thanks you.

[LeoLavanya Dhanaraj]

Hi Aurelien,

Thanks for the shared details. We understood from your explanation that you want the dragged panel to automatically adjust to the dimensions of the existing panel. Based on your requirement, we have prepared an Angular Dashboard Layout sample with latest version. Here, we used a resizePanel method inside the dragStop event to resize the dragged panel.

Check the below mentioned code snippets.

[App.component.html]

<ejs-dashboardlayout id="default_dashboard" ... (dragStop)="onDragStop($event)"></ejs-dashboardlayout>

 

[App.component.ts]

public onDragStop(args)

{

    // You can set the sizeX and sizeY of the panel based on your existing widget dimentions.

    this.dashboard.resizePanel(args.element.id, 2, 2);

}

Sample : https://stackblitz.com/edit/angular-89bdd8?file=app.component.html,app.component.ts

Similar like, you can change the sizeX and sizeY of the corresponding dragged panel based on your existing widget dimension. Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Aurelien]

Thanks for your answer, the dragStrop is a great solution.

So to resize the goods sizes, I'll need the width of the blue element on my screenshots.

For that, how I can add these elements on my dashboard?

It is possible to have this implementation with dynamic panels:

<ejs-dashboard>

    <div id="blue_div_1">

         // add panels and fit with the div

    </div>

    <div id="blue_div_2">

        // panels...

    </div>

...

</ejs-dashboard>

Also, I would like my panels to be moved only in the blue div; it is possible to fix a limit?

Thanks.

[LeoLavanya Dhanaraj]

Hi Aurelien,

From your shared details, we understand that you want to drop dashboard panels based on their backdrop div container. However, we don't have the support to perform drag and drop actions outside of the Dashboard Layout component.

We would like to let you know that Dashboard Layout is a grid-structured layout component in which all the panel creation, positioning, resizing, drag and drop, and other such functionalities are based on the parent container element and its dimension. So, we cannot drag the panels outside of their parent container element.

By default, we can drag and drop panels to the desired location within the dashboard layout. As a result, we cannot drag and drop a panel into a div container as you expected.

Also, we have considered providing support for panel drag actions between two different dashboards. Support for this feature will be included in any one of our upcoming releases. Generally, we will plan features based on customer count, feature list, and wish list. Track the below link to know the feature status.

https://www.syncfusion.com/feedback/10025/need-to-provide-support-to-drag-panels-between-different-dashboards 

Please let us know, if you need any further assistance. 

Regards,

Leo Lavanya Dhanaraj