This is a migrated thread and some comments may be shown as answers.

[Solved] Kendo Grid - Paging Not working

0 Answers 75 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Scott Wade asked on 13 Jul 2012, 07:11 PM

I have a web page that has a static HTML table. One of the examples of the Grid shows how to use the Kendo Grid over an existing table. Works great. Now I want to apply paging to the grid using the static html table.

The paging example for the Grid is using the datasource to load the table. I can't get the paging to work using the static html table. Here is my code.

Thanks,
Scott

<body>

        <div id="example" class="k-content">
           <table id="grid">

    <tbody>
    <thead>
                    <tr>
                        <th data-field="column1">Data</th>
                        <th data-field="column2">Jan 2011</th>
                        <th data-field="column3">Jan 2012</th>

                    </tr>
                </thead>

        <tr>
            <td>
            <p><strong>Residential</strong></p>
            </td>
            <td>
            <p><strong>$8.50 </strong></p>
            </td>
            <td>
            <p><strong>$ 9.35 </strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Small Commercial</strong></p>
            </td>
            <td>
            <p><strong>17.00 </strong></p>
            </td>
            <td>
            <p><strong>18.70 </strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Large Commercial</strong></p>
            </td>
            <td>
            <p><strong>35.00 </strong></p>
            </td>
            <td>
            <p><strong>38.50</strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Multi-Unit</strong></p>
            </td>
            <td>
            <p><strong>26.00 </strong></p>
            </td>
            <td>
            <p><strong>28.60</strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Fire Service</strong></p>
            </td>
            <td>
            <p><strong>17.00 </strong></p>
            </td>
            <td>
            <p><strong>18.70 </strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Residential</strong></p>
            </td>
            <td>
            <p><strong>$8.50 </strong></p>
            </td>
            <td>
            <p><strong>$ 9.35 </strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Small Commercial</strong></p>
            </td>
            <td>
            <p><strong>17.00 </strong></p>
            </td>
            <td>
            <p><strong>18.70 </strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Large Commercial</strong></p>
            </td>
            <td>
            <p><strong>35.00 </strong></p>
            </td>
            <td>
            <p><strong>38.50</strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Multi-Unit</strong></p>
            </td>
            <td>
            <p><strong>26.00 </strong></p>
            </td>
            <td>
            <p><strong>28.60</strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <p><strong>Fire Service</strong></p>
            </td>
            <td>
            <p><strong>17.00 </strong></p>
            </td>
            <td>
            <p><strong>18.70 </strong></p>
            </td>
        </tr>
    </tbody>
</table>

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
      dataSource: {
                            pageSize: 4
                        },
                        height: 250,
      sortable: true,
      pageable: {
                            refresh: true,
                            pageSizes: true
                        },

                    });
                });
            </script>
        </div>
</body>

Tags

Grid

Asked by