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

Grid and Paging with WebMethod

3 Answers 479 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aurelio Righetti
Top achievements
Rank 1
Aurelio Righetti asked on 14 Apr 2012, 03:52 PM
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

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 17 Apr 2012, 03:42 PM
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!
0
Derek Swanson
Top achievements
Rank 2
answered on 16 Nov 2012, 08:22 PM
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
0
Dan
Top achievements
Rank 1
answered on 17 Nov 2012, 08:04 AM
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();
Tags
Grid
Asked by
Aurelio Righetti
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Derek Swanson
Top achievements
Rank 2
Dan
Top achievements
Rank 1
Share this question
or