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

Grid Paging not properly

2 Answers 227 Views

Grid

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

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
        {
            width: 692px;
            height: 413px;
            margin: 30px auto;
            padding: 51px 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="height: 380px;">
                <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

Accepted

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!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Grid Paging not properly

2 Answers, 1 is accepted