New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Bind Grids to SignalR Hub
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Product version | 2025.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:
-
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>
-
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>
-
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
- ASP.NET MVC Grid Documentation
- ASP.NET MVC Grid Demos
- ASP.NET MVC Grid Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums