R1 2019 Release is here. See what's new!
Change Theme

SASS Themes

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      Binding to local data


      The Kendo UI grid suppports data binding and you can command the widget to display data either from local or remote data storage. For local data binding you simply need to supply an array of JavaScript objects/JSON via the dataSource data property of the grid, or utilize the Kendo UI DataSource as a mediator between the grid and the underlying data.

      In this example the grid fetches its data from a JavaScript file named products, registered via a script tag in the head section of the page. Note that in addition to the visualization, the grid provides built-in support for operations over data such as sorting, filtering and paging.

      There are two possible ways to instantiate a Kendo UI grid:

      1. From an empty div element. In this case all the Grid settings are provided in the initialization script statement.
      2. From an existing HTML table element. Thus some of the Grid settings can be inferred from the table structure and elements HTML attributes.

      In both cases the grid is registered as a standard jQuery plugin.

      Additional information about how to utilize the data binding feature of the Kendo UI grid can be found in this section of the product documentation.

      HTML5/JavaScript source

      Also available for:

      API Reference
      • local-data-binding.html
      • Sample service
      • products.js
      • Widget configuration

      Support & learning resources

      Grid for other technologies