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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
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"));
} |
|
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);
}
} |
|
@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.
// 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;
}
} |
