Initialisation from table containing page X

[Marek]

Is it possible to initialise grid from table that only contains one page of datasource and use remote datasource for another pages?

Ie. there will be HTML table containing page 5 and I want to generate kendo grid from this table and need to tell kendo that its page 5 and to load another pages to use datasource.

[Vladimir Iliev]

Hi Marek,

 
It's possible to achieve the desired behavior by setting the following grid options:

Grid:

• autobind to false

DataSource:

• pageSize to desired value
• total to the correct total count of all items
• page to desired page

Please check the example below:

<table id="grid">
    <thead>
        <tr>
            <th data-field="Rank">Rank</th>
            <th data-field="Rating">Rating</th>
            <th data-field="Title">Title</th>
            <th data-field="Year">Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td><td>9.2</td><td>The Shawshank Redemption</td><td>1994</td>
        </tr>
        <tr>
            <td>12</td><td>9.2</td><td>The Godfather</td><td>1972</td>
        </tr>
        <tr>
            <td>13</td><td>9</td><td>The Godfather: Part II</td><td>1974</td>
        </tr>
        <tr>
            <td>14</td><td>8.9</td><td>Il buono, il brutto, il cattivo.</td><td>1966</td>
        </tr>
        <tr>
            <td>15</td><td>8.9</td><td>Pulp Fiction</td><td>1994</td>
        </tr>
        <tr>
            <td>16</td><td>8.9</td><td>12 Angry Men</td><td>1957</td>
        </tr>
        <tr>
            <td>17</td><td>8.9</td><td>Schindler's List</td><td>1993</td>
        </tr>
        <tr>
            <td>18</td><td>8.8</td><td>One Flew Over the Cuckoo's Nest</td><td>1975</td>
        </tr>
        <tr>
            <td>19</td><td>8.8</td><td>Inception</td><td>2010</td>
        </tr>
        <tr>
            <td>20</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,
            serverOperation: false,
            dataSource: {
                pageSize: 10,
                total: 22,
                page: 2,
                transport: {
                    read: "/Home/Read"
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    model: {
                        fields: {
                            Rank: { type: "number" },
                            Rating: { type: "number" },
                            Title: { type: "string" },
                            Year: { type: "string" }
                        }
                    }
                }
            }
        });
    });
</script>

Kind Regards,
Vladimir Iliev
the Telerik team