Blazor dashboard - adding a new panel via data-driven data source

[Scott Peal]

When adding a panel to a dashboard by adding a new data item to the source list, the new panel does not appear correctly. Notice the html for id=layout2 vs id=layout3. Both are using the same settings in the data source. The new panel (layout3) is added via the button on the left toolbox. The new panel is missing some classes, and styles. Also the new panel did not instatiate at the correct row=0, col=0. Nor the correct size 1,1.

If I adjust the Chrome window size, the new panel styles will update to the correct size to 1,1. The new panel is not draggable as it is missing the class for it. 

I know the documention/demo shows adding new panels by using the AddPanel() method; however, the dashboard is data driven so I need to add it to the data source too.

                                <SfDashboardLayout @ref="dashboardObject" Columns="5" AllowResizing="true">

                                    <DashboardLayoutPanels>

                                        @foreach (var section in tab.Sections)

                                        {

                                            string ListBoxId = $"L{Guid.NewGuid().ToString()}";

                                            string id = section.Id;

                                            int row = section.Row;

                                            int col = section.Column;

                                            int width = section.Width;

                                            int height = section.Height;

                                            List<vListItem> items = section.Items;

                                            <DashboardLayoutPanel SizeX=@width SizeY=@height Col=@col Row=@row>

                                                <ContentTemplate>

                                                    <SfListBox ID="@ListBoxId" DataSource="@items" Scope="combined-list" TItem="vListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]" CssClass="v-toolbox-list">

                                                        <ListBoxFieldSettings Text="Name"></ListBoxFieldSettings>

                                                    </SfListBox>

                                                </ContentTemplate>

                                            </DashboardLayoutPanel>

                                        }

                                    </DashboardLayoutPanels>

                                </SfDashboardLayout>

[Scott Peal]

Here is the add event:

        public void AddSection(System.EventArgs args, string code)

        {

            int count = int.Parse(code.Substring(7));

            vform.Tabs[0].Sections.Add(new vSection

            {

                Id = $"S{Guid.NewGuid()}",

                ShowHeader = false,

                Header = "Test",

                Row = 0,

                Column = 0,

                Width = 1,

                Height = 1,

                Items =

                {

                    new vListItem{ Id = $"LI{Guid.NewGuid()}",  Name = "Name2", ControlType = "Textbox" },

                    new vListItem{ Id = $"LI{Guid.NewGuid()}",  Name = "Code2", ControlType = "Textbox" },

                }

            });

            StateHasChanged();

        }

[Sowmiya Padmanaban]

Hi Scott Peal, 

 

Greetings from Syncfusion support. 

 

We have checked your reported issue with DashboardLayout component. We have already logged this as a improvement feature from our end. This fix will be included in our Volume 4 release which is expected to e released at the end of December 2020. 

 

You can track the status through the below feedback portal link. 

 

https://www.syncfusion.com/feedback/12578/provide-support-to-render-panels-in-native-approach-of-blazor 

 

Until then, we suggest you to use the addPanel method for DashboardLayout component. 

 

Please, download the sample from the following link. 

 

https://www.syncfusion.com/downloads/support/forum/157997/ze/Dynamic_Dashboard1266001119.zip 

 

We appreciate your patience. 

 

Regards,  

Sowmiya.P