We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Link Grid to mongo database

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

5 Replies

PS Pavithra Subramaniyam Syncfusion Team September 27, 2019 06:04 AM UTC

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. 



MA Matthieu September 30, 2019 05:33 PM UTC

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


PS Pavithra Subramaniyam Syncfusion Team October 1, 2019 05:14 AM UTC

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. 



MA Matthieu October 2, 2019 06:10 PM UTC

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.



PS Pavithra Subramaniyam Syncfusion Team October 3, 2019 05:53 AM UTC

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> 
 
 
 
                               https://ej2.syncfusion.com/vue/documentation/api/grid/#load 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Loader.
Up arrow icon