All Components


    Grid / 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