Kendo Grid with Lightswitch HTML

Question

AM attempting to use Kendo Grid with Lightswitch.

I can get data binding working with local data.

When I bind to lightswitch data, nothing shows up.

Code looks like this

myapp.BrowsePeople.People_render = function (element, contentItem) {

var localPeople = [{ FirstName: "John", LastName: "Smith", email: "john.smith@kendoui.com" },
                   { FirstName: "Jane", LastName: "Smith", email: "jane.smith@kendoui.com" },
                   { FirstName: "Josh", LastName: "Davis", email: "josh.davis@kendoui.com" },
                   { FirstName: "Cindy", LastName: "Jones", email: "cindy.jones@kendoui.com" }];

var grdPeople = $('<div id="KendoPeopleDiv"></div>').appendTo(element);


var lsPeople = contentItem.screen.People;

lsPeople.addChangeListener("state", function () {
    if (lsPeople.state === msls.VisualCollection.State.idle)
    {
        grdPeople.kendoGrid({
            columns: [{ title: "First Name", field: "FirstName" }, { title: "Last Name", field: "LastName" }],
            dataSource: lsPeople.data
            //dataSource: localPeople
        });      
    }
});

};

As indicated if I use "dataSource: localPeople" it displays the static list. If I use "dataSource: lsPeople.data" the headers sho, but no records.

I have checked "lsPeople.data" in the debugger and it has 2 records with FirstName and LastName.

Thanks in advance