All Components
Theme

Themes

    Grid / Binding to WebSocket

    Information

    This example demonstrates real-time push-notifications from a WebSocket. 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.

    Description

    There are situations when you would like to perform real-time updates for all users which start a session with your web app.

    This is when you can utilize WebSockets and the Kendo UI DataSource. The latter supports WebSockets by setting transport->push/read/update/destroy/create methods configuration for handling data requests in this way.  In this way you tell the data source to use web sockets for transmitting and operating with data in real time on every page refresh, also known under the term long polling.

    This is especially useful for web applications which require high-frequency updates, for instance chat apps, real-time gaming, etc. More on the WebSockets support of the Kendo UI Data Source can be found in this section of the docs.

    HTML5/JavaScript source

    API Reference
    • web-socket.html
    • Sample service
    • Widget configuration

    Support & learning resources