Aurelio Righetti
Top achievements
Rank 1
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#
The data is show ok , but the paging show 1 and not work..
Thanks
Aurelio
This is my code page aspx:
<!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>
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?
Aurelio
3 Answers, 1 is accepted
0
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:
I hope this information will help you to solve the problem.
Regards,
Alexander Valchev
the Telerik team
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
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
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
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();