We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic List of Dashboards

Thread ID:

Created:

Updated:

Platform:

Replies:

151323 Feb 6,2020 09:52 PM UTC Sep 3,2020 12:55 PM UTC Blazor 10
loading
Tags: Dashboard Layout
gisela fromm
Asked On February 6, 2020 09:58 PM UTC

Hi,

how can i achieve to create dynamic a list of Dashboardcontrols. All details like number, header, number of DashboardLayoutpanels are dynamic and their contents are saved in a database, so i can only achieve my goal with Blazor's RenderFragment. I habe tried a lot, but without success. 
The result should be:



I'm using Version 17.4.0.46.

Thanks in advance
Gisela

Muthukrishnan Kandasamy [Syncfusion]
Replied On February 8, 2020 10:20 AM UTC

Hi Gisela, 
 
Thanks for contacting Syncfusion support. 
 
We have provided Content Template support for Syncfusion Blazor Dashboard Layout control. you can achieve your requirement by adding chart and grid controls using this content template. We have prepared also prepared sample your convenience, kindly refer to the below link for the sample. 
 
Refer to the below link for demo of integrating chart controls inside the Dashboard layout control. 
 
Please let us know, if you need any assistance. 
 
Regards, 
Muthukrishnan K 


gisela fromm
Replied On February 8, 2020 01:03 PM UTC

Hi Muthukrishnan,
thank you for your example, but this is really not dynamic !

I thoght my requirements are clear, i will repeat them:

I have the following "List Dashboards" with the class:
 public class Dashboard
    {
        public string Name { get; set; }
        public List Panels { get; set; }
    }

This list is filled in the Event "OnParameterSetAsync" from a database.
Then in the page i need something like this:



But this don't work.

Regards 
Gisela




Sowmiya Padmanaban [Syncfusion]
Replied On February 10, 2020 12:17 PM UTC

Hi Gisela, 
 
Greetings from Syncfusion support. 
 
We have checked your attached code snippet. You have to render the dashboard layout panel without the DashboardLayoutPanel tag. It doesn’t render the panel properties correctly in dashboard layout component. In dashboard layout component, we have provided support for inline rendering of component. It will meet your requirement.  

Refer the below code snippet. 
@foreach (var dashboard in Dashboard) 
{ 
    <div>@dashboard.Name</div> 
    <EjsDashboardLayout @ref="dashboardObject" Columns="5" AllowResizing="true"> 
        <ChildContent> 
            @{ 
                var SimplePanels = new List<SimplePanelDefinition> 
                { 
                            new SimplePanelDefinition { X = 0, Y = 0, Width = 4, Height = 3 , Header="Panel1",  content=@<EjsButton Content="Button"></EjsButton> }, 
                            new SimplePanelDefinition { X = 4, Y = 0, Width = 1, Height = 1 , Header="Panel2", content=@<EjsButton Content="Button1"></EjsButton>}, 
                            new SimplePanelDefinition { X = 4, Y = 1, Width = 1, Height = 2 , Header="Panel3", content=@<EjsButton Content="Button2"></EjsButton> } 
                        }; 
 
            } 
 
            @foreach (var panel in SimplePanels) 
            { 
                    <div class="e-panel-header"> 
                        <div class="text-align">@panel.Header</div> 
                    </div> 
                    <div class="e-panel-content"> 
                        @panel.content 
                    </div> 
                </div> 
            } 
        </ChildContent> 
    </EjsDashboardLayout> 
} 

Also, It is the best approach for your requirement. We have prepared a simple sample based on this. Refer the sample link below. 
 
Please let us know, if you need any further assistance on this. 
 
Regards,  
Sowmiya.P 


gisela fromm
Replied On February 17, 2020 10:08 AM UTC

Hi Sowmiya,

thank you for the sample.
I have one question still:
Why hou don't use the DashboardLayoutPanels Container and inside a list of DashboardlayoutPanel instead of the ChildContent?

Regards
Gisela

Muthukrishnan Kandasamy [Syncfusion]
Replied On February 18, 2020 10:02 AM UTC

Hi Gisela, 
 
Thanks for the update. 
 
You can also render the dashboard panel using the DashboardLayoutPanel tag inside the DashboardLayoutPanels container. Please refer the below code block. 
[Counter.razor] 
@{ 
    var Dashboard = new List<Dashboards> {  
        new Dashboards { Name ="dashboard1" }  
    }; 
    var SimplePanels = new List<SimplePanelDefinition>  { 
        new SimplePanelDefinition { X = 0, Y = 0, Width = 4, Height = 3 , Header="Panel1",  content=@<EjsButton Content="Button"></EjsButton> }, 
        new SimplePanelDefinition { X = 4, Y = 0, Width = 1, Height = 1 , Header="Panel2", content=@<EjsButton Content="Button1"></EjsButton>}, 
        new SimplePanelDefinition { X = 4, Y = 1, Width = 1, Height = 2 , Header="Panel3", content=@<EjsButton Content="Button2"></EjsButton> } 
    }; 
 
} 
 
@foreach (var dashboard in Dashboard) 
{ 
    <div>@dashboard.Name</div> 
    <EjsDashboardLayout @ref="dashboardObject" Columns="5" AllowResizing="true"> 
        <DashboardLayoutPanels> 
            @foreach (var panel in SimplePanels) 
            {  
                <DashboardLayoutPanel SizeX="@panel.Width" SizeY="@panel.Height" Col="@panel.X" Row="@panel.Y"> 
                    <HeaderTemplate>@panel.Header</HeaderTemplate> 
                    <ContentTemplate>@panel.content</ContentTemplate> 
                </DashboardLayoutPanel> 
            } 
            </DashboardLayoutPanels> 
         
    </EjsDashboardLayout> 
} 
 
 
@code { 
    EjsDashboardLayout dashboardObject; 
    public class SimplePanelDefinition 
    { 
        public int X { get; set; } 
        public int Y { get; set; } 
        public int Width { get; set; } 
        public int Height { get; set; } 
        public RenderFragment content { get; set; } 
        public string Header { set; get; } 
    } 
    public class Dashboards 
    { 
        public string Name { get; set; } 
    } 
 
} 
 
We have prepared sample for your convenience, kindly refer to the below link for the sample. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


reinhard
Replied On August 20, 2020 01:15 PM UTC

Hello Muthukrishnan,

i have prepared a sample based on the actual version 18.2.0.54.
Both pages (index.razor and counter.razor) should have the same layout.
On the first page (index.razor), the second dashboard is not displayed, on the second page (counter.razor) the second dashboard is displayed wrong and the panels can not resized or moved.
Please look at the attached sample.

Thanks in advance
gisela



Attachment: Dynamic_Dashboard_913b8359.rar

Muthukrishnan Kandasamy [Syncfusion]
Replied On August 21, 2020 01:11 PM UTC

 
Hi Reinhard, 
 
Sorry for the inconvenience. 
 
We have validated and confirmed your reported problem as defect in Dashboard Layout component. Fix for this issue will be included in the upcoming volume 3 release of 2020, which is expected to be rolled out by late in September 2020. 
 
You can track the status through the below portal link. 
 
 
We appreciate your patience until then. 
 
Regards, 
Muthukrishnan K 


Sowmiya Padmanaban [Syncfusion]
Replied On September 1, 2020 01:18 PM UTC

Hi Reinhard,  
 
Sorry for the inconvenience. 
 
On validating your attached sample, we found out that same panel id is set for both the DashboardLayout panels. To resolve your issue, you need to set the different ID for each panel in the DashboardLayout component. 
 
Refer the below code snippet. 
 
   <SfDashboardLayout Columns="4" AllowResizing="true"> 
                <DashboardLayoutPanels> 
                    @foreach (var panel in SimplePanels) 
                    { 
                        <DashboardLayoutPanel Id=@(panel.ID +""+ dashboard.Name)  SizeX= "@panel.Width" SizeY="@panel.Height" Col="@panel.X" Row="@panel.Y"> 
                            <HeaderTemplate> 
                                <div style="background-color: @panel.Color; height: 100%; width: 100%; "> 
                                    @panel.Header 
                                </div> 
                            </HeaderTemplate> 
                            <ContentTemplate> 
                                <div class="content" style="background-color: @panel.Color; height: 98%; width: 100%; "> 
                                    @panel.content 
                                </div> 
                            </ContentTemplate> 
                        </DashboardLayoutPanel> 
                    } 
                </DashboardLayoutPanels> 
            </SfDashboardLayout> 
 
 
Refer the modified sample link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


reinhard
Replied On September 3, 2020 10:36 AM UTC

Hi Sowmiya,

thank you very much, it works.

Sowmiya Padmanaban [Syncfusion]
Replied On September 3, 2020 12:55 PM UTC

Hi Reinhard,  
  
Most Welcome. We are happy to hear that your probelm has been resolved. Please contact us, if you need any help from us. 
  
Regards, 
Sowmiya.P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon