Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 150381 | Jan 4,2020 01:14 PM UTC | Jan 27,2020 05:10 AM UTC | Blazor | 6 |
|
Tags: Dashboard Layout |
|
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;
}
} |
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.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
