Grid and Paging with WebMethod

4 posts, 0 answers
  1. Aurelio Righetti
    Aurelio Righetti avatar
    51 posts
    Member since:
    May 2009

    Posted 14 Apr 2012 Link to this post

    Hi, i can not paging the grid result, the data is ok, but the paging not work, please help my:
    This is my code page aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication3._default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Griglia</title>   
            <script type="text/javascript" src="Scripts/KendoUi/jquery.min.js"></script>
        <script src="Scripts/KendoUi/kendo.all.min.js" type="text/javascript"></script>
            <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
            <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
             <style>
                    #clientsDb {
                        width: 692px;
                        height: 393px;
                        margin: 30px auto;
                        padding: 51px 4px 0 4px;
                        background: url('../Images/clientsDb.png') no-repeat 0 0;
                    }
                </style>
                
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="example" >
                
                 <div id="clientsDb">

                    <div id="grid"></div>

                </div>
        </div>
            <script type="text/javascript">
               
                $(function () {
                    $("#grid").kendoGrid({                    
                        dataSource: {                       
                            schema: {
                                data: "Comuni", total: "TotalCount", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.                           
                                model: { // define the model of the data source. Required for validation and property types.
                                    id: "CapComId",
                                    fields: {
                                        CapComId: { editable: false, nullable: true },
                                        CapComCod: { validation: { required: true} },
                                         CapComCom: { validation: { required: true} }
                                    }
                                }
                             },                                          
                            
                            transport: {
                                
                                read: {
                                    url: "default.aspx/ListaComuni", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.
                                    contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                                },
                                parameterMap: function (data, operation) {
                                    if (operation != "read") {
                                        // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                                        return JSON.stringify({ comuni: data.models})
                                    }
                                }
                            },
                             serverPaging: true,                           
                             serverFiltering: true,
                             pageSize:6
                        },
                        height: 300,
                        groupable: true,
                        scrollable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                            field: "CapComCod",
                            width: 90,
                            title: "Cap"
                        }, {
                            field: "CapComCom",
                            title: "Comune"
                        }
                            ]
                    });
                });

        </script>
        </form>
    </body>
    </html>
    and page code c#
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Services;
     
    namespace WebApplication3
    {
        public partial class _default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
     
            }
     
            [WebMethod]
            public static IEnumerable<Comuni> ListaComuni()
            {
                using (var northwind = new DataClasses1DataContext())
                {
                     
                    var lista = northwind.CAPCOM.Where(row=> row.CapComId<100)
                        // Use a view model to avoid serializing internal Entity Framework properties as JSON
                        .Select(p => new Comuni()
                                         {
                                            CapComId = p.CapComId,
                                            CapComCod = p.CapComCod,
                                            CapComCom = p.CapComCom
                                         })
                        .ToList();
     
     
     
                    return lista;
                }
            }
             
            public class Comuni
            {
                public int CapComId { get; set; }
                public string CapComCod { get; set; }
                public string CapComCom { get; set; }
                public int Total { get; set; }
            }
        }
    }

    The data is show ok , but the paging show 1 and not work..

    I can not understand how I do, I help?
    Thanks
    Aurelio
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Apr 2012 Link to this post

    Hi Aurelio,

    The option serverPaging determines if the paging of the data should be handled on the server. It looks like your method ListaComuni() is returning the whole data and does not implement paging. In order to achieve that I suggest to use the take and skip parameters that are send back to the server. For example:
    [WebMethod]
    public object GetAllPeople(int take,int skip)
    {
        //Sample request payload {"take":10,"skip":10,"page":2,"pageSize":10,"group":[]}
        var result = new
        {
            //get requested page
            data = people.Skip(skip).Take(take).ToList(),
            //get total data count
            total = people.Count
        };
        return result;
    }

    I hope this information will help you to solve the problem.

    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!
  3. Kendo UI is VS 2017 Ready
  4. Derek Swanson
    Derek Swanson avatar
    4 posts
    Member since:
    May 2010

    Posted 16 Nov 2012 Link to this post

    Hi,

    I believe I am having the same issue.  I didn't understand the reply, however, as the example code didn't match the requester's initial code. Would it be possible to give an example with the take and skip parameters and how to implement that with the code that was posted by Aurelio?  

    I'm using almost the exact same setup, but my grid loads it doesn't display the correct number of pages, nor does it display the total number of records retrieved.  If I change the paging size within the paging drop down list, then paging starts to work.  I'm hoping with an updated example, that will put me on the right path.  Thanks!

    Cheers,
    Derek
  5. Dan
    Dan avatar
    9 posts
    Member since:
    Aug 2010

    Posted 17 Nov 2012 Link to this post

    var lista = northwind.CAPCOM.Where(row => row.CapComId < 100).Skip(skip).Take(take)
                       .Select(p => new Comuni()
                       {
                           CapComId = p.CapComId,
                           CapComCod = p.CapComCod,
                           CapComCom = p.CapComCom
                       })
                       .ToList();
Back to Top
Kendo UI is VS 2017 Ready