Integration of Ionic (Angularjs) and Devextreme Datagrid, failed to display data from $http JSON

Question

I am developing an ionic application by using Angularjs. In my application, I have to integrate with devextreme component like Datagrid.

When I tried to put JSON locally and display in devextreme datagrid, it display perfectly. However, when I get JSON data from web services by using $http and display in devextreme Datagrid. It failed to display it but when I console out the data, I able to get the data and just unable to display it in Devextreme Datagrid component.

The following is my sample code

html code

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <div dx-data-grid="{
        dataSource: customers,
        keyExpr: 'ID',
        columns: ['toponymName', 'fcodeName', 'population'],
        sorting: { mode: 'single' },
        pager: { visible: true },
        paging: { pageSize: 10 },
        editing: {
            editEnabled: false,
            editMode: 'row',
            insertEnabled: false,
            removeEnabled: false
        },
        allowColumnReordering: true,
        allowColumnResizing: true,
        filterRow: { visible: true },
        searchPanel: { visible: false },
        selection: { mode: 'single' }
    }"></div>
  </ion-content>
</ion-view>

Controller Code

.controller('DashCtrl', function($scope,  $http) {

    $http({
         method : 'GET',
         url : 'http://10.194.121.224/MobileGo_WebAPI/api/MST_CUSTOMER',
         headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
          }
    }).then(function successCallback(response) {
        $scope.customers = response.data;
        console.log(response.data)
    }, function errorCallback(response) {
        console.log(response.statusText);
    });

    // var customers = [{
    //     ID: 1,
    //     CompanyName: "Super Mart of the West",
    //     CompanyHolder: "Chan Yoong Hon",
    //     City: "Bentonville",
    //     State: "Arkansas"
    // }, {
    //     ID: 2,
    //     CompanyName: "Electronics Depot",
    //     CompanyHolder: "Lee Kam Fei",
    //     City: "Atlanta",
    //     State: "Georgia"
    // }];
    // $scope.customers = customers;

})

Like what I tried it for comment code, hardcode of JSON file. It able to display successfully. If I get it from $http, it unable to display the data in dx-data-grid.

JSON Derulo · Accepted Answer · 2018-07-09 09:13:39Z

1

It's a timing issue. You have to call the refresh method after asynchronously loading data into your grid.

The widget cannot track changes made in the data source by a third party. To bring data in the widget up to date in this case, call this method. Data sources of lookup columns will be updated along with the main data source.

Source: Documentation

Soll all you need to do is to follow the steps described here and then call the refresh method on the widget.

answered Jul 9, 2018 at 9:13

JSON Derulo

18.8k11 gold badges62 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Integration of Ionic (Angularjs) and Devextreme Datagrid, failed to display data from $http JSON

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related