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

Dasboard Layout - Sync Changes in Realtime?

Thanks for the awesome controls!

I'm looking at the Blazor controls, and documentation doesn't seem to mention any of the events raised such as OnDragStop etc.

Do you have a sample where you demonstrate how to sync changes in realtime across the signalr connection in blazor to other connected clients, so that If user A drags a panel, user B see's it in their browser session?

Also - How does persistence work? Is it to local storage?
Can it be to the database?
There are no samples of that either

Thanks, and Happy New Year!


6 Replies

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 6, 2020 01:00 PM UTC

Hi Dave, 
Greetings from Syncfusion support. 
Solution for Query – Events for dragStop. 
In Dashboard Layout, onDragStop event will trigger when dragging is ended. Using this event, you can perform any operations based on your requirement. 
To know more about the dashboard layout events, Refer the below link 
Solution for Query – SignalR connection: 
We have analysed about your query. Based on our review, we understood your requirement and suspects that you are attempting to have Dashboard layout in two razor pages. When you change the panel position from one Dashboard Layout (using drag and drop functionality) it would reflect in Dashboard Layout of another razor page.  
Could you please confirm that this is your exact requirement, after which we will prepare a sample for you? Also, let us know if your expecting to achieve this with SignalR functionality. 
Solution for Query – Persistence works: 
The Syncfusion JavaScript (Essential JS 2) library has support for persisting control’s state across page refreshes or navigation. To enable this feature, set enablePersistence property as true to the required control. This will store the control’s state in browser’s localStorage object on page unload event. 
Yes, it is for locally saving component state in the browser. 
To know more about persistence, please refer the below link. 
If we have misunderstood your requirement, please get back to us with additional details of your expected requirement, which would help us to provide you the prompt solution at the earliest. 
Shameer Ali Baig S. 

DA David January 11, 2020 10:20 PM UTC


Sorry for the late response, been a very busy week back at work after the holiday break.
That example is great for events, thanks :)

With regards to SignalR, it's not two instances of a dashboard I am after.
Example Setup:

Index with Dashboard Loaded in chrome, Tab1 : https://localhost:5001/index
The same page, loaded in an incognito tab - https://localhost:5001/index

What I want to achieve is when a dashboard item is moved in the dashboard open in Tab1, it also moves in the Incognito Tab with the same page loaded.

I know we can't use the Blazor signalR connection directly for this, so I have an empty Hub setup, with a C# Client connected in my razor component code behind.
I don't know how to handle this use case, possibly through some sort of events raised again?


SP Sowmiya Padmanaban Syncfusion Team January 13, 2020 11:08 AM UTC

Hi David, 
We have analyzed your requirement (using signalR for detecting changes in razor pages) and consider this as a custom sample from our end. We will provide the sample to you on next week. Please be patience until then. 
Please let us know, if you need any further assistance on this. 

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 20, 2020 02:04 PM UTC

Hi David, 
Thanks for the patience. 

We have achieved your requirement using SignalR (While drag and drop in dashboard layout, the changes are reflected in another page). Refer the sample link below. 
Steps for creating a sample. 
1.      Install the syncfusion dependency package and render the dashboard layout component inside the index page. 
2.      Install the signalR dependency. 
3.      Refer the signalR link in host.cshtml page and startup.cs file. 
public void ConfigureServices(IServiceCollection services) 
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 
            app.UseSignalR(routes => routes.MapHub<ScheduleHub>("/scheduleHub")); 
4.      Create a Hub class inside the Pages folder and call the client-side method. 
    public class ScheduleHub:Hub 
        public async Task Dashboard(string id, int row, int column) 
            // Call the client side method by passing dragging panel values. 
           await Clients.Others.SendAsync("ChangeView", id, row, column); 
5.      Bind the dragStop event for dashboard layout and call the server side Dashboard() method  that invoke the client side the ChangeView() method and update the panel settings in movePanel() method. Refer the below code snippet. 
@using Microsoft.JSInterop; 
@using Microsoft.AspNetCore.SignalR.Client 
@using Syncfusion.EJ2.Blazor.Layouts 
<EjsDashboardLayout @ref="dashboard" ID="dashboard" CellSpacing="@(new double[]{10 ,10 })" Columns="5"> 
        <DashboardLayoutEvents OnDragStop="dragStop"></DashboardLayoutEvents> 
    IJSRuntime JsRuntime { get; set; } 
    EjsDashboardLayout dashboard; 
    public string id; 
    public int row; 
    public int col; 
    HubConnection connection; 
    protected override async Task OnInitializedAsync() 
        // Create a Hub connection. 
        connection = new HubConnectionBuilder().WithUrl("https://localhost:44363/ScheduleHub").Build(); 
        // Detect the client event from server side. 
        connection.On<string,int, int>("ChangeView", OnChangeView1); 
        await connection.StartAsync(); 
    public async Task dragStop(DragStopArgs args) 
        // Fetch the corresponding drag element. 
        var id = args.Element.ID; 
        // Get the current dashboard layout panel position using Serialize() method 
       var value =  await this.dashboard.Serialize(); 
        for(int i=0;i<value.Count;i++) 
            if(value[i].Id == args.Element.ID) 
                // Assign the corresponding row and column based on id after drag complete. 
                row = value[i].Row; 
                col = value[i].Col; 
        // Call the dashboard method method inside the Hub. 
        connection.InvokeAsync("Dashboard", id, row , col); 
    Task OnChangeView1 (string id, int row, int column) 
        // Call the movePanel method to assign the exact position of dashboard layout after dragging. 
        // MovePanel(id, row, column) 
        this.dashboard.MovePanel(id, row, column); 
        return Task.CompletedTask; 

Please let us know, if you need any further any assistance. 
Shameer Ali Baig S. 

DA David January 24, 2020 11:58 PM UTC

Thats awesome - the support here is first class!

Thanks very much

SP Sowmiya Padmanaban Syncfusion Team January 27, 2020 05:10 AM UTC

Hi David,  
Most welcome. we are happy to hear that the provided solution meet your exact requirement. Please let us know, if you need any further assistance on this. 

Live Chat Icon For mobile
Up arrow icon