Initialize from table then use DataSource for future pages?

[ColinBowern]

I'm curious if it is supported to connect a grid that is initialized from a table with a dataSource for future paging calls?

For example - page 1 comes down pre-rendered with the HTML payload; user hits the next page link and the grid now uses AJAX to pull down JSON for the next set of items and renders them on the table.

[Petur Subev]

Hello Colin,

You could try to achieve this scenario by setting a dataSource configuration after initializing the Grid from table. However you will need to know the total number of items when you are initializing the Grid.
Here is an example configuration (I used the official demos just to test):

<table id="grid">
                <thead>
                    <tr>
                        <th data-field="OrderID">Rank</th>
                        <th data-field="Freight">Rating</th>
                        <th data-field="ShipName">Title</th>
                        <th data-field="OrderDate">Year</th>
                        <th data-field="ShipCity">Year</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td><td>9.2</td><td>The Shawshank Redemption</td><td>1994</td>
                    </tr>
                    <tr>
                        <td>2</td><td>9.2</td><td>The Godfather</td><td>1972</td>
                    </tr>
                    <tr>
                        <td>3</td><td>9</td><td>The Godfather: Part II</td><td>1974</td>
                    </tr>
                    <tr>
                        <td>4</td><td>8.9</td><td>Il buono, il brutto, il cattivo.</td><td>1966</td>
                    </tr>
                    <tr>
                        <td>5</td><td>8.9</td><td>Pulp Fiction</td><td>1994</td>
                    </tr>
                    <tr>
                        <td>6</td><td>8.9</td><td>12 Angry Men</td><td>1957</td>
                    </tr>
                    <tr>
                        <td>7</td><td>8.9</td><td>Schindler's List</td><td>1993</td>
                    </tr>
                    <tr>
                        <td>8</td><td>8.8</td><td>One Flew Over the Cuckoo's Nest</td><td>1975</td>
                    </tr>
                    <tr>
                        <td>9</td><td>8.8</td><td>Inception</td><td>2010</td>
                    </tr>
                    <tr>
                        <td>10</td><td>8.8</td><td>The Dark Knight</td><td>2008</td>
                    </tr>
                </tbody>
            </table>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        height: 250,
                        pageable:true,
                        autoBind:false,
                        dataSource: {
                            pageSize: 10,
                            total:830,
                            type: "odata",
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                            },

                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            }
                        }
                    });
                });
            </script>

I hope this helps.

Kind regards,
Petur Subev
the Telerik team