Data Binding in Dashboard Layer panel

[Boot Dat]

I have IEnumerable<POLine> summarylist; and 

summarylist = await POLineService.POLineSummaryList(); in 

protected override async Task OnInitializedAsync()

below are variables in my POLineService.cs 

 public decimal TotalSales { get; }

        public decimal TotalAdd { get; }

        public decimal TotalExpense { get; }

        public decimal Balance { get; }

How can i get the values of those in the dashboard layer panel like this 

[Keerthana Rajendran]

Hi Boot, 

 

Greeting from Syncfusion Support. 

 

We have checked with your query and suspect that your requirement is to access the values in your service in your razor page to render the content as template within the Dashboard Layout component. To achieve this, we can inject your service in the razor page as shown in the below code snippet so that you can access all the variables within the service in that page. 

 

@using Syncfusion.Blazor.Layouts 

@using Dashboard_Sample.Services 

@inject POLineService PolineService; 

 

<div style="width:100%;"> 

    <SfDashboardLayout Columns="4"> 

        <DashboardLayoutPanels> 

            <DashboardLayoutPanel Row="0" Col="0"> 

                <HeaderTemplate><div>Total Sales</div></HeaderTemplate> 

                <ContentTemplate>@PolineService.TotalSales</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="0" Col="1"> 

                <HeaderTemplate><div>Total Add</div></HeaderTemplate> 

                <ContentTemplate>@PolineService.TotalAdd</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="0" Col="2"> 

                <HeaderTemplate><div>Total Expense</div></HeaderTemplate> 

                <ContentTemplate>@PolineService.TotalExpense</ContentTemplate> 

            </DashboardLayoutPanel> 

            <DashboardLayoutPanel Row="0" Col="3"> 

                <HeaderTemplate><div>Balance</div></HeaderTemplate> 

                <ContentTemplate>@PolineService.Balance</ContentTemplate> 

            </DashboardLayoutPanel> 

        </DashboardLayoutPanels> 

    </SfDashboardLayout> 

</div> 

 

POLineService.cs

 

namespace Dashboard_Sample.Services 

{ 

    public class POLineService 

    { 

        public decimal TotalSales { get; } = 100; 

 

        public decimal TotalAdd { get; } = 200; 

 

        public decimal TotalExpense { get; } = 300; 

 

        public decimal Balance { get; } = 400; 

    } 

} 

 

Startup.cs 

public void ConfigureServices(IServiceCollection services) 

        { 

            services.AddRazorPages(); 

            services.AddServerSideBlazor(); 

            services.AddSingleton<WeatherForecastService>(); 

            services.AddSingleton<POLineService>(); 

            services.AddSyncfusionBlazor(); 

        } 

For your reference, we have also attached a sample in the below link.  

 

https://www.syncfusion.com/downloads/support/forum/170759/ze/Dashboard_Sample-1150943439 

 

Please check the sample and let us know if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Boot Dat]

Hi  Keerthana Rajendran
Thanks for the feedback. 

actually i'm getting the data from an sql db using a stored procedure 

i do have the service injected thus

@inject IPOLineService POLineService

and in my service 

public async Task<IEnumerable<POLine>> POLineSummaryList()
        {
            IEnumerable<POLine> polines;
            using (var conn = new SqlConnection(_configuration.Value))
            {
                polines = await conn.QueryAsync<POLine>("spPOLine_SummaryList", commandType: CommandType.StoredProcedure);
            }
            return polines;
        }

i as well have

 summarylist = await POLineService.POLineSummaryList();

in my async Task OnInitializedAsync()

--------------------

<ContentTemplate>@POLineService.TotalSales</ContentTemplate> gives an error

[Keerthana Rajendran]

Hi Boot, 

In the previous update, it was stated that the POLineService service contains the variables TotalSales, TotalAdd, TotalExpense and Balance. If so, these values must be accessible while injecting that service in the razor page. So kindly ensure once whether these variables are available with public access modifier in the service.  

For your convenience, we have attached the sample again please check it.

https://www.syncfusion.com/downloads/support/forum/170759/ze/Dashboard_Sample-1150943439

If this is not your case or if you are still facing any issues with your requirement, kindly make the code changes as per your requirement in the provided sample and revert with an error screenshot/video so that we can validate your requirement and provide an exact solution at the earliest. 

Regards, 

Keerthana R.