Archive

Archive for April, 2010

AJAX PopupControl Extender to Display Row Details with Gridview

April 23, 2010 13 comments

Hi all ,

try this example to use AJAX PopupControl Extender to Display Row Details with Gridview

Step1 :- create a new website and add new web page

Step2 :- in Web page drag ScriptManager , Gridview , AJAX Popup Extender and Panel control from toolbox

so your page will be like this


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
       
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
           BorderColor="#336699" BorderStyle="Solid" BorderWidth="1px"
           CellPadding="3" Font-Names="Verdana" Font-Size="10pt"
           onrowcreated="GridView1_RowCreated">
           <Columns>
              <asp:BoundField DataField="ProductID" HeaderText="Product ID" />
              <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
              <asp:TemplateField ItemStyle-Width="40" ItemStyle-HorizontalAlign="Right">
                 <ItemTemplate>
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/page_topic_magnify.png" />
                    <cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"
                       PopupControlID="Panel1"
                       TargetControlID="Image1"
                       DynamicContextKey='<%# Eval("ProductID") %>'
                       DynamicControlID="Panel1"
                       DynamicServiceMethod="GetDynamicContent" Position="Bottom">
                    </cc1:PopupControlExtender>
                    <asp:Panel ID="Panel1" runat="server"> </asp:Panel>
                 </ItemTemplate>
              </asp:TemplateField>
           </Columns>
           <HeaderStyle BackColor="#336699" ForeColor="White" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Step3 :- in code behind add the following code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using AjaxControlToolkit;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    private void LoadData()
    {
        string constr = "Data Source=.;Initial Catalog=Northwind;Integrated Security=True";
        string query = "SELECT ProductID, ProductName FROM Products";
        SqlDataAdapter da = new SqlDataAdapter(query, constr);
        DataTable table = new DataTable();
        da.Fill(table);
        GridView1.DataSource = table;
        GridView1.DataBind();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            LoadData();
        }
    }

    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            PopupControlExtender pce = e.Row.FindControl("PopupControlExtender1") as PopupControlExtender;
            string behaviorID = "pce_" + e.Row.RowIndex;
            pce.BehaviorID = behaviorID;
            Image img = (Image)e.Row.FindControl("Image1");
            string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
            string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);
            img.Attributes.Add("onmouseover", OnMouseOverScript);
            img.Attributes.Add("onmouseout", OnMouseOutScript);

            //e.Row.Attributes.Add("onmouseover", OnMouseOverScript);
            //e.Row.Attributes.Add("onmouseout", OnMouseOutScript);
        }
    }

    [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string GetDynamicContent(string contextKey)
    {
        string constr = "Data Source=.;Initial Catalog=Northwind;Integrated Security=True";
        string query = "SELECT UnitPrice, UnitsInStock,UnitsOnOrder FROM Products WHERE ProductID = " + contextKey;
        SqlDataAdapter da = new SqlDataAdapter(query, constr);
        DataTable table = new DataTable();
        da.Fill(table);
        StringBuilder b = new StringBuilder();
        b.Append("<table style='background-color:#f3f3f3; border: #336699 3px solid; ");
        b.Append("width:350px; font-size:10pt; font-family:Verdana;' cellspacing='0' cellpadding='3'>");
        b.Append("<tr><td colspan='3' style='background-color:#336699; color:white;'>");
        b.Append("<b>Product Details</b>"); b.Append("</td></tr>");
        b.Append("<tr><td style='width:80px;'><b>Unit Price</b></td>");
        b.Append("<td style='width:80px;'><b>Stock</b></td>");
        b.Append("<td><b>Units On Order</b></td></tr>");
        b.Append("<tr>");
        b.Append("<td>$" + table.Rows[0]["UnitPrice"].ToString() + "</td>");
        b.Append("<td>" + table.Rows[0]["UnitsInStock"].ToString() + "</td>");
        b.Append("<td>" + table.Rows[0]["UnitsOnOrder"].ToString() + "</td>");
        b.Append("</tr>");
        b.Append("</table>");
        return b.ToString();
    }
}

Hope this helps

Good Luck

Advertisements
Categories: AJAX, ASP.Net

AJAX Collapsible Panel Extenderwith Repeater for Details

April 15, 2010 6 comments

Hi

try this example to use CollapsiblePanelExtender with Repeater to display Data from SQL Database

Step1 :- Create a new Website and add new Web page

Step2:- In Web Page

<asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:Panel ID="DropPanel" runat="server" BackColor="#CCFF99" Font-Size="Medium">
                            First Name:-
                            <asp:Label ID="lbl1" runat="server" Text='<%# Bind("FirstName") %>' />
                        </asp:Panel>
                    </td>
                    <td>
                        <asp:Panel ID="Panel1" runat="server" BackColor="#99FFCC" Font-Size="Medium">
                            <div>
                                <asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
                                    <asp:Image ID="Image1" runat="server" ImageAlign="Right" ImageUrl="~/Images/expand_blue.jpg" />
                                    <asp:Label ID="Label1" runat="server" Text="Label">(Show details)</asp:Label>
                                </asp:Panel>
                                <asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">
                                   Address:- <%# DataBinder.Eval(Container.DataItem, "Address")%>
                                </asp:Panel>
                                <ajaxtoolkit:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="ContentPanel"
                                    ExpandControlID="TitlePanel" CollapseControlID="TitlePanel" ExpandedText="(hide details)"
                                    CollapsedText="(show details)" CollapsedImage="~/Images/expand_blue.jpg" ExpandedImage="~/Images/collapse_blue.jpg"
                                    ImageControlID="Image1" EnableViewState="true" TextLabelID="Label1"  Collapsed="true">
                                </ajaxtoolkit:CollapsiblePanelExtender>
                            </div>
                        </asp:Panel>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>"
            SelectCommand="SELECT FirstName, Address FROM Employees"></asp:SqlDataSource>

Step3 :- In Web Page add this Javascript code


<script type="text/javascript">

    function pageLoad() {
        var currentBehavior = null;  
        var allBehaviors = Sys.Application.getComponents() ;   
        for( var loopIndex = 0 ; loopIndex < allBehaviors.length; loopIndex++ ) {
            currentBehavior = allBehaviors[loopIndex];
            if( currentBehavior.get_name() == "CollapsiblePanelBehavior" ) {               
		currentBehavior._animation._fps=0;   
            currentBehavior._animation._duration=0;
            }
        }
    }

    </script>

Step4 :- In Web.Config add the connectionstring

<connectionStrings>
  <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net

Validate ListBox (Part II)

April 15, 2010 Leave a comment

Hi

In a previous post i made an example to show how to validate ListBox using Server and Client Side with CustomValidator control , you can check this post from here Validate ListBox

Now i have another way to Validate ListBox using Client Side to allow user to at least one item in ASP.Net ListBox Control


<asp:ListBox ID="ListBox1" runat="server" SelectionMode = "Multiple">
    <asp:ListItem Text = "Egypt" Value = "1"></asp:ListItem>
    <asp:ListItem Text = "USA" Value = "2"></asp:ListItem>
    <asp:ListItem Text = "India" Value = "3"></asp:ListItem>
</asp:ListBox>
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Required"
ClientValidationFunction = "ValidateListBox"></asp:CustomValidator>

<asp:Button ID="Button1" runat="server" Text="Button" />

And the Javascript Code is :

<script type = "text/javascript">
function ValidateListBox(sender, args) {
    var options = document.getElementById("<%=ListBox1.ClientID%>").options;
    for (var i = 0; i < options.length; i++) {
        if (options[i].selected == true) {
            args.IsValid = true;
            return;
        }
    }
    args.IsValid = false;
}
</script>

Hope this helps

Good Luck.

Categories: ASP.Net, Javascript

Show Loading image with Autocomplete Extender Textbox

April 1, 2010 5 comments

Hi

try this Example to Show Loading image with Autocomplete Extender Textbox

Step1 :- Open VS2008 and create a new website

Step2 :- add new Linq to SQL DataContext  and name it “Northwind.dbml” and add Products table in it

Step3 :- Add new Web page and from ToolBox drag ScriptManager , TextBox and AJAX Autocomplete Extender control


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function ShowImage() {
            document.getElementById('txtAutoComplete').style.backgroundImage = 'url(loading.gif)';
            document.getElementById('txtAutoComplete').style.backgroundRepeat = 'no-repeat';
            document.getElementById('txtAutoComplete').style.backgroundPosition = 'right';
        }
        function HideImage() {
            document.getElementById('txtAutoComplete').style.backgroundImage = 'none';
        }
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

       <asp:ScriptManager ID="ScriptManager1" runat="server" >
        <Services>
              <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
       </asp:ScriptManager>
        <div>
            Enter Product Name:-
         <asp:TextBox ID="txtAutoComplete" runat="server"></asp:TextBox>
            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                MinimumPrefixLength="1"
                ServiceMethod="GetNames"
                TargetControlID="txtAutoComplete"                
                CompletionInterval="10"               
                EnableCaching="true"               
                CompletionSetCount="12"
                onclientpopulating="ShowImage"               
                onclientpopulated="HideImage">
            </cc1:AutoCompleteExtender>

        </div>
    </form>
</body>
</html>

Step4 :- In code behind add the following code:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default4 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
      
    }

    [System.Web.Services.WebMethod]
    public static string[] GetNames(string prefixText, int count)
    {
        System.Threading.Thread.Sleep(1000);
        NorthwindDataContext db = new NorthwindDataContext();
        return db.Products.Where(n => n.ProductName.StartsWith(prefixText)).OrderBy(n => n.ProductName).Select(n => n.ProductName).Take(count).ToArray();
    }
}

Hope this helps

Good Luck.

Categories: AJAX, ASP.Net, Linq