|
|
|
Asp.Net Ajax HoverMenu Control On GridView with Database Manipulations |
|
Posted by
Moderator1
on
6/20/2007 11:59:20 AM
|
Category:
AJAX |
|
|
Total Views :
110465 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
Introduction |
|
This article explains the concept of associating the Asp.Net Ajax HoverMenu Control
with GridView and to manipulate the records in database with the help of HoverMenu. |
|
|
|
Description |
HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET Server
Controls, and will associate that control with a popup panel to display additional
content. When the user moves the mouse cursor over the main control, the popup gets
displayed at the specified position and a CSS style can also be applied to the main
control to highlight the selection or mouse over action.
Sample Scenario
For demonstration, we are going to populate an ASP.NET GridView with data from a
database. Let us take a simple Customer Table. In each row of the GridView, a HoverMenu
is placed with the content of the row to Add, Edit, Update and Delete records. When
we mouse over the GridView, the popup HoverMenu will appear. We can choose from
the menu options to do neccessary action.
|
|
|
|
|
Pre-requisites
Your project or website must be ASP.NET AJAX enabled website. You must have Asp.Net
Ajax version 1.0 and latest version of AjaxControlToolkit. You need to create a
Customer Table with atleast one record in it. Please follow the steps explained
below closely and carefully.
Step 1. Create Class File ‘CustomerCls.cs’
We need to create a class file to do
database manipulations such as fetch, insert, delete and update data in the Customer
Table. So we add a class file as ‘CustomersCls.cs’ in App_Code section. Let us write
four methods in the class file as follows |
|
|
|
|
|
public void Insert(string CustomerName, string Location)
{
// Write your own Insert statement blocks
}
public DataTable Fetch()
{
// Write your own Fetch statement blocks, this method should return a DataTable
}
public void Update(int CustomerCode, string CustomerName, string Location)
{
// Write your own Update statement blocks.
}
public void Delete(int CustomerCode)
{
// Write your own Delete statement blocks.
} |
|
|
|
Step 2: Make Design File ‘Default.aspx’
In the Default.aspx page, add an UpdatePanel control. Inside the UpdatePanel, add
a GridView, set AutoGenerateColumns as False and add a Template Field. In the Template
field’s, ItemTemplate section, add two Panel controls and drag and drop the HoverMenuExtender
into it. In Panel1, add the fields you like to manipulate or display. In Panel2,
add three LinkButtons, change the Text and CommandName property of the LinkButtons
to Add New, Edit and Delete. Specify the HoverMenuExtender’s TargetControlId property
to Panel1. Now you can see an Extender property list in Panel1’s properties tab.
Expand the Extender tab, set the PopupControlId to Panel2 and set the PopupPosition
as Left.
|
Next in EditItemTemplate section, add two Panel controls and drag and drop the HoverMenuExtender.
In Panel1 of the EditItemTemplate, add Textboxes for the fields you want to provide
edit option. In Panel2 of the EditItemTemplate, add two LinkButtons and change the
Text and CommandName property to Update and Cancel respectively. Set the TargetControlId
of HoverMenuExtender to Panel1. In the same way, you can see an Extender property
list in Panel1’s properties tab. Expand it, set the PopupControlId to Panel2 and
set the PopupPosition as Right.
Save the changes and now the Default.aspx page is ready.
|
|
|
Step 2: Make Code-Behind File ‘Default.aspx.cs’
In the code-behind page, create an instance for the Customer class as follows
|
CustomerCls customer=new CustomerCls(); |
Then create a private method to retrieve the existing customer list from the database
and bind it to the GridView. The CustomerCls class’s Fetch() method is used and
it returns the data to a DataTable.
private void FillCustomerInGrid()
{
DataTable dtCustomer= customer.Fetch();
GridView1.DataSource = dtCustomer;
GridView1.DataBind();
} |
Run the application, you can see the GridView filled with data. When you mouse over
the GridView, you can see a HoverMenu with Add New, Edit and Delete option.
Add New Row in GridView
In the OnRowCommand event of the GridView, add the following code.
if (e.CommandName.Equals("AddNew"))
{
customer.Insert(null,null);
GridView1.EditIndex = GridView1.Rows.Count;
FillCustomerInGrid ();
}
|
When Add New option is clicked, the above method gets fired. It adds an empty row
in the customer table, show the last row of the GridView in Edit Mode with Textboxes
in it. You can see another new HoverMenu on the right side with Update and Cancel
option. When you click on the Update linkbutton, the real data has to be saved in
customer table. Here GridView’s OnRowUpdating event will get fired, so you have
to do necessary coding to capture the data from the Textboxes and Update() method
of CustomerCls should be called to update the data into the customer table.
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
//Do necessary coding to capture customer code, name and location
from EditItemTemplate controls
customer.Update(value for customer code, “value for name”, “value for
location”);
GridView1.EditIndex = -1;
FillCustomerInGrid();
} |
Edit and Update in GridView
In the RowEditing event of the GridView, add the following lines of code. This will
switch a specific row of the GridView to Edit Mode.
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
FillCustomerInGrid();
} |
After the GridView swithes to Edit Mode, the mouse over will populate the HoverMenu
with Update and Cancel option. To update the data to the customer table, just you
have to click on the Update linkbutton as we have already handled the RowUpdating
event. To cancel the action, add the following two lines of code in the GridView’s
RowCancelingEdit event.
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs
e)
{
GridView1.EditIndex = -1;
FillCustomerInGrid();
} |
|
|
Delete in GridView
To delete a row from the customer table, add the following lines of code in the
GridView’s RowDeleting event. Here you have to do necessary codings to capture the
customer code from the GridView’s ItemTemplate section with your own logic. Then
call the Delete() method of the CustomerCls and pass the customer code as argument.
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
//Do necessary coding to capture customer code from GridView ItemTemplate
section
customer.Delete(value for customer code);
FillCustomerInGrid();
} |
The content and logic provided in this article is not assured by anyone, that it
will work perfect in all conditions. This is solely for purpose of educating and
providing basic concepts or ideas regarding the Asp.Net Web Controls and its components.
|
Click here to view Source Code of the GridView Control
HyperLink
|
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowEditing="GridView1_RowEditing"
Caption="Customer List" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowUpdating="GridView1_RowUpdating"
EmptyDataText="You have deleted all records in customer list" OnRowDeleting="GridView1_RowDeleting"
OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server" Width="400px">
<asp:Label ID="lblCode" runat="server" Text='<%# Eval("Cus_Code")
%>' Visible="False"></asp:Label>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Cus_Name")
%>'></asp:Label>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("Cus_City")
%>' ></asp:Label>
</asp:Panel>
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" HoverCssClass="popupHover"
PopupControlID="PopupMenu" TargetControlID="Panel1" PopupPosition="Left"> </cc1:HoverMenuExtender>
<asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu">
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="AddNew"
Text="Add New"></asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit"
Text="Edit"></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete"
Text="Delete"></asp:LinkButton>
</asp:Panel>
</ItemTemplate>
<EditItemTemplate>
<asp:Panel ID="Panel1" runat="server" Width="400px">
<asp:Label ID="lblCode" runat="server" Text='<%# Eval("Cus_Code")
%>' Visible="false"></asp:Label>
<asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Cus_name")
%>'></asp:TextBox>
<asp:TextBox ID="txtCity" runat="server" Text='<%# Eval("Cus_city")
%>'></asp:TextBox>
</asp:Panel>
<cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server" HoverCssClass="popupHover"
PopupControlID="PopupMenu" PopupPosition="Right" TargetControlID="Panel1"> </cc1:HoverMenuExtender>
<asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu"
Width="80">
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True"
CommandName="Update" Text="Update"></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</asp:Panel>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView> |
|
|
|
|
Click here to view the Sample created with the above code. |
|
|
|
|
|
|
|
|
|
|
|
|
|