Question

在文档准备中我将div添加到body中，我正在创建一个kendo ui窗口，然后在该窗口中添加第二个div，创建kendo动态图表或kendo网格。

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

你能帮我解决这个问题吗？

这是我的代码

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

感谢您的帮助

Answer 1

我读了一些kendo动态网格数据绑定文章。我找到了如何动态绑定到网格some blog example

的方法

我举一个例子

Me.ButtonX8 = New System.Windows.Forms.Button()

谢谢！

Kendo UI Grid Paging无法正常工作

1 个答案: