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.
New Product LaunchBoldDesk: Help desk ticketing software.
Try it for free.|
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;
}
} |
