1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Grid Remote Data don't work in javascript for me

Grid Remote Data don't work in javascript for me

Dear Friends,

             I cannot make to work datagrid with webapi data into datamanager on json format.
             The grid work when I used default remotedata and ej2apiservices local, but when I change url to other, for example:

             https://northwind.netcore.io/orders.json

             or my own nodejs webservice:

             http://localhost:8090/api/pegaempresas

             with this result:

[{"idEmp":1,"nomeEmp":"CICLO SOLUÇÕES DE ENGENHARIA LTDA","cidadeEmp":"Alvarães"},{"idEmp":2,"nomeEmp":"EMPRESA TESTE","cidadeEmp":null},{"idEmp":3,"nomeEmp":"PREFEITURA MUNICIPAL DE ALVARÃES","cidadeEmp":"Alvarães"},{"idEmp":4,"nomeEmp":"PREFEITURA MUNICIPAL DE CAAPIRANGA","cidadeEmp":"CAAPIRANGA"},{"idEmp":5,"nomeEmp":"FUNDAÇÃO NACIONAL DE SAÚDE","cidadeEmp":"Manaus"},{"idEmp":6,"nomeEmp":"PINHEIRO CONSTRUCOES E COMERCIO DE MATERIAIS DE CONSTRUCAO EIRELI","cidadeEmp":null},{"idEmp":7,"nomeEmp":"PREFEITURA MUNICIPAL DE SANTA ISABEL DO RIO NEGRO","cidadeEmp":"SANTA ISABEL DO RIO NEGRO"},{"idEmp":8,"nomeEmp":"CONSTRUTORA SOMA LTDA","cidadeEmp":"MANAUS"},{"idEmp":9,"nomeEmp":"SG ENGENHARIA LTDA","cidadeEmp":"MANAUS"},{"idEmp":10,"nomeEmp":"PREFEITURA MUNICIPAL DE AMATURÁ","cidadeEmp":"AMATURÁ"},{"idEmp":11,"nomeEmp":"Credencial Engenharia Ltda","cidadeEmp":"Manaus"},{"idEmp":12,"nomeEmp":"NOGUEIRA CONSTRUÇÕES LTDA","cidadeEmp":null}]

             Follow my code:
index.js:
ej.base.enableRipple(window.ripple)

    var hostUrl = 'http://localhost:8090/';
    var data = new ej.data.DataManager({
        url: hostUrl + 'api/pegaempresas/',
        adaptor: new ej.data.WebApiAdaptor(),
        crossDomain: true
    });
    var grid = new ej.grids.Grid({
        dataSource: data,
        allowPaging: true,
        columns: [
            { field: 'idEmp', headerText: 'ID', width: 130, textAlign: 'Left' },
            { field: 'nomeEmp', headerText: 'Empresa', width: 170 },
            { field: 'cidadeEmp', headerText: 'Cidade', width: 135, textAlign: 'Left' },
        ],
        pageSettings: { pageCount: 3 }
    });
    grid.appendTo('#Grid');

index.html:
<!DOCTYPE html><html lang="en"><head>
  <title>EJ2 Grid</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typescript Grid Control">
  <meta name="author" content="Syncfusion">
  <link rel='nofollow' href=".\resources\package\styles\material.css" rel="stylesheet">
    
  <style>
      .e-row[aria-selected="true"] .e-customizedExpandcell {
          background-color: #e0e0e0;
      }
      .e-grid.e-gridhover tr[role='row']:hover {
          background-color: #eee;
      }
      .e-expand::before {
      content: 'e5b8';
  }
  </style>
<script src=".\resources\package\scripts\ej2.min.js" type="text/javascript"></script></head>
<body>
  <div id="container">
      <div id="Grid"></div>        
  </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
</script>

<script src="index.js" type="text/javascript"></script>

</body></html>

          
The same problem exists with PHP.

Could you help me???

Thanks a lot.

Francisco Furtado

1 Reply 1 reply marked as answer
AG Ajith Govarthan Syncfusion Team April 21, 2021 12:38 PM UTC

Hi FRANCISCO, 

Thanks for contacting Syncfusion support. 

Query:    I cannot make to work datagrid with webapi data into datamanager on json format.The grid work when I used default remotedata and ej2apiservices local, but when I change url to other, for example: 
 
Based on your attached code example and API service we found that you have used webAPI adaptor in your Grid application and also returned the data in the form of results in the API service . By default in EJ2 Grid when you use the WebAPI adaptor, then you need to return the response data in the form of items and count instead of results and count, which is the default behavior of our EJ2 Grid component. 

So, we suggest you return the data in the form of items and count to bind the data properly in your Grid application. For your convenience we have attached the documentation please refer them for your reference. 

Code Example: 
{ 
Items: [{..}, {..}, {..}, ...], 
Count: 830 
} 


Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


Marked as answer
Loader.
Up arrow icon