Connect to MySql server to populate grid in React on Node

[Suresh]

Hi,

I have searched all the documentation and the forums and am still stuck. All the examples seem to be for other languages or frameworks.

I would like to see a simple example (select * from Northwind) that shows:

1. How to connect to MySQL server (running on a local machine)
2. How to retrieve data (insert and update would be great too).
3. How to show data in a grid.

I have two use cases,..

1. In a traditional, basic, react app.
2. In an electron-react app.

My editor environment is VS Code on Win64.

Thanks!

[Manivel Sellamuthu]

Hi Suresh, 

Greetings from Syncfusion support. 

We have already discussed about this in our Knowledge Base. Please refer the below KB link for more information. 

KB: https://www.syncfusion.com/kb/11449/how-to-bind-sql-server-data-in-react-datagrid-using-sqlclient-data-provider 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Sonia tekniko]

Mobile app development company in Noida-Hire best mobile app developers for your mobile apps at cost effective price.

[Suresh]

Thank you for the quick follow up.

Unfortunately, your solution requires a C# intermediary. There are great, pure javascript node libraries, like mysql, mysql2, and others. I was hoping that someone had created an adaptor for them, so we could have a pure node solution.

If you are a node-Javascript developer, you don't want to be having/managing a seperate C# code base and server...

For a cross platform project (electron) it's even more of a problem.

s.

[Manivel Sellamuthu]

Hi Suresh, 

Thanks for your update. 

Based on your requirement, We have prepared a sample. In that sample we have used node JS Server and  used custom binding for performing CRUD operations. Please find the below sample and documentation links for more information. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridCustomBindingWithCRUD-React1365904049.zip 

Note: Before launching the above application, the express server needs to be started using the ‘node server.js’ command from the application’s root folder and then the react application can be launched using ‘npm start’ command  

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

                               https://ej2.syncfusion.com/react/documentation/grid/data-binding/#perform-crud-operations 

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

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

Please let us know, if you need further assistance. 

Regards, 

Manivel