All Components

Grid / Binding to SignalR

Information

This example demonstrates real-time push-notifications from SignalR. To see the real-time updates:

  1. Open this page in another browser window by clicking here
  2. Create, update or destroy grid items.

Note: To further enhance real-time experience, the Grid will also display changes from other users, which currently happen to perform CRUD operations on the same demo. If you refresh the page, all changes will be lost, because the remote service only broadcasts changes, it does not actually save them.

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Binding to SignalR</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div id="grid" style="margin-bottom:20px"></div> 
   <span id="notification"></span> 
   <script src="../content/web/integration/jquery.signalr-1.1.3.min.js"></script> 
   <script>
        $(function(){
            var hubUrl = "//demos.telerik.com/kendo-ui/service/signalr/hubs";
            var connection = $.hubConnection(hubUrl, { useDefaultPath: false});
            var hub = connection.createHubProxy("productHub");
            var hubStart = connection.start({ jsonp: true });

            $("#notification").kendoNotification({
                width: "100%",
                position: {
                    top: 0,
                    left: 0
                }
            });
            $("#grid").kendoGrid({
                height: 550,
                editable: true,
                sortable: true,
                columns: [
                    { field: "UnitPrice" },
                    { field: "ProductName" },
                    { command: "destroy", width: 150}
                ],
                toolbar: ["create"],
                dataSource: {
                    type: "signalr",
                    autoSync: true,
                    // Handle the push event to display notifications when push updates arrive
                    push: function(e) {
                        var notification = $("#notification").data("kendoNotification");
                        notification.success(e.type);
                    },
                    schema: {
                        model: {
                            id: "ID",
                            fields: {
                                "ID": { editable: false, nullable: true },
                                "CreatedAt": { type: "date" },
                                "UnitPrice": { type: "number" }
                            }
                        }
                    },
                    sort: [ { field: "CreatedAt", dir: "desc" }],
                    transport: {
                        signalr: {
                            promise: hubStart,
                            hub: hub,
                            server: {
                                read: "read",
                                update: "update",
                                destroy: "destroy",
                                create: "create"
                            },
                            client: {
                                read: "read",
                                update: "update",
                                destroy: "destroy",
                                create: "create"
                            }
                        }
                    }
                }
            });
        });
    </script> 
   <div class="box wide"> 
    <h4>Information</h4> 
    <p>This example demonstrates real-time push-notifications from <a href="http://signalr.net/">SignalR</a>. To see the real-time updates:</p> 
    <ol> 
     <li>Open this page in another browser window by clicking <a href="./signalr" target="_new">here</a></li> 
     <li>Create, update or destroy grid items.</li> 
    </ol> 
    <p><strong>Note:</strong> To further enhance real-time experience, the Grid will also display changes from other users, which currently happen to perform CRUD operations on the same demo. If you refresh the page, all changes will be lost, because the remote service only broadcasts changes, it does not actually save them.</p> 
   </div> 
  </div>   
 </body>
</html>