DataBind Vercel Data to the DevExpress Data Grid

The CData API Driver for ADO.NET incorporates conventional ADO.NET data access components compatible with third-party controls. You can adhere to the standard ADO.NET data binding procedures to establish two-way access to real-time data through UI controls. This article will demonstrate the utilization of CData components for data binding with DevExpress UI Controls (Windows Forms and Web controls), specifically binding to a chart that visualizes live data.

Using API Key Authentication

Vercel uses Bearer token authentication. You can use either a personal access token or an OAuth access token as the API key.

To obtain a personal access token:

1. Log into your Vercel account at https://vercel.com/
2. Navigate to Account Settings > Tokens.
3. Click Create Token, enter a name and expiration, and click Create.
4. Copy the generated token (it will only be shown once).

After obtaining your token, set the following connection properties:

• AuthScheme: Set this to APIKey.
• APIKey: Set this to your Vercel personal access token or OAuth access token.

Example Connection String

Profile=C:\profiles\Vercel.apip;AuthScheme=APIKey;APIKey=your_access_token;

Working with Teams

Many Vercel resources are scoped to a team. To scope all requests to a specific team, set the TeamId connection property to your team's ID. You can find your team ID by querying the Teams table or from the Vercel dashboard. Alternatively, you can specify TeamId in your SQL queries using the WHERE clause where supported.

Connecting to Vercel

Once the authentication is configured, you can connect to Vercel and query data from any of the available tables such as Projects, Deployments, Teams, and Domains.

Windows Forms Controls

The code below shows how to populate a DevExpress chart with Vercel data. The APIDataAdapter binds to the Series property of the chart control. The Diagram property of the control defines the x- and y-axes as the column names.

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\Vercel.apip;AuthScheme=APIKey;APIKey=your_access_token;")) {
  APIDataAdapter dataAdapter = new APIDataAdapter(
  "SELECT ,  FROM User WHERE  = ''", connection);
  
  DataTable table = new DataTable();
  dataAdapter.Fill(table);
  DevExpress.XtraCharts.Series series = new DevExpress.XtraCharts.Series();
  chartControl1.Series.Add(series);
  series.DataSource = table;
  series.ValueDataMembers.AddRange(new string[] { "" });
  series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
  series.ArgumentDataMember = "";
  series.ValueScaleType = DevExpress.XtraCharts.ScaleType.Numerical;
  chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;                              
}

Web Controls

The code below shows how to populate a DevExpress Web control with Vercel data. The APIDataAdapter binds to the Series property of the chart; the Diagram property defines the x- and y-axes as the column names.

using DevExpress.XtraCharts;

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\Vercel.apip;AuthScheme=APIKey;APIKey=your_access_token;"))
{
  APIDataAdapter APIDataAdapter1 = new APIDataAdapter("SELECT ,  FROM User WHERE  = ''", connection);
  DataTable table = new DataTable();
  APIDataAdapter1.Fill(table);
  DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
  WebChartControl1.Series.Add(series);
  series.DataSource = table;
  series.ValueDataMembers.AddRange(new string[] { "" });
  series.ArgumentScaleType = ScaleType.Qualitative;
  series.ArgumentDataMember = "";
  series.ValueScaleType = ScaleType.Numerical;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}