Kendo UI Grid Paging无法正常工作 [英] Kendo UI Grid Paging is not working
本文介绍了Kendo UI Grid Paging无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在文档准备中我将div添加到body中，我正在创建一个kendo ui窗口，然后在该窗口内附加第二个div，创建kendo动态图表或kendo网格。
当我创建这些东西时，我正在从AJAX加载数据并正常显示网格，但分页和列调整大小不起作用
你可以帮我解决这个问题吗？ / p>
这里我的代码
$（document）.ready（function（ ）{
$ .ajax（{
type：'POST'，
dataType：'json'，
url：'../Home / GetChartsAndInformations'，
success：function（data）{
for（i = 1; i< = data.length; i ++）{
count = data.length;
$（body）。append （'< div class =chartWindowid =chartWindow-'+ i +'>< div id =chart-'+ i +'>< / div>< / div>' ）;
var myWindow = $（'＃chartWin dow-'+ i）。kendoWindow（）。getKendoWindow（）;
myWindow.setOptions（{
width：data [i - 1] .Width，
height：data [i - 1] .Height，
actions：[Pin， 最大化，关闭]，
仓位：{
top：data [i - 1] .Ypos，
left：data [i - 1] .Xpos
} ，
title：data [i - 1] .ChartDescription
}）;
$（＃chart-+ i）.append（FillWindowWithCharts（i））
}
}
}）;
}）;
函数FillWindowWithCharts（数字）{
$ .ajax（{
类型：'POST'，
dataType：'json'，
url：' ../Home/QuerySelected'，
data：{id：number}，
success：function（data）{
if（data.length！= 0）{
if （data [0] .ChartType ==grid）{
myData = data;
createGrid（data [0] .Id）;
}
else {
if（data [0] .IsGroup）{
myData = {
data：data，
group：{
field：data [0] .GroupValue
} ，
排序：{
字段：data [0] .SortValue
}
}
ToolTipTemplate =＃= dataItem.Value1＃：＃= kendo.format（'{0：N}'，value）＃;
}
else {
myData = data
}
series = [{
field：data [0]。 SeriesField，
标签：{
visible：true
}
}];
categories = {
field：data [0] .CategoryField
}
stackValue = data [0] .IsStacked;
chartType = data [0] .ChartType;
title = data [0] .ChartDescription;
createChart（number）;
}
}
else {
$（＃chart-+ number）.html（此区间内无数据!! ）;
}
}
}）;
}
函数createGrid（数字）{
$（＃chart-+ number）.kendoGrid（{
dataSource：myData，
resizable ：true，
pageable：{
refresh：true，
pageSize：5
}，
列：[
{field：Value1，title ：myData [0] .Series1，hidden：myData [0] .Series1 == null？true：false}，
{field：Value2，title：myData [0] .Series2，hidden：myData [0 ] .Series2 == null？true：false}，
{field：Value3，title：myData [0] .Series3，hidden：myData [0] .Series3 == null？true：false}，
{field：Value4，title：myData [0] .Series4，hidden：myData [0] .Series4 == null？true：false}，
{field：Value5，title：myData [0] .Series5，hidden：myData [0] .Series5 == null？true：false}
]
}）;
}
函数createChart（数字）{
$（＃chart-+ number）.kendoChart（{
theme：metro，
dataSource：myData，
title：{
text：title
}，
legend：{
visible：true，
position：bottom，
标签：{
模板：'＃：chartType ==pie？dataItem.Value1：chartType ==donut？dataItem.Value1：text＃'
}
}，
seriesDefaults：{
类型：chartType，
stack：stackValue
}，
series：series，
valueAxis：{
labels ：{
格式：{0}
}
}，
categoryAxis：categories，
工具提示：{
visible：true，
rmat：{0}，
模板：ToolTipTemplate
}
}）;
}
感谢您的帮助
解决方案
我读了一些kendo动态网格数据绑定文章。我找到了如何动态绑定到网格一些博客示例
我举一个例子
function createGrid（ number，from，to）{
$（＃grid）。kendoGrid（{
dataSource：{
type：json，
serverPaging：false，
pageSize：10，
transport：{//使用转换我可以连接ajax
中的数据：{
url：../ Home / QuerySelected，
dataType ：json，
类型：POST，
contentType：application / json; charset = utf-8，
data：{id：number，from：from，to： to} //我可以传递参数
}，
parameterMap：function（options）{
return JSON.stringify（options）;
}
}，
schema：{//请小心如果你忘记架构网格可以给出不同的错误。您需要编写架构数据和总计并在数据源中放置正确的位置
数据：数据，
总计：总计
}
}，
可调整大小： true，
pageable：{
refresh：true
}，
sortable：true，
filterable：{
extra：false，
operator ：{
string：{
startswith：Starts with，
包含：包含
}
}
}，
列：[
{field：Value1，title：myData.Data [0] .Series1，hidden：myData.Data [0] .Series1 == null？ true：false}，
{field：Value2，title：myData.Data [0] .Series2，hidden：myData.Data [0] .Series2 == null？ true：false}，
{field：Value3，title：myData.Data [0] .Series3，hidden：myData.Data [0] .Series3 == null？ true：false}，
{field：Value4，title：myData.Data [0] .Series4，hidden：myData.Data [0] .Series4 == null？ true：false}，
{field：Value5，title：myData.Data [0] .Series5，hidden：myData.Data [0] .Series5 == null？ true：false}
]
}）;
$（'：contains（此间隔中没有数据!!）'）。each（function（）{
$（＃chart-+ number）.html（ $（＃chart-+ number）.html（）。split（此间隔中没有数据!!）。join（））;
}）;
谢谢！
In document ready i append div inside body and i am creating a kendo ui window and then inside that window append second div with creating kendo dynamic chart or kendo grid.
When i create this things i'm loading data from AJAX and shows grid normally, but paging and column resizing is not working
Can you help me on this situation?
Here my code
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
url: '../Home/GetChartsAndInformations',
success: function (data) {
for (i = 1; i <= data.length; i++) {
count = data.length;
$("body").append('<div class="chartWindow" id="chartWindow-' + i + '"><div id="chart-' + i + '"></div></div>');
var myWindow = $('#chartWindow-' + i).kendoWindow().getKendoWindow();
myWindow.setOptions({
width: data[i - 1].Width,
height: data[i - 1].Height,
actions: ["Pin","Maximize", "Close"],
position: {
top: data[i - 1].Ypos,
left: data[i - 1].Xpos
},
title: data[i - 1].ChartDescription
});
$("#chart-" + i).append(FillWindowWithCharts(i))
}
}
});
});
function FillWindowWithCharts(number) {
$.ajax({
type: 'POST',
dataType: 'json',
url: '../Home/QuerySelected',
data: { id: number },
success: function (data) {
if (data.length != 0) {
if (data[0].ChartType == "grid") {
myData = data;
createGrid(data[0].Id);
}
else {
if (data[0].IsGroup) {
myData = {
data: data,
group: {
field: data[0].GroupValue
},
sort: {
field: data[0].SortValue
}
}
ToolTipTemplate = "#= dataItem.Value1 #: #= kendo.format('{0:N}',value) #";
}
else {
myData = data
}
series = [{
field: data[0].SeriesField,
labels: {
visible: true
}
}];
categories = {
field: data[0].CategoryField
}
stackValue = data[0].IsStacked;
chartType = data[0].ChartType;
title = data[0].ChartDescription;
createChart(number);
}
}
else {
$("#chart-" + number).html("No Data in this interval!!");
}
}
});
}
function createGrid(number) {
$("#chart-" + number).kendoGrid({
dataSource: myData,
resizable: true,
pageable: {
refresh:true,
pageSize: 5
},
columns: [
{ field: "Value1", title: myData[0].Series1, hidden: myData[0].Series1 == null ? true : false },
{ field: "Value2", title: myData[0].Series2, hidden: myData[0].Series2 == null ? true : false },
{ field: "Value3", title: myData[0].Series3, hidden: myData[0].Series3 == null ? true : false },
{ field: "Value4", title: myData[0].Series4, hidden: myData[0].Series4 == null ? true : false },
{ field: "Value5", title: myData[0].Series5, hidden: myData[0].Series5 == null ? true : false }
]
});
}
function createChart(number) {
$("#chart-" + number).kendoChart({
theme: "metro",
dataSource:myData,
title: {
text: title
},
legend: {
visible: true,
position: "bottom",
labels: {
template: '#: chartType == "pie" ? dataItem.Value1 : chartType == "donut" ? dataItem.Value1 : text #'
}
},
seriesDefaults: {
type: chartType,
stack: stackValue
},
series: series,
valueAxis: {
labels: {
format: "{0}"
}
},
categoryAxis: categories,
tooltip: {
visible: true,
format: "{0}",
template: ToolTipTemplate
}
});
}
Thank you for your help
解决方案
After i read some kendo dynamic grid data binding articles . I found way how to bind dynamically to grid some blog example
I give an example below
function createGrid(number,from,to) {
$("#grid").kendoGrid({
dataSource: {
type: "json",
serverPaging: false,
pageSize: 10,
transport: { //With the transform i can connect data from ajax
read: {
url: "../Home/QuerySelected",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: { id: number, from: from, to: to } // I can pass parameter
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: { // Please be carefull because if you forget schema grid can give different errors. You need to write schema Data and Total and put right place in datasource
data: "Data",
total: "Total"
}
},
resizable: true,
pageable: {
refresh: true
},
sortable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
contains: "Contains"
}
}
},
columns: [
{ field: "Value1", title: myData.Data[0].Series1, hidden: myData.Data[0].Series1 == null ? true : false },
{ field: "Value2", title: myData.Data[0].Series2, hidden: myData.Data[0].Series2 == null ? true : false },
{ field: "Value3", title: myData.Data[0].Series3, hidden: myData.Data[0].Series3 == null ? true : false },
{ field: "Value4", title: myData.Data[0].Series4, hidden: myData.Data[0].Series4 == null ? true : false },
{ field: "Value5", title: myData.Data[0].Series5, hidden: myData.Data[0].Series5 == null ? true : false }
]
});
$(':contains("No Data in this interval!!")').each(function () {
$("#chart-" + number).html($("#chart-" + number).html().split("No Data in this interval!!").join(""));
});
Thanks!
这篇关于Kendo UI Grid Paging无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
