CODEWITHSUNDEEP
kendo-uikendo-grid
user2345467
user2345467

Reputation: 37

Kendo UI Grid Edit from initialization from html table

I have been playing around with Kendo UI Grid and I like how it can take a HTML mark-up table very easy.

Is it possible to use HTML mark-up table and make into Kendo Editable Grid.

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

Upvotes: 2

Views: 2933

Answers (1)

Joel
Joel

Reputation: 2257

In case anyone else needs assistance with this, here is the solution. Let's say I created a table with the 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 that there is an empty header and data column. This is where KendoUI will add the command buttons when the grid is initialized.

To initialize this as an editable KendoUI Grid, you would use the 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 then customize your editor templates and such the same as you would when creating the grid from remote or local JSON data.

As an additional note, in my version of KendoUI, there is a bug in the popup editor window. You'll need to add this style override in order to make the popup window display correctly if it's not (i.e. all you see is a small white square in the middle of the screen):

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

Upvotes: 5

Related Questions