Kendo UI Grid Edit from initialization from html table -

i have been playing around kendo ui grid , how can take html mark-up table easy.

is possible use html mark-up table , make kendo editable grid.

http://demos.kendoui.com/web/grid/from-table.html

in case else needs assistance this, here solution. let's created table following form:

<table id="data">     <thead>         <tr>             <th>field 1</th>             <th>field 2</th>             <th>field 3</th>             <th></th>         </tr>     </thead>     <tbody>         <tr>             <td>field 1 data</td>             <td>field 2 data</td>             <td>field 3 data</td>             <td></td>         </tr>     </tbody> </table> 

note there empty header , data column. kendoui add command buttons when grid initialized.

to initialize editable kendoui grid, use following javascript:

$("#data").kendogrid({         editable: "popup", //or "inline"         columns: [             { field: "field1", title: "field 1" },             { field: "field2", title: "field 2" },             { field: "field3", title: "field 3" },             { command: "edit" }         ]     }); 

you can customize editor templates , such same when creating grid remote or local json data.

as additional note, in version of kendoui, there bug in popup editor window. you'll need add style override in order make popup window display correctly if it's not (i.e. see small white square in middle of screen):

.k-window     {         transform: none !important;     }