Trigger a Smart Callback in WebAsyncRefreshPanel

One of the unique features of WebAsyncRefreshPanel is its ability to have its hidden asynchronous postback fired by a control outside of the refresh panel. This topic walks you through the process of having a button on the form change the control inside the refresh panel using the refresh panels hidden asynchronous postback.

In this example, we will use the WebChart control inside the WARP Panel control. A button outside of the refresh panel will change the chart type, the data source, and re-render the chart, without the page posting back.

1. Create a new Microsoft® Visual Studio® ASP.NET WebSite.
2. Before you start writing any code, you should place using/imports directives in your code-behind so you don't need to always type out a member's fully qualified name.

   In Visual Basic:

   Imports Infragistics.UltraChart.Shared.Styles
   

   In C#:

   using Infragistics.UltraChart.Shared.Styles;
   

   
   
3. From the toolbox, drag the WARP Panel control onto your Web form. Then, drag the WebChart control into the WARP Panel control.
4. From the toolbox, drag the Button control onto the Web form, and change the Label property to "Change Chart", and button ID to "btnChangeChart".
5. Select the WARP Panel control and scroll down to the TriggerControlIDs property. From the property's drop-down list select the newly created button (btnChangeChart).
6. In the code-behind, create the Page Load event and the Button's Click event. Inside the Page_Load event, specify the data source for the chart, and call the chart's data bind.
   Note: This topic does not show you the actual data to which the chart is being bound. For information on this subject, see WebChart's Data section.
   
   

   In Visual Basic:

   Private Sub Page_Load(ByVal sender As System.Object, _
     ByVal e As System.EventArgs) Handles MyBase.Load
   	Me.UltraChart1.DataSource = GetColumnData()
   	Me.UltraChart1.DataBind()
   End Sub
   

   In C#:

   private void Page_Load(object sender, System.EventArgs e)
   {
   	this.UltraChart1.DataSource = GetColumnData();
   	this.UltraChart1.DataBind();
   }
   

   
   
7. In the Button's Click event place the following example code. This code checks to see if the ChartType property is set to ColumnChart; if it is it changes the property to RadarChart, if the property is set to RadarChart, it changes the property to ColumnChart.

   In Visual Basic:

   Private Sub btnChangeChart_Click(ByVal sender As Object, _
     ByVal e As System.EventArgs) Handles btnChangeChart.Click
   	If Me.UltraChart1.ChartType.ToString() = "ColumnChart" Then
   		Me.UltraChart1.ChartType = ChartType.RadarChart
   		Me.UltraChart1.DataSource = GetRadarData()
   		Me.UltraChart1.DataBind()
   	Else
   		Me.UltraChart1.ChartType = ChartType.ColumnChart
   		Me.UltraChart1.DataSource = GetColumnData()
   		Me.UltraChart1.DataBind()
   	End If
   End Sub
   

   In C#:

   private void btnChangeChart_Click(object sender, System.EventArgs e)
   {
   	if(this.UltraChart1.ChartType.ToString() == "ColumnChart")
   	{
   		this.UltraChart1.ChartType = ChartType.RadarChart;
   		this.UltraChart1.DataSource = GetRadarData();
   		this.UltraChart1.DataBind();
   	}
   	else
   	{
   		this.UltraChart1.ChartType = ChartType.ColumnChart;
   		this.UltraChart1.DataSource = GetColumnData();
   		this.UltraChart1.DataBind();
   	}
   }
   

   
   
8. Run this Web form, and click on the button. You will see the chart change to the other chart type without causing a full page postback.