DataBind Asana Data to the DevExpress Data Grid

The ADO.NET Provider for Asana by CData 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.

You can optionally set the following to refine the data returned from Asana.

• WorkspaceId: Set this to the globally unique identifier (gid) associated with your Asana Workspace to only return projects from the specified workspace. To get your workspace id, navigate to https://app.asana.com/api/1.0/workspaces while logged into Asana. This displays a JSON object containing your workspace name and Id.
• ProjectId: Set this to the globally unique identifier (gid) associated with your Asana Project to only return data mapped under the specified project. Project IDs can be found in the URL of your project's Overview page. This will be the numbers directly after /0/.

Connect Using OAuth Authentication

You must use OAuth to authenticate with Asana. OAuth requires the authenticating user to interact with Asana using the browser. See the "Getting Started" chapter of the help documentation for a guide to using OAuth.

Windows Forms Controls

The code below shows how to populate a DevExpress chart with Asana data. The AsanaDataAdapter 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 (AsanaConnection connection = new AsanaConnection(
"OAuthClientId=YourClientId;OAuthClientSecret=YourClientSecret;CallbackURL='http://localhost:33333';InitiateOAuth=GETANDREFRESH;")) {
 AsanaDataAdapter dataAdapter = new AsanaDataAdapter(
 "SELECT Id, WorkspaceId FROM projects WHERE Archived = 'true'", 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[] { "WorkspaceId" });
 series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
 series.ArgumentDataMember = "Id";
 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 Asana data. The AsanaDataAdapter 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 (AsanaConnection connection = new AsanaConnection(
"OAuthClientId=YourClientId;OAuthClientSecret=YourClientSecret;CallbackURL='http://localhost:33333';InitiateOAuth=GETANDREFRESH;"))
{
 AsanaDataAdapter AsanaDataAdapter1 = new AsanaDataAdapter("SELECT Id, WorkspaceId FROM projects WHERE Archived = 'true'", connection);
 DataTable table = new DataTable();
 AsanaDataAdapter1.Fill(table);
 DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
 WebChartControl1.Series.Add(series);
 series.DataSource = table;
 series.ValueDataMembers.AddRange(new string[] { "WorkspaceId" });
 series.ArgumentScaleType = ScaleType.Qualitative;
 series.ArgumentDataMember = "Id";
 series.ValueScaleType = ScaleType.Numerical;
 ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}