How to use SignalR Datasource with Kendo Grid

Question

In order to make a real-time .NET Web application, I am using SignalR for Kendo grid, which works with read, update, destroy method on the grid.

However, my situation is creating and updating records from other pages, the Kendo Grid just for reading data. I would like to implement SignalR to notify user whenever a new record is added to the database.

Here is my code.

SignalRHub class:

public class SignalRHub : Hub
{
    private DbEntities db;
    
    public SignalRHub()
    {
        db = new DbEntities();
    }

    public IEnumerable<ViewTicketModel> Read()
    {
        return db.Post_User.AsEnumerable()
            .Select(ticket => new ViewTicketModel
            {
                Id = ticket.Id,
                BuyerName = ticket.Name,
                DateCreated = ticket.CreatedOn.ToString("dd/MM/yyyy"),
                BuyerPhoneNumber = ticket.Mobile,
                Details = ticket.Details,
                Location = ticket.Location,
            })
            .OrderByDescending(x => DateTime.ParseExact(x.DateCreated, "dd/MM/yyyy", null))
            .ToList();
    }
}

Index.cshtml:

var connection = $.connection;
var hub = connection.signalRHub;
var hubStart = connection.hub.start();

console.log("here");

var signalRDataSource = new kendo.data.DataSource({
    type: "signalr",
    autoSync: true,
    push: function(e) {
        var notification = $("#notification").data("kendoNotification");
        notification.success(e.type);
    },
    schema: {
        model: {
            id: "Id",
            fields: {
                "Id": { editable: false, type: "Number" },
                "BuyerName": { type: "string" },
                "DateCreated": { type: "string" },
                "BuyerPhone": { type: "string" },
                "Details": { type: "string" },
                "Location": { type: "string" }
            }
        }
    },
    transport: {
        signalr: {
            promise: hubStart,
            hub: hub,
            server: {
                read: "read",
            },
            client: {
                read: "read",
            }
        }
    },
    pageSize: 10,
});

$("#grid").kendoGrid({
    height: 700,           
    filterable: {
        extra: false,
    },
    pageable: true,
    sortable: {
        mode: "multiple",
        allowUnsort: true
    },
    columns: [
        { field: "Id", title: "Notification Id", width: 100, hidden: true },
        {
            field: "DateCreated",
            title: "Date Created",
            width: 150,
            filterable: {
                ui: "datetimepicker"
            }
        },
        { field: "Location", title: "Location", width: 150 },                   
        { field: "BuyerName", title: "Buyer Name", width: 120, hidden: true },
        { field: "BuyerPhoneNumber", title: "Buyer Phone", width: 120, hidden: true },
    ],
    dataSource: signalRDataSource
});

Answer 1

by other pages, you meant different application? If that is the case, this will complicate the issue.

remember kendo grid only comes with 4 default signal actions (create, update, read, destroy). Any other will have to be implemented by you.

here's an example how you can make your "connected" clients do a refresh read.

in your hub:

IHubContext context = GlobalHost.ConnectionManager.GetHubContext<Dashboard>();
        context.Clients.All.reload();

in your client html page:

<script type="text/javascript">
var hub = $.connection.dashboard;
hub.client.reload = function () {
    updategrid();
};
var hubStart = $.connection.hub.start();
function updategrid()
{
    $('#GridName').data('kendoGrid').dataSource.read();
    $('#GridName').data('kendoGrid').refresh();
}</script>

This will force all your connected clients to do a refresh. The perfect scenario would be to the appropriate changes pushed out to the client. This implementation can get tricky, because you don't know what filter/sort/grouping the user has on their side. However, it's achievable. You can have each connected client to send it's filter/grouping/sort back to the server and pull only the appropriate change.