How to make Sidebar toggling and DashboardLayout responsive animation simultaneously?

[Brian]

Hi Syncfusion support,

I am learning to use the SEO layout. Now I am planning to make sidebar toggle, which works well anyway, except that the dashboard layout as the content couldn't fit the correct width responsively while the sidebar extends or shrinks. Part of the content was pushed outside the right border of the browser window, which really annoys me. The only way I can figure out is to add  

Changed="@(()=>this.DashboardInstance.Refresh())"

in the EjsSidebar tag, but the presentation is somehow ugly since the Dashboard stand still until the Sidebar have finished the movement, which makes the whole animation into two phases separately. That would gives users bad UI experience. 

Could you please help me to find someway to make the  DashboardLayout animate simultaneously while the Sidebar toggles? I expect to use the toggleable SEO layout smoothly. Thanks!

ps: I found that even in this way, the charts in dashbaord don't respond automatically too, unless I fresh them in the code together, does that mean I have to refresh all of the components by hand?

[Sowmiya Padmanaban]

Hi Genii,  

 

Greetings from syncfusion support. 

 

We have checked your reported problem. By default, sidebar is opened after the main-content element is rendered on the page. In that case, DashboardLayout is rendered based on the full page dimension. So, you have to refresh the Dashboard layout during changed() event of sidebar component. 

 

In Dashboard layout component, we can’t handle the content element position in component side, because it may be any component (chart, grid). So, you have to manually refresh() the content element using created() event of DashboardLayout component. 

 

We have prepared a simple sample for your reference. Refer the below sample link. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DashBoardLayout1856930146.zip 

 

To more about the DashboardLayout. Refer the below link. 

 

UG Documentation – https://ej2.syncfusion.com/blazor/documentation/dashboard-layout/getting-started/ 

 

Demo link – https://blazor.syncfusion.com/demos/DashboardLayout/SEO?theme=bootstrap4 

 

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

 

Regards,  

Sowmiya.P 

[Brian]

Hi Sowmiya,

Thank you for explaining the mechanism, I see the solution is similar to mine, which means maybe I should learn more and reconsider using alternative layouts like rows and columns to display my ordinary contents.

honest,

genii

[Sowmiya Padmanaban]

Hi Genii,  

Sorry for the inconvenience. 

As per our previous update, this is the current behavior of DashboardLayout and chart components. Except Syncfusion EJ2 Chart components, if you are using any other HTML elements or grid,  it will adapt to the panel content of DashboardLayout.  

Though, we have forwarded your request to chart team for adapting the chart component inside the DashboardLayout panels. We will update the validation details within two business days(5/3/2020). 

Regards,  

Sowmiya.P 

[Srihari Muthukaruppan]

Hi genii,  

We have analyzed your query. From that we would like to let you know that the dashboard panel resize is working fine for accumulation chart. And the chart is rendered with SVG and its responsive with respect to the width and height of its parent element, if its zero, then it will render with its default size(600 * 450). While the dashboard panel resized the chart rendering got started, at that time height and width of the dashboard layout is zero and the chart gets rendered with the default size. We consider this scenario as bug and have logged a defect report. You can keep track of the bug from the feedback portal below.  

  

FeedbackPortal: https://www.syncfusion.com/feedback/12720 

  

The fix will be available after our volume 1 main release which expected to be rolled out at the end of March 2020. We appreciate your patience until then. 

  

Regards,  

Srihari M   

[Baby Palanidurai]

Hi Genii, 

Thanks for your patience. 

We have checked on your accumulation chart from your sample, it seems that legend got changed on resize and hence the accumulation chart is refreshed. Without this, accumulation chart also needs to call the refresh method. So, when on resizing the panel, we need to refresh the charts manually, as the dashboard layout size is not available for chart on resize. 

Kindly revert us, if you have any concerns. 

Regards, 

Baby.