New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Bind Grids to SignalR Hub

Environment

ProductTelerik UI for ASP.NET MVC Grid
Product version2025.1.227

Description

How can I bind the Grid to SignalR Hub for real-time push notifications?

Solution

Follow the steps below to configure the Grid's DataSource for SignalR binding:

  1. Add a reference to the ASP.NET SignalR client-side library.

    HTML
    <script src="https://cdn.jsdelivr.net/npm/signalr@2.4.3/jquery.signalR.min.js"></script>
  2. Initialize and start the hub.

    JS
    <script>
        var hubUrl = "path/to/hub";
        var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
        var hub = connection.createHubProxy("productHub");
        var hubStart = connection.start({ jsonp: true });
    </script>
  3. Define the Grid and its DataSource instance appropriately:

    Razor
    @(Html.Kendo().Grid<ProductViewModel>()
        .Name("Grid")
        ... // Additional configuration.
        .DataSource(dataSource => dataSource
            .SignalR()
            .AutoSync(true)
            .Events(events => events.Push(@<text>
                function(e) {
                    var notification = $("#notification").data("kendoNotification");
                    notification.success(e.type);
                }
            </text>))
            .PageSize(10)
            .Transport(tr => tr
                .Promise("hubStart")
                .Hub("hub")
                .Client(c => c
                    .Read("read")
                    .Create("create")
                    .Update("update")
                    .Destroy("destroy"))
                .Server(s => s
                    .Read("read")
                    .Create("create")
                    .Update("update")
                    .Destroy("destroy")))
            .Schema(schema => schema
                .Model(model =>
                {
                    model.Id(m => m.ProductID);
                    model.Field(m => m.ProductID).Editable(false);
                })
            )
        )
    )

To review the complete example, refer to the ASP.NET MVC project on how to set up the Grid for real-time push-notifications from SignalR(v2) with a local hub.

More ASP.NET MVC Grid Resources

See Also