# Bind Grids to SignalR Hub

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Telerik UI for ASP.NET MVC Grid</td>
 </tr>
 <tr>
  <td>Product version</td>
  <td>2025.1.227</td>
 </tr>
</table>

## Description

How can I bind the Grid to [SignalR](https://learn.microsoft.com/en-us/aspnet/signalr/overview/getting-started/) Hub for real-time push notifications?

## Solution

Follow the steps below to configure the Grid's DataSource for [SignalR binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/binding/signalr-binding):

1. Add a reference to the [ASP.NET SignalR client-side library](https://learn.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client).

   ```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 HtmlHelper
   @(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](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridSignalR).

## More ASP.NET MVC Grid Resources

* [ASP.NET MVC Grid Documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/overview)
* [ASP.NET MVC Grid Demos](https://demos.telerik.com/aspnet-mvc/grid/index)
* [ASP.NET MVC Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)
* [Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-mvc/documentation/getting-started/video-onboarding)
* [Telerik UI for ASP.NET MVC Forums](https://www.telerik.com/forums/aspnet-mvc)

## See Also

* [Client-Side API Reference of the Grid for ASP.NET MVC](https://docs.telerik.com/kendo-ui/api/ui/grid)
* [Server-Side API Reference of the Grid for ASP.NET MVC](https://docs.telerik.com/aspnet-mvc/api/grid)
* [Telerik UI for ASP.NET MVC Knowledge Base](https://docs.telerik.com/aspnet-mvc/knowledge-base)