|
|
|
Simple Parent-Child Data Binding using Accordion Control |
|
Posted by
Moderator1
on
7/20/2008 1:51:15 AM
|
Category:
AJAX |
|
|
Total Views :
46179 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
|
Introduction
|
As we know, Accordion control is one of the Ajax Toolkit web controls,
which is used to display multiple panes one at a one. User can view the contents
inside the pane one by one by choosing the header section. In this article, we show
you how to bind the Accordion control with data source at run-time. Furthermore,
to enrich the quality of this article, we took the concept of parent-child relationship,
by introducing a GridView control inside the Accordion Control.
An Accordion control contains two template sections such as HeaderTemplate
and the ContentTemplate. As the name suggests, the HeaderTemplate
sections will have all the controls, which has to appear in the header pane of the
Accordion control. And its corresponding content and controls can to be placed in
the ContentTemplate section. |
|
|
Accordion Control Data Bind
To bind the Accordion control, we have make use of the DataSource property and the
DataBind method.
For demo purpose, we are going to use Customer Table with Customer
Type as the Header information and based on Customer Type, its corresponding customers
will be listed in the Content Section in a GridView Control. Then the data in the
GridView can be used for Edit, Update or Delete functions.
To start with, open an Ajax-enabled website in the Visual
Studio 2005, then in the
Default.aspx place a ScriptManager, an UpdatePanel and inside the UpdatePanel drag and drop an Accordion control. Switch to the Html-Code view, inside the Accordion
control’s tag, insert
and
sections manually.
First On <HeaderTemplate> Section
Now in the <HeaderTemplate> section, place a Label Control and write code
to bind it to display the value of Customer Type (Cus_Type).
|
|
<asp:Label runat="server" Id="lbHeaderId" Text='<%# Eval("Cus_Type") %>'></asp:Label> |
|
In the Code-behind page, write a method to bind the Accordion control.
|
private void BindAccordion()
{
sql = "Select distinct Cus_Type from Customers";
SqlDataAdapter da = new SqlDataAdapter(sql, “YourConnectionString”);
DataTable dt = new DataTable();
da.Fill(dt);
Accordion1.DataSource = dt.DefaultView;
Accordion1.DataBind();
}
|
|
The above BindAccordion method, fetches distinct Customer Type from the Customer
table, bind it with the Accordion control. Call this BindAccordion method in the Page load event.
|
protected void Page_Load(object sender, EventArgs e)
{
BindAccordion();
} |
|
Important Points to Remember before Binding an Accordion Control:
1. You cannot bind an Accordion control directly with a DataSet or DataTable. You
must convert it to a DataView before you bind it to the Accordion control.
2. SuppressHeaderPostbacks: Set the SuppressHeaderPostbacks property of the Accordion
control to TRUE to avoid postback when you click the Header section of the Accordion
control.
3. Include AjaxControlToolkit namespace on your Code-Behind to access the
methods and
properties of the Accordion control.
So after you do all the above points, save it and run it in your browser. You can
see the Accordion control populated with the Header information only. So we are
half way done. |
|
|
|
Focus on <ContentTemplate>
Now we are going to work on the <ContentTemplate> section of the Accordion
control. In this section, place a HiddenField and bind its value with Cus_Type.
This hidden field is responsible for maintaining the parent-child relationship between
the accordion control and the GridView control. That means the Customer Type value
in both the Header and Content section has to be uniformly maintained. In Header
section we have a Label control, on the same way in Content section we place this
hidden field.
|
<asp:HiddenField runat="server" id="hidCusType" value='<%# Eval("Cus_Type")
%>'></asp:HiddenField> |
|
|
Next place a Gridview control inside the <ContentTemplate> section exactly
below the HiddenField. As we are going to do Edit, Update and Delete operations
in the GridView control, we have to set the DataKeyNames value with Cus_Type and
Cus_Code, which meant for Customer Type and Customer Code respectively. Then set
the value of AutoGenerateColumns property as false. That means we have to add columns
in the GridView control which we want to display. So by clicking the Smart Tag at
the right-side corner of the GridView, choose Add New Columns and specify the Column
names in the Customer Table that you want to display. For this article purpose,
we have added columns for Customer Name (Cus_Name), Gender (Cus_Gender), City (Cus_City)
and State (Cus_State). Also add CommandField columns for Edit and Delete functions.
As we are going to perform Edit and Update operations, convert all the BoundField
columns to a TemplateField column by choosing the Property of the GridView >
Columns > Convert this field into a TemplateField. |
|
|
|
Now all the TemplateField column which will have a Label control at the <ItemTemplate>
section and a TextBox control at the <EditItemTemplate> section. Just change
the ID value of the Name, Gender, City, State Textbox as TxCusName, TxCusGender,
TxCusCity and TxCusState respectively.
Next add events for the GridView control, to display and manipulate the data within
the GridView control as follows:
For Edit, add OnRowEditing event and specify the event name as GridView1_RowEditing.
For Update, add OnRowUpdating event and specify the event name as GridView1_RowUpdating.
For Cancel Edit, add OnRowCancelingEdit event and specify the event name as GridView1_RowCancelingEdit.
For Delete, add OnRowDeleting event and mention its event name as GridView1_RowDeleting
Abstract to Set-up GridView control:
1. Set DataKeyNames value
2. Set AutoGenerateColumns as false
3. Add BoundField columns and CommandField columns for Edit and Delete.
4. Convert BoundField columns to TemplateField columns
5. In TemplateField > EditItemTemplate > change the ID of the TextBoxes.
6. Add events for Edit, Update, Cancel and Delete.
|
Bind the GridView inside Accordion Control:
In the OnItemDataBound event of the Accordion control, add the following Code.
|
protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs
e)
{
if (e.ItemType == AccordionItemType.Content)
{
GridView GridView1 = (GridView)e.AccordionItem.FindControl("GridView1");
HiddenField hidCusType = (HiddenField)e.AccordionItem.FindControl("hidCusType");
BindGrid(GridView1, hidCusType.Value);
}
} |
|
Point is that, we find the GridView and HiddenField controls, and pass the GridView
reference and the HiddenField value to a BindGrid method. The BindGrid method use
the Customer Type value to fetch data and bind it to the corresponding GridView
control.
|
private void BindGrid(GridView Grid, string lCustomerType)
{
string sql = "Select * from Customers Where Cus_Type=@CustomerType";
SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
da.SelectCommand.Parameters.Add("@CustomerType", SqlDbType.VarChar, 20).Value
= lCustomerType;
DataTable dt = new DataTable();
da.Fill(dt);
Grid.DataSource = dt;
Grid.DataBind();
} |
|
|
|
That’s
it. Now save everything and run this page. You can see, Accordion control
with Header Information and when you click on the Header section, it will expand
and show the GridView control with the corresponding data.
Add Events to the GridView control inside Accordion Control
To add events, first thing to consider is to identify which GridView inside the
Accordion control is firing the event. This can be identified easy with a single
line of code. See the RowEditing Event below.
|
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView GridView1 = (GridView)sender;
GridView1.EditIndex = e.NewEditIndex;
BindGrid(GridView1, GridView1.DataKeys[0].Value.ToString());
} |
|
So by creating a GridView object from the sender object, its easy to identify the
calling GridView control and its corresponding operations to take
place. Everytime
we call the BindGrid method by passing the calling GridView reference and the Customer
Type value which will be maintained in the GridView’s DataKeyNames value.
Cancel Event - OnRowCancelingEdit:
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs
e)
{
GridView GridView1 = (GridView)sender;
GridView1.EditIndex = -1;
BindGrid(GridView1, GridView1.DataKeys[0].Value.ToString());
} |
Update Event - OnRowUpdating:
In the RowUpdating event, additionally we have to find the TextBox control which
is in Edit Mode, by using the RowIndex property of the GridView control. Use those
TextBox values and the Customer Code maintained in the GridView control’s DataKeyNames
to update the corresponding row in the database. Finally call the BindGrid method
as usual.
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
GridView GridView1 = (GridView)sender;
TextBox TxCusName = (TextBox)GridView1.Rows[e.RowIndex].FindControl("TxCusName");
TextBox TxCusGender = (TextBox)GridView1.Rows[e.RowIndex].FindControl("TxCusGender");
TextBox TxCusCity = (TextBox)GridView1.Rows[e.RowIndex].FindControl("TxCusCity");
TextBox TxCusState = (TextBox)GridView1.Rows[e.RowIndex].FindControl("TxCusState");
string sql = "Update Customers Set Cus_Name=@CustomerName,"
+ "Cus_Gender=@CustomerGender, Cus_City=@CustomerCity, "
+ " Cus_State=@CustomerState, Cus_Type=@CustomerType "
+ "Where Cus_Code=@CustomerCode";
SqlConnection conn = new SqlConnection(ConnectionString);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
cmd.Parameters.Add("@CustomerCode", SqlDbType.Int).Value =
GridView1.DataKeys[e.RowIndex].Values[1].ToString();
cmd.Parameters.Add("@CustomerName", SqlDbType.VarChar, 50).Value = TxCusName.Text;
cmd.Parameters.Add("@CustomerGender", SqlDbType.VarChar, 6).Value = TxCusGender.Text;
cmd.Parameters.Add("@CustomerCity", SqlDbType.VarChar, 50).Value = TxCusCity.Text;
cmd.Parameters.Add("@CustomerState", SqlDbType.VarChar, 50).Value = TxCusState.Text;
cmd.Prepare();
cmd.ExecuteNonQuery();
conn.Close();
GridView1.EditIndex = -1;
BindGrid(GridView1, GridView1.DataKeys[e.RowIndex].Values[0].ToString());
} |
Delete Event – OnRowDeleting:
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
GridView GridView1 = (GridView)sender;
string sql = "Delete From Customers Where Cus_Code=@CustomerCode";
SqlConnection conn = new SqlConnection(ConnectionString);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
cmd.Parameters.Add("@CustomerCode", SqlDbType.Int).Value =
GridView1.DataKeys[e.RowIndex].Values[1].ToString();
cmd.Prepare();
cmd.ExecuteNonQuery();
conn.Close();
BindGrid(GridView1, GridView1.DataKeys[e.RowIndex].Values[0].ToString());
} |
|
Done. Now save the codes you have done above. Run it in your browser. You can see
the Accordion control populated with Customer Type and when you click the header
of the Accordion control, it will expand to show the GridView control populated
with data based on the Customer Type. You can Edit the data, Update it and Delete
the rows. |
|
|
|
|
Complete Source Code of Accordion & GridView Control:
|
<cc1:Accordion id="Accordion1" runat="server" Width="100%"
SuppressHeaderPostbacks="true" OnItemDataBound="Accordion1_ItemDataBound"
>
<HeaderTemplate>
<asp:Label runat="server" Id="lbHeaderId" Text='<%#Eval("Cus_Type") %>'>
</asp:Label>
</HeaderTemplate>
<ContentTemplate>
<asp:HiddenField runat="server" id="hidCusType" value='<%#Eval("Cus_Type")
%>'> </asp:HiddenField>
<asp:GridView runat="server" id="GridView1" AutoGenerateColumns="False"
OnRowEditing="GridView1_RowEditing" OnRowCancelingEdit="GridView1_RowCancelingEdit"
DataKeyNames="Cus_Type,Cus_Code" OnRowUpdating="GridView1_RowUpdating"
OnRowDeleting="GridView1_RowDeleting" >
<Columns>
<asp:TemplateField HeaderText="Name" SortExpression="Cus_Name">
<EditItemTemplate>
<asp:TextBox ID="TxCusName" runat="server" Text='<%# Bind("Cus_Name") %>'
CssClass="InputFieldLogin"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Cus_Name") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Gender">
<EditItemTemplate>
<asp:TextBox ID="TxCusGender" runat="server" Text='<%# Bind("Cus_Gender")
%>' CssClass="InputFieldLogin" width="50px"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Cus_Sex") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City">
<EditItemTemplate>
<asp:TextBox ID="TxCusCity" runat="server" Text='<%# Bind("Cus_City") %>'
CssClass="InputFieldLogin"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("Cus_City") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="State">
<EditItemTemplate>
<asp:TextBox ID="TxCusState" runat="server" Text='<%# Bind("Cus_State") %>'
CssClass="InputFieldLogin"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("Cus_State") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField HeaderText="Update" ShowEditButton="True">
</asp:CommandField>
<asp:CommandField HeaderText="Delete" ShowDeleteButton="True">
</asp:CommandField>
</Columns>
<EmptyDataTemplate>
<asp:Label ID="Label1" runat="server" CssClass="WarnBold" Text="No Records Found."></asp:Label>
</EmptyDataTemplate>
</asp:GridView>
</ContentTemplate>
</cc1:Accordion> |
|
|
|
Click here to view the Accordion Control with GridView |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|