Connecting MongoDB database to angular grid

[Achintya Veer Singh]

Hey there, I have tried going through all the methods in data binding documentaion but couldn't work it out. I am trying to get the the json data, comming from 'localhost:3000/employees' in the dataSource(i have attached a screenshot of json data which i want to use), but no result is showing. Also, it was asking for count and items, and i am facing trouble trying to add these two queries to the api. How to get it working?

Attachment: bug_8851825d.zip

[Vignesh Sivagnanam]

Hi Achintya,  

Greetings from Syncfusion support.  

Based on the query we would like to let you know that the EJ2 Grid supports the following in-built adaptors to communicate with the data source in the back-end – URL, OData, ODataV4, Remote Save, Web API and WebMethod adaptor. Each adaptor uses a different way to send and receive requests and response from remote services. They are explained in the below documentation link which you can check for more details,  

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

URL adaptor: https://ej2.syncfusion.com/documentation/grid/edit/#url-adaptor  

If you need to access the data from your db through server controller methods then we suggest you to use the URL adaptor for it.   

Or if you are retrieving the data using service, we suggest you to use the custom binding support available with the Grid to achieve the same. We have explained this in detail below,  

Custom binding:  

With the custom binding approach you can bind data from an API call by providing your own custom queries(as required by your service) and handle all the Grid actions(Sort, Page, Filter, etc. ) with it. The Grid’s custom binding approach works as explained below,  

For using custom binding, you need to bind the response data(Grid data) returned from your service as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your service, access data from db, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties.  

More details on custom binding can be checked in the below links,  

Custom binding documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observables   

Online demo sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe   

API links: https://ej2.syncfusion.com/angular/documentation/api/grid/#datastatechange  

                  https://ej2.syncfusion.com/angular/documentation/api/grid/#datasourcechanged  

                  https://ej2.syncfusion.com/angular/documentation/api/grid/#datasource   

Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property.  

  

Also in the shared JSON data we could see that the properties had underscore(_) as the starting character. Based on that we would like to let you know that the field name must be a valid JavaScript identifier, the first character must be an alphabet and should not contain spaces and special characters.  

Let us know if you have any concerns.  

Regards,  

Vignesh S