DataBind Asana Data to the DevExpress Data Grid

Ready to get started?

Download for a free trial:

Download Now

Learn more:

Asana ADO.NET Provider

Rapidly create and deploy powerful .NET applications that integrate with Asana.



Use the CData ADO.NET Provider for Asana with the DevExpress Windows Forms and Web controls to provide Asana data to a chart.

The CData ADO.NET Provider for Asana implements standard ADO.NET data access components that can be used with third-party controls. The standard ADO.NET process for databinding can be followed to enable bidirectional access to live data from UI controls. In this article we show how to use the CData components to databind to the DevExpress Windows Forms and Web controls; you will databind to a chart that displays current 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; }