使用mvvm模式的Kendo UI网格数据绑定

时间:2013-12-16 09:12:51

标签: kendo-ui kendo-grid kendo-mvvm

我是Kendo UI的新手,我想使用MVVM模式绑定kendo ui网格,我的数据源是sharepoint列表。所以我通过CSOM javascript代码调用sharepoint列表数据。我试过不同的解决方案但似乎没有任何工作。我从sharepoint列表中收集了数据。

var divisionListData = [];
//var divisionsViewModel;

var viewModel = kendo.observable({
    isVisible: true,
    onSave: function (e) {
        alert('hi');
        kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
    },
    divisions: new kendo.data.DataSource({
       // schema: {
            data: divisionListData,
            schema: {
                data: "rows",   
                model: {
                    fields:
                                    {
                                        ID: { type: "string" },
                                        DivisionName: { type: "string" },
                                        DivisionCode: { type: "string" },
                                        OpenDate: { type: "datetime" },
                                        CloseDate: { type: "datetime" },
                                        Description: { type: "string" },
                                    }
                }
            },
    batch: true,
        transport: {

            read: function (e) {
                return divisionListData;
            }
})
})

function ReadList() {
    //this.set("isDisabled", false);
    var clientContext = new SP.ClientContext.get_current();
    // denote that we will be performing operations on the current web
    var web = clientContext.get_web();
    // denote that we will be querying the "Business Divisions" custom SharePoint list
    var divisionsList = web.get_lists().getByTitle("Divisions");
    // create a CAML query (blank means just return all items)
    var camlQuery = new SP.CamlQuery();
    // denote that the operation we want to perform is getItems() on the list
    var divisionsListItems = divisionsList.getItems(camlQuery);
    var fields = 'Include(ID,DivisionCode, DivisionName, OpenDate, CloseDate, Description)';
    clientContext.load(divisionsListItems, fields);  
    clientContext.executeQueryAsync(function () {
        // get the list item enumerator
        var listItemEnumerator = divisionsListItems.getEnumerator();

        // loop through the items in our custom 
        // "Divisions" SharePoint list
        var listItem;

        while (listItemEnumerator.moveNext()) {
            var division = new Division();
            // get the list item we are on
            listItem = listItemEnumerator.get_current();

            // get the divisions
            division.ID = listItem.get_item("ID");
            // var lookup_DivisionCode = listItem.get_item("DivisionCode").get_lookupValue();
            //lookup_DivisionCode.get_l
            var divisionLookupField = new SP.FieldLookupValue();
            divisionLookupField = listItem.get_item("DivisionCode");
            //var test = divisionLookupField.$2d_1;
            if (divisionLookupField != null)
                division.DivisionCode = divisionLookupField.$2d_1;
            division.DivisionName = listItem.get_item("DivisionName");
            division.Description = listItem.get_item("Description");
            division.OpenDate = listItem.get_item("OpenDate");
            division.CloseDate = listItem.get_item("CloseDate");
            divisionListData.push(division);
            kendo.bind($("body"), viewModel);
        }

    })
}

1 个答案:

答案 0 :(得分:0)

你非常接近,而不是在read:function(e)中返回数组,你需要调用

e.success(yourArrayOfData);