Kendo UI 网格分页不起作用 [英] Kendo UI Grid Paging is not working

问题描述

在文档准备好后，我在 body 中附加 div，我正在创建一个 kendo ui 窗口，然后在该窗口内附加第二个 div，并创建 kendo 动态图表或 kendo 网格.

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.

当我创建这些东西时，我从 AJAX 加载数据并正常显示网格，但分页和列调整大小不起作用

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?

这是我的代码

$(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
            }
        });
    }

感谢您的帮助

推荐答案

在我阅读了一些 kendo 动态网格数据绑定文章之后.我找到了如何动态绑定到网格的方法 一些博客示例

After i read some kendo dynamic grid data binding articles . I found way how to bind dynamically to grid some blog example

下面我举个例子

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(""));
});

谢谢！

这篇关于Kendo UI 网格分页不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！