Dashboard Layout Panels incorrectly sized when using the Dashboard Layout component in conjunction with the Tab component
Hi Matthew,
We sincerely apologize for the inconvenience and delay caused on our end. Due to the level of integration and customization in your sample, it took additional time to identify the exact root cause of the issue.
Issue 1: Layout width doubles when switching to the 'Revenue' tab:
In your sample, you have customized the Columns and CellAspectRatio values based on the number of panels rendered in the Dashboard Layout component. The second tab, 'Revenue' Dashboard panel is taking two columns of width value as per your input. For that reason, the panel is rendered with 2 SizeX and 1 SizeY value with columns of 2. To correct this, we recommend setting the columnWidth value to 0 for the 'Revenue' panel.
|
[Home.razor] @code { void BindDashboard() { Tabs = [ … new Models.DashboardTab { TabName = "Revenue", ColumnWidths = [0], Widgets = [ new Models.DashboardTabWidget { Id = 3, … } ] }, ]; } } |
Issue 2 : It's no longer possible to change the order of the Dashboard Panels by dragging/dropping them.
The dragging issue occurred because of duplicate IDs in the Dashboard Layout component (specifically, the same ID was assigned to the first panel of both Dashboard components). To resolve this, we recommend removing the manually assigned Id property from the panel. The component will automatically assign a unique ID to each panel.
|
[DashboardTab.razor] @if (IsReady) { <SfDashboardLayout @ref="DashboardLayoutComponent" … > <DashboardLayoutPanels> @foreach (var widget in Data.Widgets) { var widgetId = widget.Id; <DashboardLayoutPanel Row="@widget.RowIndex" Column="@widget.ColumnIndex" SizeX="@widget.SizeX" SizeY="@widget.SizeY"> … </DashboardLayoutPanel> } </DashboardLayoutPanels> </SfDashboardLayout> } |
Issue screenshot;
|
First tab – first panel |
Second tab – first panel |
|
|
|
For your reference, we have included the updated sample along with a working demonstration in the form of a video. Please review it on your end and let us know if you need any further assistance.
Attachment: Dashboard_cef5a647.zip
Hi Matthew,
We sincerely apologize for the inconvenience and delay caused on our end. Due to the level of integration and customization in your sample, it took us additional time to identify the exact root cause of the issue.
Upon further validation, we discovered that a single Dashboard component is maintained across all the tabs, with only the panel property changing. This creates a position conflict in the Dashboard panel. To resolve this issue, we suggest using the @key and unique ID attributes for the SfDashboardLayout and DashboardLayoutPanel tags. For your reference, we have included the modified sample, code snippets, and output screenshots.
Here, we change the second Tab Dashboard column as per your application need.
|
[Home.razor] void BindDashboard() { Tabs = [ new Models.DashboardTab { TabName = "Home", Columns = 2, Widgets = [ new Models.DashboardTabWidget { Id = 1, Name = nameof(Components.Widgets.BookingsByConsultant), Title = "Bookings by Consultant", ComponentType = typeof(Components.Widgets.BookingsByConsultant), RowIndex = 0, ColumnIndex = 0, SizeX = 2, SizeY = 1 }, new Models.DashboardTabWidget { Id = 2, Name = nameof(Components.Widgets.OptionsByConsultant), Title = "Options by Consultant", ComponentType = typeof(Components.Widgets.OptionsByConsultant), RowIndex = 1, ColumnIndex = 1, SizeX = 1, SizeY = 1 } ] }, new Models.DashboardTab { TabName = "Bookings", Columns = 1, Widgets = [ new Models.DashboardTabWidget { Id = 4, Name = nameof(Components.Widgets.BookingsByConsultant), Title = "Bookings by Consultant", ComponentType = typeof(Components.Widgets.BookingsByConsultant), RowIndex = 0, ColumnIndex = 0, SizeX = 1, SizeY = 1 } ] }, new Models.DashboardTab { TabName = "Revenue", Columns = 2, Widgets = [ new Models.DashboardTabWidget { Id = 3, Name = nameof(Components.Widgets.RevenueByConsultant), Title = "Revenue by Consultant", ComponentType = typeof(Components.Widgets.RevenueByConsultant), RowIndex = 0, ColumnIndex = 0, SizeX = 1, SizeY = 1 } ] }, ]; }
[DashboardTab.razor] @if (IsReady) { <SfDashboardLayout @ref="DashboardLayoutComponent" ID="@($"DashboardLayout-{@Data.TabName}")" Columns="@Data.Columns" AllowFloating="true" AllowResizing="true" AllowDragging="true" EnablePersistence="true" CellSpacing="@Spacing" CellAspectRatio="1.8" ResizableHandles="ResizableHandle.SouthEast"> <DashboardLayoutPanels> @foreach (var widget in Data.Widgets) { var widgetId = widget.Id; <DashboardLayoutPanel @key="@(widget.Id)" Id="@widget.Id.ToString()" Row="@((int)widget.RowIndex)" Column="@((int)widget.ColumnIndex)" SizeX="@((int)widget.SizeX)" SizeY="@((int)widget.SizeY)"> <HeaderTemplate>@widget.Title</HeaderTemplate> <ContentTemplate> <div style="height: 100%; width: 100%;"> <DynamicComponent @ref="DynamicDashboardComponents[widgetId]" Type="widget.ComponentType" /> </div> </ContentTemplate> </DashboardLayoutPanel> } </DashboardLayoutPanels> <DashboardLayoutEvents OnResizeStop="OnResize" /> </SfDashboardLayout> } |
|
First Tab |
Second Tab |
Third tab |
|
|
|
|
Refer the shared details and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Attachment: DashboardDemo_af9a435c.zip
