Oracle in EJ2 TypeScript Pivotview control

2 May 20238 minutes to read

This section describes how to retrieve data from Oracle database using Oracle Managed Data Access and bind it to the Pivot Table via a Web API controller.

Create a Web API service to fetch Oracle data

1. Open Visual Studio and create an ASP.NET Core Web App project type, naming it MyWebService. To create an ASP.NET Core Web application, follow the document link.

2. To connect a Oracle Server using the Oracle.ManagedDataAccess.Client in our application, we need to install the Oracle.ManagedDataAccess.Core NuGet package. To do so, open the NuGet package manager of the project solution, search for the package Oracle.ManagedDataAccess.Core and install it.

3. Create a Web API controller (aka, PivotController.cs) file under Controllers folder that helps to establish data communication with the Pivot Table.

4. In the Web API controller (aka, PivotController), OracleConnection helps to connect the Oracle database. Next, using OracleCommand and OracleDataAdapter you can process the desired Oracle query string and retrieve data from the database. The Fill method of the OracleDataAdapter is used to populate the retrieved data into a DataTable as shown in the following code snippet.

    using Microsoft.AspNetCore.Mvc;
    using Newtonsoft.Json;
    using Oracle.ManagedDataAccess.Client;
    using System.Data;

    namespace MyWebService.Controllers
    {
        [ApiController]
        [Route("[controller]")]
        public class PivotController : ControllerBase
        {
            private static DataTable FetchOracleResult()
            {
                // Replace with your own connection string.
                string connectionString = "<Enter your valid connection string here>";
                OracleConnection oracleConnection = new OracleConnection(connectionString);
                oracleConnection.Open();
                OracleCommand command = new OracleCommand("SELECT * FROM EMPLOYEES", oracleConnection);
                OracleDataAdapter dataAdapter = new OracleDataAdapter(command);
                DataTable dataTable = new DataTable();
                dataAdapter.Fill(dataTable);
                oracleConnection.Close();
                return dataTable;
            }
        }
    }

5. In the Get() method of the PivotController.cs file, the FetchOracleResult() method is used to retrieve the Oracle data, which is then serialized into JSON using JsonConvert.SerializeObject().

    using Microsoft.AspNetCore.Mvc;
    using Newtonsoft.Json;
    using Oracle.ManagedDataAccess.Client;
    using System.Data;

    namespace MyWebService.Controllers
    {
        [ApiController]
        [Route("[controller]")]
        public class PivotController : ControllerBase
        {
            [HttpGet(Name = "GetOracleResult")]
            public object Get()
            {
                return JsonConvert.SerializeObject(FetchOracleResult());
            }

            private static DataTable FetchOracleResult()
            {
                // Replace with your own connection string.
                string connectionString = "<Enter your valid connection string here>";
                OracleConnection oracleConnection = new OracleConnection(connectionString);
                oracleConnection.Open();
                OracleCommand command = new OracleCommand("SELECT * FROM EMPLOYEES", oracleConnection);
                OracleDataAdapter dataAdapter = new OracleDataAdapter(command);
                DataTable dataTable = new DataTable();
                dataAdapter.Fill(dataTable);
                oracleConnection.Close();
                return dataTable;
            }
        }
    }

6. Run the application and it will be hosted within the URL https://localhost:44346/.

7. Finally, the retrieved data from Oracle database which is in the form of JSON can be found in the Web API controller available in the URL link https://localhost:44346/Pivot, as shown in the browser page below.

Connecting the Pivot Table to a Oracle database using the Web API service

1. Create a simple Typescript Pivot Table by following the “Getting Started” documentation link.

2. Map the hosted Web API’s URL link https://localhost:44346/Pivot to the Pivot Table component in app.ts by using the url property under dataSourceSettings.

import { PivotView, FieldList } from '@syncfusion/ej2-pivotview';

PivotView.Inject(FieldList);
let pivotObj: PivotView = new PivotView({
    dataSourceSettings: {
        url: 'https://localhost:44346/Pivot',
        //Other codes here...
    }
});
pivotObj.appendTo('#PivotView1');

3. Frame and set the report based on the data retrieved from the Oracle database.

import { PivotView, FieldList } from '@syncfusion/ej2-pivotview';

PivotView.Inject(FieldList);
let pivotObj: PivotView = new PivotView({
    dataSourceSettings: {
        url: 'https://localhost:44346/Pivot',
        enableSorting: true,
        expandAll: false,
        dataSource: [],
        columns: [
            { name: 'DEPARTMENT_ID', caption: 'Department ID' },
            { name: 'EMPLOYEE_NAME', caption: 'Employee Name' },
        ],
        rows: [
            { name: 'JOB', caption: 'Job' },
            { name: 'SALARY', caption: 'Salary' }
        ],
        values: [
            { name: 'EMPLOYEE_ID', caption: 'Employee ID' },
            { name: 'CC_EMPLOYEES', caption: 'Employees' },
            { name: 'CC_TAX_PERCENTAGE', caption: 'Percentage' },
        ],
        filters: []
    },
    showFieldList: true,
    width: '100%',
    height: 290,
    gridSettings: { columnWidth: 140 }
});
pivotObj.appendTo('#PivotView');

When you run the sample, the resulting pivot table will look like this:

Explore our Typescript Pivot Table sample and ASP.NET Core Web Application to extract data from a Oracle database and bind to the Pivot Table in this GitHub repository.