Kendo UI grid databinding using mvvm pattern

Question

I am new to Kendo UI, i want to bind kendo ui grid using MVVM pattern, and my datasource is sharepoint list. so i am calling sharepoint list data through CSOM javascript code. I tried different solution but nothing seems to working. I have collection of data from sharepoint list.

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

    })
}

Please provide code for what you have tried and some specific errors. This will enable people to help you more — geedubb
Keep the SCOM aside, use static data first and once you get the mvvm working, progress further. — Vojtiik

Robin Giltner Robin Giltner · Accepted Answer · 2013-12-16T19:27:25

You are pretty close, instead of returning the array inside the read: function(e), you need to call

e.success(yourArrayOfData);

Kendo UI grid databinding using mvvm pattern

1 Answers