Manual refresh of the Grid's data with 'offline' data for client-side processing (e.g., filtering)
Hi Cornelius,
Thank you for your patience and for providing more details about your requirement.
Based on the provided details, we understand that your primary requirement is to reload the dataSource of the Grid with DataManager, which utilizes RemoteSaveAdaptor. You can achieve this by creating a new instance of DataManager with RemoteSaveAdaptor and fetching data every time data reload is needed. Please find the code snippet below for your reference:
|
[Views\Home\Index.cshtml]
// fetching data and bind it to the Grid via RemoteSaveAdaptor // call this method every time data reload needed async function fetchData() { // Base API URL const baseURL = "Home/RemoteSaveDataSource";
// fetching data from server using fetch request const response = await fetch(baseURL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, });
// await the response data const data = await response.json();
// the response data to the DataManager with RemoteSaveAdaptor // and then bind the DataManager instance to the Grid grid.dataSource = new ej.data.DataManager({ adaptor: new ej.data.RemoteSaveAdaptor(), insertUrl: "/Home/Insert", updateUrl: "/Home/Update", removeUrl: "/Home/Delete", json: data, }); }
|
Regarding the requirement to reflect the changes to every user if the server gets updated, we have implemented a solution that utilizes SignalR to notify all clients about the server-side update. Based on this update, we will fetch the data again from the server and bind it to the new DataManager instance, and then assign it to the Grid dataSource. We have created a working sample implementing this by using JavaScript EJ2 Grid on the client side and ASP.Net Core on the server side. Please find the steps involving the procedure to implement SignalR with the above-configured project for your reference below:
- Need
to add a dependency for SignalR on both Client and Server sides:
Add CDN reference or script reference of SignalR on the client side:
|
[Views\Shared\_Layout.cshtml]
<head> . . . . . <!— SignalR CDN à <script src=https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js integrity=”sha512-7rhBJh1om/W5Ztx7WiYOR9h2wlSaTmPyQMoHFtbT/FVNIA12y6S6I8HY9mrBS1uJ3dSU/R3qaSAXsGYuRjMDxg==” crossorigin=”anonymous” referrerpolicy=”no-referrer”> </script> </head>
|
For the server side, add the package "Microsoft.AspNetCore.SignalR"
through .NET CLI.
- Create
a SignalR hub:
Create a SignalR hub that will handle the real-time communication. Please find a simple hub that is utilized in our sample for your reference below:
|
[GridUpdateHub.cs]
using Microsoft.AspNetCore.SignalR;
public class GridUpdateHub : Hub { public async Task SendGridUpdateNotification() { await Clients.All.SendAsync("ReceiveGridUpdate"); } }
|
- Configure SignalR in Program.cs or Startup.cs:
|
[Program.cs]
// Add SignalR service builder.Services.AddSignalR();
. . . . .
app.UseEndpoints(endpoints => { endpoints.MapHub<GridUpdateHub>("/gridUpdateHub"); // Map SignalR hub endpoint endpoints.MapControllers(); // Add this line if you want to use controller endpoints });
|
- Modify
your controller methods to send update notifications:
Configure all the CRUD method on server side to send notification to clients through SignalR service.
|
[Controllers\HomeController.cs]
public IActionResult Insert([FromBody] CRUDModel<Orders> value, [FromServices] IHubContext<GridUpdateHub> hubContext) { order.Insert(0, value.Value);
// send notification to connected clients through SignalR hubContext.Clients.All.SendAsync("ReceiveGridUpdate");
return Json(value.Value); }
|
- Client-side integration:
|
[Views\Home\Index.cshtml]
// creating instance of signalR connection builder // CDN reference added in "Shared/_Layout.cshtml" head tag var connection = new signalR.HubConnectionBuilder() .withUrl("/gridUpdateHub") .configureLogging(signalR.LogLevel.Information) .build();
// start the connection connection.start().then(function () { console.log("SignalR connected."); }).catch(function (err) { return console.error(err.toString()); });
// notification listener for server update connection.on("ReceiveGridUpdate", function () { // reload the data from server and bind to the Grid fetchData(); });
|
With these changes, the Grid will now refresh automatically whenever an update occurs on the server side. Make sure your client and server configurations are aligned, and SignalR endpoints are accessible from the client-side code.
Attached below are the GIF demonstration and sample for your reference.
Please let us know if you
have any further queries or require additional assistance.
Regards,
Santhosh I
Attachment: CoreGridApp_4e05fe99.zip
