AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 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 : 154480
Add to my favorites
Email to friend
  
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.
Viewer's Comments
Posted by Voldo on 6/25/2007 8:43:41 PM
Please show the code on the aspx page as I find out confusing where to put the panels etc thanks
 
Posted by Joshua on 7/1/2007 7:29:33 PM
Why do you generate the menu popup for each row when the menu (except the links) is the same for all rows? There should be a better (dynamic) way to share the menu accross the gridview.
 
Posted by B- on 7/4/2007 7:37:16 PM
Ignore those less appreciative...This is a cool sample thanks for taking the time to build and share it. Inspired to make my boring GridViews better...thanks again
 
Posted by Ju on 7/10/2007 4:04:19 AM
Hi, Thx for this article, it help me a lot. I got a little "problem" I made a test using this article : I have a gridview with 2 fields from a DB. I have the popup only when I put my mouse over the first field, but not the second one. Can someone tell me how to fix that ? Thanks in advance.
 
Posted by Deon on 7/10/2007 4:13:33 AM
Please could you exlplain to me the following line. "In Panel1, add the fields you like to manipulate or display." Am not sure how the columns work that get populated and linked with the datasourcefield in the database. Thanks
 
Posted by Deon on 7/10/2007 6:21:36 AM
I tried to achieve this and am almost done but im sitting with some problems would it be possible for you to please email me the source code for this example so i can see were i went wrong? Thanks
 
Posted by 2 on 7/12/2007 1:16:24 AM
Please show the coutput for each codings
 
Posted by Leonny on 7/15/2007 7:41:29 PM
Hi, Thanks for this good article. I have a small "problem": how can I capture then customer code, name and location values from EditItemTemplate controls? I used these codes as below, but it wasn't work, it got the blank values: // begin =================================== protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e) { GridViewRow row = GridView1.Rows[e.RowIndex]; TextBox lblCodeValue= (TextBox)row.Cells[2].FindControl("lb
 
Posted by Leonny on 7/15/2007 7:47:18 PM
Hi, Thanks for this article. I have a small "problem": how can I capture then customer code, name and location values from EditItemTemplate controls? I used these codes as below, but it wasn't work, it got the blank values: // begin protected void GridView1_RowUpdating(object sender,GridViewUpdateEventArgs e) { GridViewRow row = GridView1.Rows[e.RowIndex]; TextBox v= (TextBox)row.Cells[2].FindControl("lblCode"); //this will get a blank value //... } //end Please help! thanks a lot!
 
Posted by Leonny on 7/16/2007 10:44:05 AM
Thanks a lot! I have sloved the problem!
 
Posted by Leonny on 7/16/2007 10:45:19 AM
Thanks a lot! I have solved the problem!
 
Posted by Dan on 8/6/2007 2:14:59 AM
I am having trouble with retrieving the new value for the text box. Please help
 
Posted by Daniel on 8/6/2007 2:22:45 AM
Sorry... my previous post was too brief... I managed to display the hovermenu, clicked on Edit and pop-up the TextBox. However, after changing the value in the text box (edititemTemplate control), I am unable to retrieve the new value from the text box for the update (into the database). This is what I am using... TextBox estimate = (TextBox)grid1.Rows[e.RowIndex].Cells[0].FindControl("txtEstimate"); time = estimate.Text.ToString(); database.Up
 
Posted by fabsix on 9/27/2007 11:35:24 AM
Hi folks, I am having troubles updating the rows. When I click to the edit button, I receive Textboxes where I can make my changes. The Template Buttons change to update/cancel. I change the Text in the fields. When I click the update Button, the event gets fired. (object sender, GridViewUpdateEventArgs e) Altough e.NewValues.Count is always 0. How do you get the contents of the changed "TextBoxes". If I try to get them with ((TextBox)grid1.Rows[e.RowIndex].Cells[xy].Controls[0]).Text; I alwa
 
Posted by papakev123 on 10/2/2007 4:20:35 PM
This is a good code example. If you know how to work with the ItemTemplate in repeater controls then you can do a lot with this example. I am going to use it to read an xml file and build a repeating list that pops up a description of the list item. I'm going to put it out on a college website for course descriptions. See what a little imagination can do. Thanks for the example.
 
Posted by suhail on 10/5/2007 5:15:07 AM
i am facing the problem with add new link
 
Posted by Maitry on 11/30/2007 4:57:25 AM
plz help me i need the solution fast
 
Posted by santhosh on 11/30/2007 1:02:06 PM
hi ... i dont how edit, delete, select in gridview in asp.net and i need sample project and coding for that in c#
 
Posted by santhosh on 11/30/2007 1:02:12 PM
hi ... i dont how toedit, delete, select in gridview in asp.net and i need sample project and coding for that in c#
 
Posted by Ivy on 12/7/2007 7:44:25 AM
Hi, this looks really great but unfortunatly I can't seem to get to the new values of the textboxes when I want to edit a row. Is it possible to reveal more information please. Thanks!
 
Posted by Amit on 1/17/2008 1:58:07 AM
By using the item template make the new link
 
Posted by Amit on 1/17/2008 2:00:11 AM
for editing,updating and select fire events. For edit row editing, for update fire row updating
 
Posted by praveen on 1/22/2008 9:59:59 AM
its showing error in cc1:HoverMenu
 
Posted by Burak Donbay on 2/4/2008 8:29:08 AM
Thanks for article, it is perfect!
 
Posted by srinivas on 2/5/2008 11:30:54 PM
hi , This is srinivas, Let me know please... how to bind hyper links in data grid from database. please send this code in c# Thank in advance.
 
Posted by Bala on 2/12/2008 5:29:05 AM
Hi, It was very nice.I couldn't able to run the same code.If it is brief then I can.pls help me!!!!!
 
Posted by Bala on 2/12/2008 5:31:16 AM
If you give sample coding with source code and code behind code,Its easy for me like fresher.
 
Posted by manjeet on 2/20/2008 12:51:17 AM
it really helped me
 
Posted by Selçuk YAPICI on 4/2/2008 2:20:05 AM
its showing error in cc1:HoverMenu
 
Posted by Nilesh on 4/7/2008 9:46:42 AM
plz help me frnds, how to get the specific id from the grid to delete
 
Posted by UmaJanakaraj on 4/8/2008 6:03:38 AM
how to move the deleted row from inbox.aspx page to deleteditems.aspx page, for example, see the gmail format. try to send me the code asap. thank u.
 
Posted by Dennis on 5/5/2008 3:17:37 AM
HOW I CAN GET THE UPDATED VALUE FROM THE TEXTBOX?? ONLY RETURNS THE ORIGINAL TEXT FROM THE TEXTBOX.
 
Posted by Rekha on 5/7/2008 4:33:15 AM
I have a gridview with data.Whenever i click the edit link button apper in separate column ,textboxes must apper in that particular row with the text apper in that row.so that i can modify the data.
 
Posted by yan yurinev on 5/18/2008 9:15:17 AM
please send me the code asap
 
Posted by himanshu Gangwar on 6/25/2008 8:51:55 AM
how to write code for click on row event on datagrid and populate event an another datagrid in asp.net with C#
 
Posted by Luis on 10/16/2008 5:59:54 PM
Great article! Thanks.
 
Posted by vb on 11/11/2008 5:06:15 AM
nice article
 
Posted by jismi on 11/22/2008 1:46:55 AM
how to write code for fetch,insert,delete and update statements blocks in ‘CustomerCls.cs’
 
Posted by Ukraine, Berlin on 11/26/2008 9:42:28 AM
Buy Cheap Cialis Online : http://forumpro.nl/forum/wteend/viewtopic.php?t=11976
 
Posted by Praveen on 12/4/2008 10:38:44 PM
please send me the code asap for insert,delere,update, if possible entire it will helpful for us praveenvaru@yahoo.co.in
 
Posted by buzi on 12/9/2008 9:29:02 AM
Hello, very interesting topic, I fully agree with the author :
 
Posted by Tarun on 12/14/2008 11:21:27 AM
can u tell me how the grid view will come in editable mode when click on edit. this event is not called "GridView1_RowEditing". on edit link i have a command name "EditRow". when i click edit the "GridView1_RowCommand" is fired... my question is how do get the row in editable mode. thanks..
 
Posted by Maneesh on 12/19/2008 12:03:43 AM
Really your articles are very helpfull as they fill the confidence in the people .Really Very Good.
 
Posted by buzi on 12/31/2008 12:06:55 AM
Hi! Happy New Year! I wish you happiness, health, luck and wealth in the new year! :
 
Posted by Kelli on 1/18/2009 2:09:43 PM
Could you help me. Nothing takes the taste out of peanut butter quite like unrequited love. I am from Japan and learning to read in English, give please true I wrote the following sentence: "Welcome to houston job search! We are a houston employment agency offering a how to write a resume." Thank you very much :P. Kelli.
 
Posted by lakshmi on 2/12/2009 6:28:04 AM
Really all the article r super but littel bit better to add somemore details about ajax n dotnet detail is nice to gather every one read it n do something in new
 
Posted by amit on 2/19/2009 5:52:48 AM
hey i have tried using hover menu in grid view it work fine . but it disappear too soon.so soon tht cant select any item in menu.plz give me some idea .
 
Posted by jose on 3/13/2009 8:55:25 AM
this example sucks so bad
 
Posted by S.Subha on 3/17/2009 3:50:06 AM
Please explain it clearly,I'm confused where to create the menu.Please give the source window codings.
 
Posted by S.Subha on 3/17/2009 3:54:32 AM
Please explain it clearly,I'm confused where to create the menu.Please give the source window codings.
 
Posted by Very nice site! on 3/23/2009 8:28:04 PM
Very nice site!
 
Posted by Ravi Singh on 3/26/2009 1:20:03 AM
Very Helpfull Article and Site....Thanks
 
Posted by vinay on 4/13/2009 5:26:31 AM
this article is nice but there is little bit of confussion to handle the panels
 
Posted by R.Sridhar on 4/22/2009 5:49:33 AM
I need to create a column with textboxes in the gridview and another bound column.I want to enter the data in the gridview at runtime and the insert this data into a table in the database by clicking an insert button. My problem is i could create a grid with a textbox column but i couldn't store them into the database by clicking the insert button ,can you please help me.
 
Posted by madhu on 5/5/2009 4:59:04 AM
in my project im using datagrid.in grid columns are s.no,hearing date,court name.i want only one time displaying the hearing date more than once.but i want to display hearing date wise court halls
 
Posted by madhu on 5/5/2009 4:59:04 AM
in my project im using datagrid.in grid columns are s.no,hearing date,court name.i want only one time displaying the hearing date more than once.but i want to display hearing date wise court halls
 
Posted by pradeep on 5/10/2009 3:36:54 PM
sir, please tell me about grid view in asp.net n fm i read about grid view
 
Posted by Mobeen on 6/1/2009 1:40:29 AM
Hello..i applied this code but on mouse over on any row menu don't appear can any one tell me what is the problem.
 
Posted by juno Tiwari on 7/4/2009 4:37:17 PM
it help us in tcs
 
Posted by Lija on 7/22/2009 4:36:23 AM
It's good
 
Posted by veeru on 7/30/2009 1:38:58 AM
Its good
 
Posted by danS on 7/30/2009 2:49:45 PM
can you send me the code behind file .aspx.cs, the .cs file, and full .aspx file? I am just starting out and any extra info will help.
 
Posted by Pradeep yadav on 8/3/2009 2:07:36 AM
Sir, we want to edit in the database table after selecting the item from dropdownlist after click on submit button and opening the selected page we want to edit in the panel text for change in the database table.
 
Posted by Pradeep yadav,Kunda on 8/3/2009 2:11:28 AM
Sir, we want to edit in the database table after selecting the item from dropdownlist after click on submit button and opening the selected page we want to edit in the panel text for change in the database table. pls give me C# code for this problem.
 
Posted by deepa on 9/25/2009 12:35:43 AM
hyperlink field in database is displayedin gridview in asp net.now how to make it editable?
 
Posted by Norbo on 10/24/2009 2:56:32 PM
Its very good. I follow the instructions, but the AddNew method isnt work, and i dont know why .Can you send me too the codes?
 
Posted by pc on 2/3/2010 7:05:25 AM
Very nce article thanx ...... The OnRowCommand adds an empty row in the customer table, show the last row of the GridView in Edit Mode with Textboxes in it. i also want dropdown list in the edit mode.. is it possible ??what must be the way can any one suggest !!!
 
Posted by Mazin on 2/17/2010 7:07:19 AM
Can anyone tell me how to insert multiple locations of an image in a single field of a database table...?
 
Posted by Shiv Narayan Bharawa on 4/27/2010 7:20:01 AM
Thank's for the article. its tricky but realy its helpful.
 
Posted by ashish on 5/10/2010 1:07:47 PM
pls tell me how to achieved right click event on data grid view in assp.net
 
Posted by ashish on 5/10/2010 1:08:07 PM
pls tell me how to achieved right click event on data grid view in assp.net
 
Posted by sukhdeep kaur on 5/19/2010 3:59:08 AM
i have gridview and i want that when i click on grid view a pop up will open, containing two buttons "Edit" and delete and when i click on edit that row's values will open in textboxes on the page containing gridview not in poup window...
 
Posted by Asshok on 2/2/2011 9:30:59 AM
it would have been better if the code was together
 
Posted by nazi jani on 2/14/2011 7:42:12 PM
Could you please give a hint to all of us who have trouble with the edited value not getting saved. it keeps writing the old value to the database. I really appreciate your help.
 
Posted by Arun PS on 4/7/2011 3:39:42 AM
How did you do the header Text in template field
 
Posted by Pratiksha on 4/13/2011 9:13:57 AM
Hi, Your article is really good. I am doing a college project and i have trouble with gridview along with database. Can you please share the code for CustomersCls.cs file? I really appreciate your help
 
Posted by Neethu Mathew on 5/21/2014 5:08:56 AM
Insert ,Update, delete from gridview using Ajax HoverMenu without using link button
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
Twenty-One plus Six Equals To
 
Sponsored by
Washington Technology
FierceDeveloper
Integrating Silverlight 4 with SharePoint 2010 - Free 42 Page Sample Chapter