New to Kendo UI for jQuery? Download free 30-day trial

Initialization from table

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • from-table.html
  • Sample service

Description

When grid is initialized from an existing HTML table, this table is presumably already populated with data. This improves accessibility and SEO, and warrants the data will be visible even when JavaScript is disabled or there's a JavaScript error on the page.

Note that the Grid uses a Kendo UI DataSource instance even when it is created from a table. The cell content is "fetched" and thus the DataSource is fed with data. The data field names in the DataSource are either created from the header cell content or the data-field attributes of the header cells. The data field names should be valid Javascript identifiers, that's why it is recommended to use data-field attributes, otherwise the header cell content must obey several limitations:

  • no spaces
  • no special characters
  • the first character should be a letter

When creating the Grid from an existing table, the column settings can be defined via HTML attributes. More information regarding Kendo UI grid creation from data table can be found in the documentation here.

Support & Learning Resources