+977-9849845061

Turn HTML table to Kendo UI Grid

 

Kendo UI from HTML Table

When grid is initialized from an existing HTML table, this HTML table is usually already populated with data.

Grid uses a Kendo UI DataSource instance even when it is created from a table. When we initialize the Grid from an HTML table, some of its settings can be inferred from the table structure and the HTML attributes of the elements. This means that we can describe the layout of the Grid entirely in the HTML of the 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 Grid uses a Kendo UI DataSource instance even when the widget is created from an HTML table. The content of the cell is extracted and populates the DataSource in the following way:

  1. The names of the data fields in the DataSource are either created from the content of the header cells or from the data-field attributes of the header cells.
  2. The names of the data fields have to be valid JavaScript identifiers. Therefore, it is recommended to use the data-field attributes. Otherwise the cell content of the header has to meet the following requirements:
    • No spaces
    • No special characters
    • The first character has to be a letter

When the Grid is created from an existing table, you can define the following column settings through the HTML attributes:

  • The data-field attributes define the names of the data fields.
  • The width styles when applied to the respective <col> elements set the width of the columns.
  • The data-type attributes define the data types.
  • The data-template attributes set the column templates.
  • The data-menu attributes enable or disable the column menu.
  • The data-sortable attributes enable or disable sorting.
  • The data-filterable attributes enable or disable filtering.
  • The data-groupable attributes enable or disable grouping.

For more information about Kendo UI Grid using HTML Tables Read this article

 

Explanation with Example

Lets consider we have a HTML table as follows:

The above code return output as follows

 

Now lets convert this Normal HTML Table to Kendo UI Grid.

Step 1: Add reference to Kendo UI Grid CSS and JS

Step 2: Provide a ID to HTML Table as below

Step 3: Convert HTML Table to Kendo UI Grid using Javascript

 

Sorting (Ascending and Descending)

We can easily add sorting ability to Kendo UI Grid just by defining column property as

sortable: true/false

Output

 

 

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...