Datasource not returning data from onSuccess function

Question

I'm getting an array off 100 objects as expected from this datasource when I stick the debugger on mapped by deferred.resolve(mapped);. However it's not transferring that into my dxTileView.

It really shouldn't be a binding issue as it's displaying the noDataText instead of an error.

Anyone have any ideas on where I'm going wrong?

var dataSource = new DevExpress.data.DataSource({
        load: function (loadOptions) {
            if (loadOptions.refresh) {
                var deferred = new $.Deferred();
                callService("LoadEmployees", {
                    device: lStorage.getDeviceID()
                }, function (result) {
                    serverActive = true;
                    var mapped = $.map(result, function (data) {
                        return {
                            info: '',
                            id: data.EmployeeNo,
                            name: data.Name,
                            widthRatio: 2,
                            status: data.Status,
                            lastProject: data.LastProject,
                            lastStart: data.LastStart,
                            lastCostCenter: data.LastCostCenter,
                            lastScan: data.LastScan,
                            projectName: data.LastProject ? data.LastProject.Name : null,
                            inBreak: data.Status == 2,
                            working: data.Status == 1,
                            notWorking: data.Status == 0,
                            aktivProjectId: null
                        }
                    });
                    deferred.resolve(mapped);
                });
                return deferred.promise();
            }
        },
    });

And the html is here:

<div id="mitarbeiter" data-bind="dxTileView: {
           noDataText:noDataText, 
           height:tileWidgetHeight,
           itemClickAction:tileClick,
           baseItemHeight: 80, 
           baseItemWidth: 100,
           dataSource:dataSource, 
           showScrollbar: showScrollbar
      }">

    <div data-options="dxTemplate : { name: 'item' } " data-bind="css: {working:working,inBreak:inBreak}" class="tile">
      <h2 data-bind="text: name"></h2>
      <p data-bind="text: projectName"></p>
    </div>
  </div>

Answer 1

Almost everything is correct, just remove the condition if (loadOptions.refresh) in the load method.

See fields of the loadOptions in the docs http://js.devexpress.com/Documentation/ApiReference/Data_Library/CustomStore/Configuration/?version=14_2#load

I would also use map function of dataSource instead of manual mapping (see example)

var dataSource = new DevExpress.data.DataSource({
    load: function (loadOptions) {
        var deferred = new $.Deferred();

        callService("LoadEmployees", {
            device: lStorage.getDeviceID()
        }, function (result) {
            serverActive = true;
            deferred.resolve(result);
        });

        return deferred.promise();
    },
    map: function(data) {
        return {
            info: '',
            id: data.EmployeeNo,
            name: data.Name,
            widthRatio: 2,
            status: data.Status,
            lastProject: data.LastProject,
            lastStart: data.LastStart,
            lastCostCenter: data.LastCostCenter,
            lastScan: data.LastScan,
            projectName: data.LastProject ? data.LastProject.Name : null,
            inBreak: data.Status == 2,
            working: data.Status == 1,
            notWorking: data.Status == 0,
            aktivProjectId: null
        }
    }
});