This is a migrated thread and some comments may be shown as answers.
Initialize from table then use DataSource for future pages?
1 Answer 66 Views
This is a migrated thread and some comments may be shown as answers.
ColinBowern
Top achievements
Rank 1
ColinBowern asked on 12 Aug 2012, 01:47 AM
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.

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 16 Aug 2012, 07:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
ColinBowern
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or