Link Grid to mongo database

[Matthieu]

Hi,

I have some issues trying to connect a dataGrid to a mongo database. I tried to copy the code in the documentation about data Binding, this is what I have:

data:new DataManager({

        url: "http://localhost:7070/api/listRefs",

      adaptor: new ODataAdaptor(),

      crossDomain: true

}),

On the server side, I'm using NodeJs and Express to get the data. Here is my code, but the grid is staying empty whatever I send back (I tried JSON, an array, nothing worked).

 

const collectionName = "refList"

  app.get("/api/listRefs", async (req, res) => {

    const data = await getData(collectionName);

    res.setHeader('Content-Type', 'application/json')

    res.end(JSON.stringify({a:1}))

  });

I'm still new to this, so bear with me if I'm not using proper workflows.

Thanks

[Pavithra Subramaniyam]

Hi Matthieu, 

 

Thanks for contacting Syncfusion support. 

 

For using EJ2 ODataAdaptor,  You need to return the data in the format like “{result:[{},{}]}”. Please refer to the below code example for more information. 

 

[server.js] 

app.get('/Orders', (req, res) => { 

    // you can get the query from Grid  by using “req.query” 

    if (data.length == 0) { 

        for (var i = 1; i < 6; i++) { 

            data.push({ OrderID: i, OrderDate: new Date(i), ShipCity: i % 2 == 0 ? 'Durban' : 'Sidney', ShipCountry: i % 2 == 0 ? 'SouthAfrica' : 'Australia' }); 

        } 

    } 

    var resultArray = data; 

    res.send({ result: resultArray }); 

}); 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S. 

[Matthieu]

Hi Pavithra,

I managed to get it working, my database is correctly displayed in the grid. Now, I want to be able to filter the data without sending requests all the time to the server. So I enabled filtering and put offline: true, but it is creating an error like this: 

dataManager.dataSource.json.slice is not a function

Do you have any idea of where it can come from of or if it will be easier to filter on the server side? (It will be to filter data based on tags)

Thanks

Edit: Finally found the issue after spending a lot of time looking around, the data had to be return as json instead of an array when using offline mode

[Pavithra Subramaniyam]

Hi Matthieu, 

 

Thanks for your update. 

 

We are glad to know that you have managed to achieve your requirement. 

 

Please get back to us if you need any assistance on this. 

 

Regards, 

Pavithra S. 

[Matthieu]

Hi,

I have another question, I found out that if I want to allow filtering and sorting on the client side and perform all the CRUD operations on the server, I have to use an RemodeSaveData adaptator. The issue is that I've found no sample of making it working with an external source and I don't know how to get my initial data and put it inside the json property.

[Pavithra Subramaniyam]

Hi Matthieu, 

 

You can get the json data by using the EJ2 DataManager and assign it to the Grid dataSource as given below. We have prepared a simple sample based on your requirement. Please refer to the below code example, documentation link and sample link for more information. 

 

[App.Vue] 

<template> 

  <div id="app"> 

    <ejs-grid ref="grid" :load="load" :editSettings="editSettings" :toolbar="toolbar" :allowFiltering="true" :allowSorting="true" :allowPaging="true" :pageSettings="pageSettings"> 

      <e-columns> 

        .  .  . 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

 

.   .   . 

  methods: { 

        load: function(e) { 

     // using dataManager to get the json from server 

      new DataManager({ 

      url: "http://localhost:5000/Orders",      

     }).executeQuery(new Query()).then((e)=>{ 

 

          this.$refs.grid.ej2Instances.dataSource = new DataManager({ 

               json: e.actual.result,  // set the json based on your response 

               adaptor: new RemoteSaveAdaptor(), 

               insertUrl:"http://localhost:5000/Insert", 

               updateUrl:"http://localhost:5000/Update", 

               removeUrl:"http://localhost:5000/Remove", 

               crossDomain: true 

}) 

})  

</script> 

 

 

 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#remote-save-adaptor 

                               https://ej2.syncfusion.com/vue/documentation/api/grid/#load 

 

Sample               : https://www.syncfusion.com/downloads/support/directtrac/general/ze/serverVue-586131130  

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S.