CODEWITHSUNDEEP
jquerykendo-ui
kwk.stack
kwk.stack

Reputation: 553

Kendo ui pagination issue

i am working on a kendo ui grid http://demos.kendoui.com/web/grid/index.html and i want to show only 5 records at a time and also show others through pagination so i use this code

 $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: createRandomData(50),
                        pageSize: 5
                    },
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true
                    },
                    columns: [ {
                            field: "FirstName",
                    attributes:{"class": "table-cell"}        


                        } , {
                            field: "LastName",
                   attributes:{"class": "table-cell"}         
                        } , {
                            field: "City",
                   attributes:{"class": "table-cell"}           
                        } , {
                            field: "Title",
                   attributes:{"class": "table-cell"}           
                        } , {
                            field: "BirthDate",
                            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #',
                   attributes:{"class": "table-cell"}           
                        } , {

                            field: "Age",
                   attributes:{"class": "table-cell"}       
                        }
                    ]
                });
            });
        </script>

pageable on line number 9 enables pagination but it enables every thing in footer bar and i dont need all i only need next and previous buttons adjecent to each other as well :). i also read out all its documentation http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/configuration but i found no solution for it or may i missed it.

Upvotes: 0

Views: 6314

Answers (3)

Atanas Korchev
Atanas Korchev

Reputation: 30671

You need to check the pager documentation which shows how to disable certain options that are enabled by default. For example setting numeric to false would hide the numeric buttons.

Upvotes: 0

Shivam
Shivam

Reputation: 2443

stack, try this Code or take it as example for pagination

<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  page: 1,
  // a page of data contains two data items
  pageSize: 5
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "2"
  console.log(view[0].name); // displays "Tea"
  console.log(view[1].name); // displays "Coffee"
});
$("#grid").kendoGrid({
  pageable: {
        refresh: true
    },
  pageable:true,
    columns: [
        { field: "name", title: "Name", width: "100px" },
        { field: "category", title: "Category", width: "100px" },
    ],
    dataSource: dataSource
});
</script>
</body>
</html>

Upvotes: 0

knikolov
knikolov

Reputation: 1800

Have you tried setting Pager's info to false? Maybe this will help:

http://docs.kendoui.com/api/web/pager#configuration

Upvotes: 1

Related Questions