ASP.NET - Ajax hover menu on gridview with make a add link

Asked By kamakshi masilamani on 17-Feb-09 04:50 AM

Hi all,

I am using Asp.Net Ajax Hover menu on gridview. created the add new linked popup, but i need, clicking add link, empty textbox should have to display in gridview to enter the values and save it in db. How could i do it. Kindly help me..

TRY THIS - C_A P replied to kamakshi masilamani on 17-Feb-09 06:08 AM

<asp:ObjectDataSource ID="odsFeatures" runat="server" OnSelected="ObjectDataSource1_FeatureSelected"
OnDeleted="ObjectDataSource1_FeatureDeleted" UpdateMethod="UpdateFeature" InsertMethod="InsertFearure"
DeleteMethod="DeleteFeature" DataObjectTypeName="com.safes.Feature" TypeName="com.safes.FeatureDAL"
SelectMethod="SelectFeature">

<SelectParameters>
<asp:ControlParameter ControlID="ddlCategories" Name="categoryID" PropertyName="SelectedValue"
Type="Int32" />

</SelectParameters>
</asp:ObjectDataSource>
<asp:GridView ID="GridView2" runat="server" Width="100%" CssClass="smallCopy" DataSourceID="odsFeatures"
AutoGenerateColumns="False" DataKeyNames="FeatureId">

<Columns>
<asp:CommandField ButtonType="Button" ItemStyle-Width="95" ShowEditButton="True"
ShowDeleteButton="True" ControlStyle-CssClass="cmsButton" CausesValidation="false" />

<asp:BoundField DataField="Name" ItemStyle-Width="600" ControlStyle-Width="600" HeaderText="Name"
SortExpression="Name" />

<asp:TemplateField HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
HeaderText="View">

<ItemTemplate>
<asp:Panel ID="pnlFeatureTarget" runat="server">
<asp:Button ID="btnFeatureView" CausesValidation="false" OnClientClick="return false;"
ToolTip='<%# Eval("FeatureId") %>
' Text='View' CssClass="cmsSelectButton" runat="server" /></asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hmeFeature" runat="Server" HoverCssClass="popupHover"
PopupControlID="pnlFeatureView" PopupPosition="Left" TargetControlID="pnlFeatureTarget"
PopDelay="100" />

<asp:ObjectDataSource ID="ObjectDataSource4" runat="server" SelectMethod="getSafesByFeatureId"
TypeName="com.safes.SafeFactory">

<SelectParameters>
<asp:ControlParameter ControlID="btnfeatureView" Name="FeatureId" PropertyName="tooltip"
Type="Int32" />

</SelectParameters>
</asp:ObjectDataSource>
<asp:Panel ID="pnlFeatureView" runat="server" CssClass="popupControl">
<asp:GridView EmptyDataText="No Safes Found" EmptyDataRowStyle-BackColor="#EEEEEE"
EmptyDataRowStyle-ForeColor="black" EmptyDataRowStyle-CssClass="smallCopy" ID="FeatureGridView2"
runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource4" CssClass="smallCopy cmsAlignRight"
Width="0" BorderColor="#333333" BorderStyle="Solid" BorderWidth="1px" CellPadding="3"
GridLines="Vertical">

<Columns>
<asp:HyperLinkField DataTextField="ModelNo" HeaderText="Model" SortExpression="ModelNo"
ItemStyle-HorizontalAlign="center" DataNavigateUrlFields="ModelNo" DataNavigateUrlFormatString="editSafeRedirect.aspx?m={0}" />

</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#D23127" Font-Bold="True" ForeColor="White" CssClass="mediumCopy" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#D23127" Font-Bold="True" ForeColor="White" CssClass="mediumCopy" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>

SOURCE FROM ::: http://adesalvo.blogspot.com/2007/04/ajax-gridviews-and-hovermenuextenders.html

TRY THIS LINK - C_A P replied to kamakshi masilamani on 17-Feb-09 06:09 AM

http://www.codeproject.com/KB/aspnet/gridview_hovermenu.aspx

http://www.aspdotnetcodes.com/Asp.Net_Ajax_HoverMenu.aspx

 

TRY THIS - C_A P replied to kamakshi masilamani on 17-Feb-09 06:14 AM

here is the code of the HoverGridView custom WebControl:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Drawing;

 

/// <summary>

/// Summary description for HoverGridView

/// </summary>

 

namespace Roboblob.WebControls

{

 

    [ToolboxData("<{0}:HoverGridView runat=server></{0}:HoverGridView>")]

    public class HoverGridView : System.Web.UI.WebControls.GridView

    {

        public bool MouseHoverRowHighlightEnabled

        {

            get

            {

                if (ViewState["MouseHoverRowHighlightEnabled"] != null)

                    return (bool)ViewState["MouseHoverRowHighlightEnabled"];

                else

                    return false;

            }

            set { ViewState["MouseHoverRowHighlightEnabled"] = value; }

        }

 

        public Color RowHighlightColor

        {

            get

            {

                if (ViewState["RowHighlightColor"] != null)

                    return (Color)ViewState["RowHighlightColor"];

                else

                {

                    // default color

                    return Color.Yellow;

                }

            }

            set { ViewState["RowHighlightColor"] = value; }

 

        }

 

        protected override void OnRowCreated(GridViewRowEventArgs e)

        {

            base.OnRowCreated(e);

 

            if (MouseHoverRowHighlightEnabled)

            {

                // only apply changes if its DataRow

                if (e.Row.RowType == DataControlRowType.DataRow)

                {

                    // when mouse is over the row, save original color to new attribute

                    // and change it to highlight yellow color

                    e.Row.Attributes.Add("onmouseover",

                    string.Format("this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='{0}'",

                    ColorTranslator.ToHtml(RowHighlightColor)));

 

                    // when mouse leaves the row, change the bg color to its original value   

                    e.Row.Attributes.Add("onmouseout",

                    "this.style.backgroundColor=this.originalstyle;");

                }

            }

        }

 

    }

 

}

And here is how to use this custom WebControl on a WebForm:

First we must register it on the top of our aspx page:

  <%@ Register Namespace="Roboblob.WebControls" TagPrefix="roboblob" %>


And when we place our custom GridView on the form here is how its declaration looks like:

  <roboblob:HoverGridView runat="server" MouseHoverRowHighlightEnabled="True" RowHighlightColor="Green" ID="HoverGridView1" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1">

    <Columns>

      <asp:CommandField ShowSelectButton="True" />

      <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True"

          SortExpression="id" />

      <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />

    </Columns>

  </roboblob:HoverGridView>


As you can see its really only a few lines of code, and yet we have created a custom WebControl that we can place on any WebForm, switch the highlighting on/off, change the highlight color etc