如何使用带有ajax的Kendo传输读取功能来为远程数据创建kendogrid的数据源

时间:2015-02-14 04:42:57

标签: kendo-grid kendo-datasource

我会谦卑地试图尊重地以一定程度的口才和简洁来构建我的问题: 在尝试剩余的CRUD功能之前,我只是想将数据输入到我的网格中。我正在通过Web方法成功接收我的JSON。 请注意我的原始对象图是多层的,但我已将其展平以从查询中删除该变量。 我使用的结构是我在这里根据API引用指定我自己的Ajax函数[http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read] 奇怪的是,当我将其类型设置为POST而不是GET时,我注意到我的JSON数据仅返回此函数。除了在我的webmethod中击中断点 我还在数据源create的传输读取部分的ajax函数中点击了on success函数。我正在尝试创建数据源然后返回它, 通过将kendoGrid的dataSource指向设置为创建dataSource的函数返回的变量,可以在调用函数中将其设置为kendoGrid。 在我的document.ready中,我调用了InitializeHmoDataGrid()。函数InitializeHmoDataGrid创建一个局部变量来保存返回的dataSource 我试图在名为InitializeHmoDataSource的下一个函数调用中创建 然后在函数InitializeHmoDataGrid中我创建了kendoGrid,并尝试将其dataSource设置为局部变量,设置为函数调用InitializeHmoDataSource的结果

$(document).ready(function () {
    InitializeHmoDataGrid();
});


function InitializeHmoDataGrid() {

        //alert("INSIDE OF InitializeHmoDataGrid Method");
    var localDataSetObj = InitializeHmoDataSource();

    console.log("----------------Data P O S T  return-----------------------------");
    console.log(localDataSetObj);

        //alert("INSIDE OF InitializeHmoDataGrid Method Post call to InitializeHmoDataSource");
    // localDataSetObj.read();

    $('#hmoApprovalEmailGrid').kendoGrid({
        dataSource: localDataSetObj,
        columns: [{ field: "DartEmailId", title: "DartEmailId", width: "100px" },
                        { field: "EmailAddress", title: "EmailAddress", width: "100px" } ]          
    });
}

函数InitializeHmoDataSource,如上所述成功到达我的Web方法以获取JSON,一个设置在...的断点。

    success: function (result)
{ opt_WHOAH.success(result); },  

函数验证格式正确的JSON是否在结果参数中。

 JSON  
[{"DartEmailId":15,"EmailAddress":"GenericAddress@mail.net"},
{"DartEmailId":16,"EmailAddress":"SecondaryEmail@gmail.com"}]

只是为了记录我还有一些似乎是正确的JSON,整个对象图完成了父,子和孙都正确地充实了。 所以为了简单起见,我已经将对象切成了简单的JSON ..

我在架构部分中添加了主键字段作为模型ID,我已经定义了几个具有适当数据类型的字段。在方法结束时向下 我尝试返回新创建的数据源--- return ds_HmoEmails; -

控制台日志说这没什么,当然回到调用函数InitializeHmoDataGrid中,局部变量仍然没有,所以我得到一个带有列标题的空网格。

请原谅我,如果不清楚的话,我已尽力使其尽可能清晰明确......我肯定会在周末工作,试图解决这个问题。

我需要使用所有传输功能执行FULL CRUD;创建阅读更新&使用传输中的这些成功方法,以同样的方式将ajax破坏为web方法。 CRUD功能。因此,对于这些Kendo成功函数如何实际提供/更新/影响数据源的任何其他见解表示赞赏。我已经仔细检查了他们的API和StackOverflow以及示例无济于事......

感谢所有和所有帮助谢谢

function InitializeHmoDataSource() {
    var ds_HmoEmails = new kendo.data.DataSource.create({

        transport: {
            read: function DoAjax(opt_WHOAH) {
                                                    $.ajax({
                                                                            type: 'POST',
                                                                            contentType: 'application/json; charset=utf-8',
                                                                            url: 'GetData.aspx/GetHmoApprovalAlertEmails',
                                                                            dataType: 'json',

                                                                    success: function (result)
                                                                    { opt_WHOAH.success(result); },              // notify the data source that the request succeeded

                                                                    error: function (result)
                                                                    { opt_WHOAH.error(result); }                   // notify the data source that the request failed              
                                                            });

                                                }
                    },
        schema: {
            model: {
                id: "DartEmailId",
                fields: {                                   //data type of the field {Number|String|Boolean|Date} default is String
                    DartEmailId: {
                        type: "Number",
                        editable: false,  //this field will not be editable (default value is true)                         
                        nullable: true   // a defaultValue will not be assigned (default value is false)
                    },
                    EmailAddress: {
                        type: "string"                                
                    },
                }
            },
        }
    });

    console.log("----------------Data Pre return-----------------------------");
    console.log(ds_HmoEmails);

    return ds_HmoEmails;
}

0 个答案:

没有答案