I'm a bit of a late comer to using AJAX but I now have a pretty good scenario to take advantage of it.

Here's what I want to accomplish:

I want to have three GridViews side by side. I want a template field in the left GridView and when a user click a button placed in the template field in the left GV, I want the middle GV to be populated. Likewise, when the user clicks a button placed in a template field in the middle GV, I want the right GV to be populated.

Could someone give me some pointers to get this going? Thanks.

Well if you are using an SqlDataSource to populate the second and third gridview then you can add code to databind them when the user clicks what ever they need to click in the first gridview. If you supply the gridview with a datasource and then call GridView.DataBind(); it should populate the gridveiw with the data from the data source

My main question is about button click events. In each row of GridView1 there will be a button for the user to click so that GridView2 can be populated. Obviously, these buttons will be created dynamically on the fly so how do I define their onClick events?

Set the OnCommand method & populate the CommandName/Argument properties of your button using an item template instead of a bound column. Then in the EventHandler just consume the CommandArgument parameter from the CommandEventArgs passed into the handler. From there you should be able to set your datasource for the second gridview and call databind. Do the same thing for the second gridview. Also you'll probably want to clear the datasource for the third GV in the event handler for the first GV.

 
If you need greater control over the parameters of the button you can always override the OnDataBinding event of the the gridview and modify the controls programatically.

S

 

Protected Sub gridView_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gridView.RowCreated

      
        If e.Row.RowType = DataControlRowType.DataRow Then

	    
            e.Row.Attributes.Add("onclick", "javascript:__doPostBack('" + Me.gridView.ID + "','Select$" + (rowCount - 1).ToString + "')")
            e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer';)
            
	  
        End If


        rowCount += 1 'in page load event set rowCount=0


End Sub

'then in gridView.selectedIndexChanged event set the datasource of the second gridView
'something like 
Me.dataSource2.selectCommand="SELECT ... WHERE id=" + me.gridView.selectedValue
Me.gridView2.DataBound()
'perhaps UpdatePanel2.Update()

The same for 2nd and 3rd gridView.