Initialize from table containing input elements

2 posts, 0 answers
  1. Paul
    Paul avatar
    1 posts
    Member since:
    Oct 2015

    Posted 25 Feb 2016 Link to this post

    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>

  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 29 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top