Initialize from table then use DataSource for future pages?

2 posts, 0 answers
  1. ColinBowern
    ColinBowern avatar
    51 posts
    Member since:
    Aug 2012

    Posted 11 Aug 2012 Link to this post

    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.
  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 16 Aug 2012 Link to this post

    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">
                            <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>
                            <td>1</td><td>9.2</td><td>The Shawshank Redemption</td><td>1994</td>
                            <td>2</td><td>9.2</td><td>The Godfather</td><td>1972</td>
                            <td>3</td><td>9</td><td>The Godfather: Part II</td><td>1974</td>
                            <td>4</td><td>8.9</td><td>Il buono, il brutto, il cattivo.</td><td>1966</td>
                            <td>5</td><td>8.9</td><td>Pulp Fiction</td><td>1994</td>
                            <td>6</td><td>8.9</td><td>12 Angry Men</td><td>1957</td>
                            <td>7</td><td>8.9</td><td>Schindler's List</td><td>1993</td>
                            <td>8</td><td>8.8</td><td>One Flew Over the Cuckoo's Nest</td><td>1975</td>
                            <td>10</td><td>8.8</td><td>The Dark Knight</td><td>2008</td>
                    $(document).ready(function () {
                            height: 250,
                            dataSource: {
                                pageSize: 10,
                                type: "odata",
                                transport: {
                                    read: ""
                                schema: {
                                    model: {
                                        fields: {
                                            OrderID: { type: "number" },
                                            Freight: { type: "number" },
                                            ShipName: { type: "string" },
                                            OrderDate: { type: "date" },
                                            ShipCity: { type: "string" }

    I hope this helps.

    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top