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

      Initialization from table

      Car Make Car Model Year Category Air Conditioner
      Volvo S60 2010 Saloon Yes
      Audi A4 2002 Saloon Yes
      BMW 535d 2006 Saloon Yes
      BMW 320d 2006 Saloon No
      VW Passat 2007 Saloon No
      VW Passat 2008 Saloon Yes
      Peugeot 407 2006 Saloon Yes
      Honda Accord 2008 Saloon No
      Alfa Romeo 159 2008 Saloon No
      Nissan Almera 2001 Saloon Yes
      Mitsubishi Lancer 2008 Saloon Yes
      Opel Vectra 2008 Saloon Yes
      Toyota Avensis 2006 Saloon No
      Toyota Avensis 2008 Saloon Yes
      Toyota Avensis 2008 Saloon Yes
      Audi Q7 2007 SUV Yes
      Hyundai Santa Fe 2012 SUV Yes
      Hyundai Santa Fe 2013 SUV Yes
      Nissan Qashqai 2007 SUV Yes
      Mercedez B Class 2007 Hatchback Yes
      Lancia Ypsilon 2006 Hatchback Yes


      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.

      HTML5/JavaScript source

      API Reference
      • from-table.html
      • Sample service
      • Widget configuration

      Support & learning resources

      Grid for other technologies