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

kendo ui grid server side paging not showing page number and total number of item record in grid

1 Answer 846 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin Smith
Top achievements
Rank 1
Kevin Smith asked on 15 Jul 2014, 06:40 PM
Basically I am trying to implement server side filtering and sorting but when i am setting this to server side it is working fine but page number in grid not showing also next page , previous page and total Item is not showing up.
here us how i am intialising the grid. 
<script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                columns: [
                            { field: "TicketID", title: "Id", filterable: true },
                            { field: "Name", title: "Title", filterable: true },
                            { field: "RequestorName", title: "Requestor", filterable: true },
                            { field: "Category", title: "Category", filterable: true },
                            { field: "Status", filterable: true },
                            { field: "Priority", filterable: true },
                            { field: "CreatedOn", format: "{0:MM/dd/yyyy}", filterable: false }
                ],
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/Ticketing/WebServices/TicketingService.asmx/GetTicketByProjectId",
                            contentType: 'application/json; charset=utf-8',
                            type: "POST",
                            dataType: "json",
                            data: { filter: null, sort: null },
                        },
                        parameterMap: function (data) {
                            return JSON.stringify(data);
                        }
                    },
                    
                    schema: {
                        data: "d",
                        total: "total",
                        model: {
                            id: "TicketID",
                            fields: {
                                Name: { type: "string" },
                                RequestorName: { type: "string" },
                                Category: { type: "string" },
                                Status: { type: "string" },
                                Priority: { type: "string" },
                                CreatedOn: { type: "date" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true
                }),
                pageable: {
                    refresh: true,
                    pageSizes: [10, 20, 50, 100],
                    buttonCount: 12,
                },
                filterable: true,
                groupable: true,
                sortable: true,
                //selectable: true,
                filterable: true,
                reorderable: true,
                resizable: true,
                columnMenu: true
            });
        });
    </script>
--------------------------------------------------------------------------------WEB Service Method-------------------------------------------------------------------------------------
        protected Dictionary<string, DataTable> FilterColumns;

        [WebMethod]
        public IEnumerable<TicketListJSON> GetTicketByProjectId(int page, int pageSize, List<GridSort> sort = null, GridFilters filter = null)
        {
            int variable = 0;
            string orderBy = null;
            string filterString = null;
            if (sort != null && sort.Count > 0)
            {
                orderBy = "order by " + sort[0].field + " " + sort[0].dir;
            }
            if (filter != null && filter.filters != null && filter.filters.Count > 0)
            {
                filterString = GetFormatedFilterString(filter);
            }

            List<TicketDetails> TicketList = _fuzeTicketingController.GetTickets();
            List<TicketListJSON> TicletListJSONs = new List<TicketListJSON>();

            foreach (TicketDetails td in TicketList)
            {
                TicketListJSON TicketJSON = new TicketListJSON();
                TicketJSON.TicketID = td.TicketID;
                TicketJSON.Name = td.Name;
                TicketJSON.RequestorName = td.RequestorName;
                TicketJSON.Category = td.Category;
                TicketJSON.Type = td.Type;
                TicketJSON.Priority = td.Priority;
                TicketJSON.Status = td.Status;
                TicketJSON.CreatedOn = td.CreatedDate;
                TicletListJSONs.Add(TicketJSON);

            }
            
            return TicletListJSONs;
        }
------------------------------------------------------------------------  Response from web service ---------------------------------------------------------------------------------------
{"d":[{"__type":"NetApp.Web.UI.Fuze.WebServices.TicketingService+TicketListJSON","TicketID":14264,"Name":"Log a ticket to test validation","RequestorName":"administrator, administrator","Category":"Dashboard","Type":"Improvement","Priority":"3 - High","Status":"Needs More Info","CreatedOn":"\/Date(1402511400000)\/"},{"__type":"NetApp.Web.UI.Fuze.WebServices.TicketingService+TicketListJSON","TicketID":14263,"Name":"Editor Testing 2 Saveing text","RequestorName":"administrator, administrator","Category":"IBPOs Cat","Type":"Improvement","Priority":"3 - High","Status":"Pending Approval","CreatedOn":"\/Date(1401733800000)\/"},{"__type":"NetApp.Web.UI.Fuze.WebServices.TicketingService+TicketListJSON","TicketID":14255,"Name":"IE 8 issue","RequestorName":"administrator, administrator","Category":"Working 1","Type":"Task","Priority":"4 - Normal","Status":"New | New Sub 2 | New 3","CreatedOn":"\/Date(1399055400000)\/"}]}

----------------------------------------------------------------------------------------- Post to Web Service ------------------------------------------------------------------------------------------------------------
source  : {"filter":null,"sort":null,"take":10,"skip":0,"page":1,"pageSize":10}



























































1 Answer, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 17 Jul 2014, 08:57 AM
Hello Kevin,

This is because in the server response there doesn't seem to have a field `total` from which the DataSource to read the total item count. This is required to have correctly functional pager.

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Kevin Smith
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or