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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Link Grid to mongo database

Thread ID:

Created:

Updated:

Platform:

Replies:

147888 Sep 26,2019 09:20 PM UTC Oct 3,2019 05:53 AM UTC Vue 5
loading
Tags: Data Grid
Matthieu
Asked On September 26, 2019 09:20 PM UTC

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 [Syncfusion]
Replied On 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. 


Matthieu
Replied On 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Matthieu
Replied On 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.


Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon