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

Grid Paging not properly

2 Answers 214 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Fenil
Top achievements
Rank 1
Fenil asked on 17 Jan 2013, 11:23 AM
Hi,

I am rebinding datasource to Grid on click event of button but paging doesn't work properly.
My code is like this.

<!DOCTYPE html>
<html>
<head>
    <title>YouTube</title>
    <link href="Kendo/kendo.common.css" rel="stylesheet" type="text/css" />
    <link href="Kendo/kendo.default.css" rel="stylesheet" type="text/css" />
    <script src="Kendo/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="Kendo/kendo.web.js" type="text/javascript"></script>
    <script src="Kendo/console.js" type="text/javascript"></script>
    <style scoped type="text/css">
        #clientsDb
        {
            width692px;
            height413px;
            margin30px auto;
            padding51px 4px 0 4px;
        }
    </style>
</head>
<body>
    <input id="txtSearch" type="text" />
    <input id="btnView" type="button" value="view" onclick="GetVideos(); return false;" />
    <div id="example" class="k-content">
        <div id="clientsDb">
            <div>
            </div>
            <table id="grid" style="height380px;">
                <thead>
                    <tr>
                        <th colspan="3">
                            Videos
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script id="rowTemplate" type="text/x-kendo-tmpl">
                <tr class="k-alt">
                    <td colspan="3">
                        <img src="${ media$group.media$thumbnail[1].url }" alt="${ title.$t }" />
                    <span> <a onclick="" href="${link[0].href}">Play</a>  </span>
                         
                    <br />
                        ${ title.$t }
                    </td>
                </tr>
        </script>
        <script type="text/javascript">
            function GetVideos() {
 
                var grid = $("#grid").data("kendoGrid");
               
                var template = kendo.template($("#rowTemplate").html());
                var dataSource = new kendo.data.DataSource({
 
                    transport: {
                        read: {
                            // the remote service url
                            url: "https://gdata.youtube.com/feeds/api/videos?alt=json&q=" + $("#txtSearch").val() + "&orderby=relevance",
                            // JSONP is required for cross-domain AJAX
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        data: "feed.entry"
                    },
                    change: function () { // subscribe to the CHANGE event of the data source
                        $("#grid tbody").html(kendo.render(template, this.view())); // populate the table
                    }
                , pageSize: 5,
                    pageable: true, serverPaging: true
                });
 
                dataSource.read();
                grid.refresh();
                return false;
 
            }
 
            $("#txtSearch").keydown(function (e) {
                if (e.keyCode === kendo.keys.ENTER) {
                    GetVideos();
                }
                if (e.keyCode === kendo.keys.TAB) {
                    GetVideos();
                }
            });
 
            $(document).ready(function () {
                $("#grid").kendoGrid({
                pageable: true, serverPaging: true,
                    dataSource: {
 
                        pageSize: 5
                    },
 
                    height: 500,
                    pageSize: 5,
                    groupable: false,
                    sortable: true,
                    filterable: true,
                    columnMenu: true,
                    reorderable: false,
                    resizable: true,
                    pageable: true,
                    pageable: {
                        pageSizes: [5, 10, 25, 50, 100]
                    },
                    scrollable: true
                });
 
                $("#txtSearch").focus();
            });
        </script>
    </div>
</body>
</html>

Please give solution for this problem.

2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 21 Jan 2013, 09:53 AM
Hello Fenil,

I would not recommend re-building the Grid's DataSource. Instead please consider to only modify the URL of the read request. For convenience please check the second code example from the relevant documentation.

In addition there is no need to refresh the Grid manually, when the read request finished successfully the widget will automatically refresh to apply the changes.

Also since you have enabled serverPaging, it is required to set the total amount of records through the schema.total option. If the service returns whole data set at once and you want to perform paging on the client, serverPaging option should be set to false.

I hope this will help. Please test the suggested solutions and let me know if the problem still persists.
Thank you in advance.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Fenil
Top achievements
Rank 1
answered on 21 Jan 2013, 02:47 PM
it works. Thanks.
Tags
Grid
Asked by
Fenil
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Fenil
Top achievements
Rank 1
Share this question
or