Initialize from table containing input elements

[Paul]

Hi All,

I need to initialize a Kendo UI grid from an existing table that contains a column with a "Select All" check box in the header and also check boxes in each row.

The example below shows exactly what I want, this is taken from Kendo's examples.

This issue is, the check box in each row is not rendered in the kendo generated grid. Is there a way to overcome this issue?

Thanks

<table id="grid">
    <thead>
        <tr>
            <th><input type="checkbox" id="cbSelectAll"/></th>
            <th data-field="make">Car Make</th>
            <th data-field="model">Car Model</th>
            <th data-field="year">Year</th>
            <th data-field="category">Category</th>
            <th data-field="airconditioner">Air Conditioner</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class='checkbox' value='1' /></td>
            <td>Audi</td>
            <td>A4</td>
            <td>2002</td>
            <td>Saloon</td>
            <td>Yes</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='checkbox' value='2' /></td>
            <td>BMW</td>
            <td>535d</td>
            <td>2006</td>
            <td>Saloon</td>
            <td>Yes</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='checkbox' value='3' /></td>
            <td>BMW</td>
            <td>320d</td>
            <td>2006</td>
            <td>Saloon</td>
            <td>No</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='checkbox' value='4' /></td>
            <td>VW</td>
            <td>Passat</td>
            <td>2007</td>
            <td>Saloon</td>
            <td>No</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='checkbox' value='5' /></td>
            <td>VW</td>
            <td>Passat</td>
            <td>2008</td>
            <td>Saloon</td>
            <td>Yes</td>
        </tr>
    </tbody>
</table>

<script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
            height: 550,
            sortable: true
        });
    });
</script>

[Rosen]

Hello Paul,

When initialized from a HTML table element only the actual text from the cell is extracted and then used for creation of the Grid's DataSource. The html is not persisted and it is overridden by the Grid's rendering. If you want to apply some customization, such as checkbox column, then a template column should be used as shown in this how-to article. 

Regards,
Rosen
Telerik