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

Dasboard Layout - Sync Changes in Realtime?

Thread ID:

Created:

Updated:

Platform:

Replies:

150381 Jan 4,2020 01:14 PM UTC Jan 27,2020 05:10 AM UTC Blazor 6
loading
Tags: Dashboard Layout
David
Asked On January 4, 2020 01:16 PM UTC

Hello
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!

Dave

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On 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. 
  
  
Regards, 
Shameer Ali Baig S. 


David
Replied On January 11, 2020 10:20 PM UTC

Hi

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?

Thanks


Sowmiya Padmanaban [Syncfusion]
Replied On 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. 
 
Regards, 
Sowmiya.P 


Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On 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. 
 
Host.cshtml 
 
 
 
Startup.cs 
 
public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddSignalR(); 
        } 
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> 
</EjsDashboardLayout> 
 
 
@code{ 
    [Inject] 
    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); 
        this.dashboard.Refresh(); 
        return Task.CompletedTask; 
    } 
} 

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


David
Replied On January 24, 2020 11:58 PM UTC

Thats awesome - the support here is first class!

Thanks very much

Sowmiya Padmanaban [Syncfusion]
Replied On 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. 
  
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