How do you allow users to maximize/restore panels?

[Coda Error Analysis]

I have a Dashboard Layout with several panels - let's say I have 4 panels arranged in a grid.  But I want the user to be able to select one of the panels and "maximize" it - like a focus that they are working on, then "restore" it to display the other panels as well.  Is there such a functionality?  Or if not in this control, maybe a mix of controls or some other control - how do I accomplish that?

[LeoLavanya Dhanaraj]

Hi Coda,

Greetings from Syncfusion support.

Based on the details you've shared, we understand that you want to maximize the panel and arrange the remaining panels in the available space based on the panel's resizing. Our Blazor Dashboard Layout component supports panel resizing functionality, which can be enabled or disabled using the AllowResizing property.

This functionality allows you to dynamically resize panels through UI interactions using resizing handlers that control panel resizing in various directions. This is the default behavior of our Dashboard component. Refer to the link below for information on panel resizing functionality.

https://blazor.syncfusion.com/documentation/dashboard-layout/interaction-with-panels/resizing-of-panels

Check out the below links to know more about the Blazor Dashboard layout component.

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

API reference : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#properties

Demo : https://blazor.syncfusion.com/demos/dashboard-layout/api?theme=fluent

Also, we have prepared and included the Dashboard sample and its resizing functionality video for reference. Please check the shared details at your end and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: DashbaordResize_7190a0f4.zip

[Coda Error Analysis]

Yes, we do have that enabled, but that is not what we wanted.  We wanted something like all the desktop OSes have, where you can maximize a "window" (or in this case a  layout panel), to focus on its contents temporarily, then restore it (and one-click restore all panels to the previous sizes/locations).  

I have come up with a poor workaround for now, which is a button inside each panel that hides all the others.  The problem is, you have to manually resize the shown panel - and when you click again to restore the other panels, it doesn't change the size back.  So I have to go make variable to bind the panel heights/widths, and write code to save and restore all of them - basically a lot of code to accomplish the simple "maxmize/restore" workflow that users are so used to with GUIs.

If you don't have it, that's OK - but I would like to add that as a feature request.  Syncfusion tools are so great and so indispensible to good website development, that is one small area where it is lacking.

[LeoLavanya Dhanaraj]

We have reviewed your request to maximize and minimize the panel in the Blazor Dashboard Layout component. We have created a customized Dashboard Layout sample and included it in the latest version (21.2.6). In this sample, we have added a custom Switch button that maximizes the panel when enabled and returns it to its original size when toggled off. We achieved this scenario by using the Change event of the Switch, making an interop call, and applying the necessary CSS changes.

Check out the below code snippets for further assistance.

[Index.razor]

<SfDashboardLayout ID="dash" @ref="dashb" … AllowResizing="true">

               <DashboardLayoutPanels>

                              <DashboardLayoutPanel SizeX="2" SizeY="2" Row="0" Column="0" Id="1">

                                             <HeaderTemplate>Panel 1

                                             <SfSwitch @ref="switch1" … ValueChange="Change" ></SfSwitch>

                                    </HeaderTemplate>

                                             <ContentTemplate>

                                                            <div style="height:100%;width:100%">

                                                                           Panel 1

                                                            </div>

                                             </ContentTemplate>

                              </DashboardLayoutPanel> …

               </DashboardLayoutPanels>

</SfDashboardLayout>

 

private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)

{

               if (args.Checked)

               {             

               await jsRuntime.InvokeAsync<string>("fullview","1");     

               }

               else

               {

               await jsRuntime.InvokeAsync<string>("normalview","1");                                                          

               }

}

[_Host.cshtml]

<script>

    function fullview(inst) {

        var panel = document.querySelectorAll("#dash .e-panel");

        for (var i = 0; i < panel.length; i++) {

            if (panel[i].getAttribute('id') == inst.toString()) {

                panel[i].classList.add('fullview');

            }

        }

    }

    function normalview(inst) {

        var panel = document.querySelectorAll("#dash .e-panel");

        for (var i = 0; i < panel.length; i++) {

            if (panel[i].getAttribute('id') == inst.toString()) {

                panel[i].classList.remove('fullview');

            }

        }

    }

</script>

 

[CSS]

.fullview {

  top: 0px !important;

  left: 0px !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 1001 !important;

  position: fixed !important;

}

Please check out the shared sample at your end and get back to us if you need any further assistance.

Attachment: DashboardSample_ddfa77d.zip

[Coda Error Analysis]

Give me some time to process this!  Wow, that was really fast. We will have to update Syncfusion version in the project and test the code to deploy, but it looks very promising.

[Shereen Shajahan]

Hi 

We will wait to hear from you.

Regards,

Shereen