Kendo UI网格数据源ASP WebForms

3

我按照 Kendo 提供的示例 使用外部数据源,但是当你输入 Default.aspx/GetEvents 的 URL(其中 GetEvents 是 Default.aspx 中的一个 WebMethod)时,它返回整个 Default.aspx 的 HTML,而不是正常的 AJAX 调用。

因此,我找到了一种解决方法,使用本地数据源方法,该方法调用一个 JavaScript 函数 - 这个 JavaScript 函数会自己进行 AJAX 调用我的 default.aspx 中的 WebMethod,并得到一个成功的响应。

以下是我的代码:

 $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: createRandomData(),
                        schema: {
                            data: "d"
                        },
                        pageSize: 10
                    },
                    height: 250,
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        {
                            field: "Title",
                            title: "Title",
                            width: 100
                        },
                        {
                            field: "StartDate",
                            title: "StartDate",
                            width: 100
                        },
                        {
                            field: "Keywords",
                            width: 100
                        }
                    ]
                });
            });

以下是 createRandomData() 返回的部分内容 - 它是有效的 JSON 格式 - 我只是不想将其全部粘贴在这里,以免影响问题的可读性。

"d" : [
{
    "Title": "Chicago BlackHawks vs. Detroit Redwings",
    "StartDate": "9/7/2012 12:00:00 AM",
    "Keywords": "-- Select --"
},
{
    "Title": "",
    "StartDate": "1/1/1900 12:00:00 AM",
    "Keywords": "-- Select --"
}, .......

我认为这个应该可以工作,现在网格只是显示“加载中…”,一直停留在那里,没有控制台错误

                    function createRandomData() {
                    $.ajax({
                        type: "POST",
                        url: "MyEvents.aspx/GetEvents",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {                                
                            var rs = msg;
                            return rs;
                        }
                    });
                    return false;
                }
2个回答

5
可能的问题是,当使用元素时,KendoUI期望的是一个简单的JavaScript调用(不带AJAX)。当您调用JS方法时,它立即返回,但是AJAX调用需要更长的时间才能完成,但Kendo网格永远不会在调用完成时得到通知。
相反,您可以尝试在dataSource中使用对象。详情请查看此处。这样,网格应该能够与AJAX调用良好地配合运行。
编辑: 你是否尝试过像这样的内容:
dataSource: {
    transport: {
        read: function(options) {
            $.ajax({
                type: "POST",
                url: "MyEvents.aspx/GetEvents",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {                                
                    options.success(msg.d);
                }
            });
        }
     }
}

我之前是这么做的,问题在于当我使用url:".."连接到一个web方法时,它没有调用我的web方法 - 它返回整个aspx页面,就像kendo网格不知道如何进行ajax调用 - 它只请求aspx页面 - 奇怪,以前从未见过这样的情况。 - Scott Selby
我可以这样做,但我确定它会返回我提供的示例。 - Scott Selby
发布的代码,看看我不得不在另一个功能中进行ajax调用吗?因为将其放在url中是无效的。 - Scott Selby
看看使用像我的示例代码是否可行。这基本上与您先前的JS函数完全相同,但在“success”处理程序中,您让Kendo知道数据已准备好。请注意,我还删除了您的“模式”定义,因为我已经在“success”处理程序中返回了“d”部分。 - Marek Karbarz
抱歉我没有早点回复,这个还是不起作用。网格显示出来了,但里面没有数据。在Firebug中,我看到了GetEvents请求和成功的响应,但我不知道发生了什么。 - Scott Selby

0

也许可以更改您的模式定义:

从这个开始

schema: {
 data: "d"
}

转换成这个

schema: {
 model: {
  fields: {
    Title: { type: "string" },
    StartDate: { type: "string" },
    Keywords: { type: "string" }
   }
 }
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接