Can't call DashBoard AddPanel from OnInitializedAsync() and OnParametersSetAsync()

Hi,
In both of these test cases AddPanel causes a NullReference exception.
I have the panels and layout saved to a database and I'm trying to restore them through AddPanel as the page loads.
Regards,
Mike
@using Syncfusion.Blazor.Layouts
@code {
SfDashboardLayout MainDashboard { get; set; }
protected async override Task OnInitializedAsync()
{
PanelModel AddTile = new PanelModel()
{
Id = "Test",
SizeX = 1,
SizeY = 1,
Row = 0,
Col = 0,
Header = b =>
{
b.OpenElement(0, "span");
b.AddContent(1, "Header");
b.CloseElement();
},
Content = b =>
{
b.OpenElement(0, "span");
b.AddContent(1, "Content");
b.CloseElement();
b.CloseComponent();
}
};
await MainDashboard.AddPanel(AddTile);
return;
}
protected override async Task OnParametersSetAsync()
{
PanelModel AddTile = new PanelModel()
{
Id = "Test",
SizeX = 1,
SizeY = 1,
Row = 0,
Col = 0,
Header = b =>
{
b.OpenElement(0, "span");
b.AddContent(1, "Header");
b.CloseElement();
},
Content = b =>
{
b.OpenElement(0, "span");
b.AddContent(1, "Content");
b.CloseElement();
b.CloseComponent();
}
};
await MainDashboard.AddPanel(AddTile);
}

3 Replies 1 reply marked as answer

SP Sowmiya Padmanaban Syncfusion Team November 10, 2020 04:01 PM UTC

Hi Michael Aston,  
 
Greetings from Syncfusion support. 
 
We have checked your reported problem with DashboardLayout component. We would like to let you know that our DashboardLayout component will not be completed rendered on the OnIntializedAsync life cycle hooks. This is the root cause of your reported problem. 
 
To resolve your problem, we suggest you to add the panel using Created event of DashboardLayout component.  
 
@using Syncfusion.Blazor.Layouts 
@using Syncfusion.Blazor.SplitButtons 
@using Syncfusion.Blazor.Buttons 
@using Syncfusion.Blazor.Calendars 
 
<div style="width:100%;height:100%"> 
    <SfDashboardLayout @ref="dashboard" CellSpacing="@(new double[]{10 ,10 })" Columns="5" > 
        <DashboardLayoutEvents Created="created"></DashboardLayoutEvents> 
        <DashboardLayoutPanels> 
            <DashboardLayoutPanel Row="0" Col="0" SizeX="2" SizeY="2"> 
                <ContentTemplate><div>0</div></ContentTemplate> 
            </DashboardLayoutPanel> 
            <DashboardLayoutPanel Row="0"  SizeX=2 SizeY=2 Col=2> 
                <ContentTemplate><div>1</div></ContentTemplate> 
            </DashboardLayoutPanel> 
            <DashboardLayoutPanel Row="2" SizeY=SizeX="2" Col=0> 
                <ContentTemplate><div>2</div></ContentTemplate> 
            </DashboardLayoutPanel> 
        </DashboardLayoutPanels> 
    </SfDashboardLayout> 
</div> 
 
@code { 
    SfDashboardLayout dashboard; 
    public void created() 
    { 
         this.dashboard.AddPanel(new PanelModel 
        { 
            SizeX = 2, 
            SizeY = 1, 
            Row = 0, 
            Col = 0, 
            Content =@<div style="height:100%; width:100%;"> 
        <SfButton Content="Button component"></SfButton> 
    </div>, 
        
}); 
} 
} 
 
Please, refer the below sample link for your requirement. 
 
 
If above suggested solution does not meet your requirement then please share us your exact requirement with DashboardLayout component. It would help us to understand and to provide you the prompt solution. 
 
Please, refer to the below links to know more about the DashboardLayout component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer

MA Michael Aston November 12, 2020 04:45 PM UTC

Thanks, that resolved for me.


Mike


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team November 13, 2020 01:25 AM UTC

Hi Mike, 
 
We are happy to pleased that your problem has been resolved. Please, get back to us if you need any further assistance. We would be pleased to assist you. 
 
Regards, 
Shameer Ali Baig S. 


Loader.
Up arrow icon