javascript - mvc - Kendo UI Grid Paging no funciona

kendo ui grid group by column

Question

En el documento listo anexo div dentro del cuerpo y estoy creando una ventana de kendo ui y luego dentro de esa ventana agrego el segundo div con la creación de un gráfico dinámico kendo o una grilla kendo.

Cuando creo esto, estoy cargando datos de AJAX y normalmente muestra la cuadrícula, pero el paginado y el cambio de tamaño de columna no funcionan

¿Me puedes ayudar en esta situación?

Aquí mi código

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

Gracias por tu ayuda

Answer 1

Después de leer algunos artículos de encuadernación de datos de grillas dinámicas kendo. Encontré la forma de vincular dinámicamente a la cuadrícula de algún ejemplo de blog

Doy un ejemplo a continuación

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

¡Gracias!