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. Image for the cookie policy date

Dynamic List of Dashboards

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

10 Replies

MK Muthukrishnan Kandasamy Syncfusion Team February 8, 2020 05:20 AM

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 



GF gisela fromm February 8, 2020 08:03 AM

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





SP Sowmiya Padmanaban Syncfusion Team February 10, 2020 07:17 AM

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 



GF gisela fromm February 17, 2020 05:08 AM

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


MK Muthukrishnan Kandasamy Syncfusion Team February 18, 2020 05:02 AM

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 



RE reinhard August 20, 2020 08:15 AM

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


MK Muthukrishnan Kandasamy Syncfusion Team August 21, 2020 08:11 AM

 
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 



SP Sowmiya Padmanaban Syncfusion Team September 1, 2020 08:18 AM

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 



RE reinhard September 3, 2020 05:36 AM

Hi Sowmiya,

thank you very much, it works.


SP Sowmiya Padmanaban Syncfusion Team September 3, 2020 07:55 AM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon