Kunal Kumar's Blog

Hi Friends, In this post I am going to show you how you can perform DML operation on database using ReactJS. For instance let's take an example of Departments table in HR schema of Oracle XE database. As we have discussed about the about the create functionality in my previous post on below link so we will see how we can add the update and delete functionality of CRUD operation. These all operation will happen through Rest services which is build based on Departments table. Let's say I have a restful webservice built on database table named "Departments" in HR Schema of Oracle XE database. This restful service will perform the create/update/delete in Departments table. This restful service accepts the JSON data as the input and do the operation on database table whatever operation we will call. We are showing all the records available in the Departments table using ajax call and rendering with help of ReactJS which you can see in the below post : http:...

Hi Friends, In this post I am going to show you the Create Operation of CRUD by using ReactJS or React.js with the help of Restful webservice call via Ajax. Let's say I have a restful webservice built on database table named "Departments" in HR Schema of Oracle XE database. This restful service is having an "/add" method to insert the new record in Departments table. The service accept the JSON data as the input and insert it to database. We are showing all the records available in the Departments table using ajax call and rendering with help of ReactJS which you can see in the below post : http://www.code4fusion.com/2016/09/column-level-filter-in-fixed-data-table.html Now we will add a Add Departments facility to the above example and insert the data in database table using ReactJS. For this I have modified the code of the table render function as follows: render: function(){  var rows = this.state.departments;  var h= rows.length*30+85;     ret...

Hi All, In this post I am going to show you how you can add the filter on top of every column to filter the result. For this example I am going to use the existing application which we have done in following link: http://www.code4fusion.com/2016/09/showing-data-in-tabular-format-using.html To add the input text on the header of the table we need to add the following method in your component class in the jsx file. renderHeader(label, cellDataKey) {   return <div>         <span>{label}</span>           <div>             <br />             <input type="text"/>           </div>       </div>; } After adding this in your component now you need to call this method from each...

Hi All, In this post I am going to talk about React Data Grid (ReactDataGrid) component given by reactJS. what is React Data Grid (ReactDataGrid) ? ReactDataGrid is a React component for building and presenting data in a flexible, powerful way. It has following features: a.  It combines the performance power of React as well as partial rendering techniques in order to       smoothly scroll though hundreds of thousands of rows. b.   SupportsView and edit cells using a wide range of formatters and editors. If these don't suit your       needs, you can easily create and plugin your own. c.  Quickly configure and customise features such as grid and column properties, row and cell      renderers. As the Grid is a React component it is easy to extend and add custom functionality. d .  Full keyboard navigation, cell copy & paste, cell drag down, frozen columns, column resizing, ...

Hi All, In this post I am going to talk about Fixed Data Table (FixedDataTable ) component given by reactJS. what is Fixed Data Table (FixedDataTable ) ? FixedDataTable is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns. So if you want to show your data in a tabular format using ReactJS then you have three option : 1. Showing the data using normal table 2. Using  Fixed Data Table 3. Using React Data Grid (ReactDataGrid)  If you want to show your data using normal table you can see the following post and get it done easily : http://www.code4fusion.com/2016/09/load-data-from-database-using-rest.html If you want to show your data in the tabular format using Fixed Data Table then the steps required for this we will see in this post. So to use Fixed Data Table in your ReactJS project you need to imp...

Hi Friends, In this post I am going to show you that how you can get the data from databse using REST services and show it on the UI with the help of react JS/ReactJS/React.js. I am assuming you must be knowing that how to create the Restful webservice to get the data from database table. In my example I have taken " Department " table from HR schema in Oracle database. If you need any help regarding creating the REST webservice you can refer the following link : http://www.code4fusion.com/2016/05/showing-data-from-database-table-in.html I am assuming that you have already created the rest webservice and deployed on the server. In my case it is deployed on local weblogic server with the following URL: http://localhost:9001/TestRestEasy/rest/departments/ You can test your rest service using rest client in firefox as shown below: So here I can see that I am getting the array of JSON data as the response from the restful webservice. Now...

Hi All, In this blog I am going to show you how you can setup the environment for ReactJS or React.js. This is the new java script library which is developed and maintained by Facebook and Instagram. This allows us to create reusable UI components. For information about ReactJS you can visit the following link : https://facebook.github.io/react/ https://www.tutorialspoint.com/reactjs/ Now in this blog we will see how we can setup the initial requirement in order to develop and run the application written in ReactJS.   1. First and foremost is to install the latest version of Node.js. You get the installer from the following website. https://nodejs.org/en/ You can download the node JS from this URL as shown below in screenshot. Once it is downloaded in you system you can run it and install it on your machine. After installation of NodeJS we need to install three more things. a. Babel b. Webpack c. React So open the command prompt and type...