Check All Checkbox In GridView To Bulk Edit Or Update ASP.NET C# VB.NET

In this example i am going to describe how to implement CheckAll CheckBox in GridView to check all the rows in gridView.

For this i have put a checkBox in header Template of gridview which on checking will check all the rows in gridview using server side code.

Html Source of gridView :

<asp:GridView ID="GridView1" runat="server" 
              DataSourceID="SqlDataSource1" 
              AutoGenerateColumns="false" 
              CellPadding="2" ForeColor="#333333" 
              GridLines="Both" 
              DataKeyNames="ID" 
              OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="CheckAll">
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" 
              AutoPostBack="true" 
              OnCheckedChanged="chkSelectAll_CheckedChanged"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" 
              AutoPostBack="true" 
              OnCheckedChanged="chkSelect_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" 
                SortExpression="ID"/>
<asp:TemplateField HeaderText="Name" SortExpression="Name">
<ItemTemplate>
<asp:TextBox ID="txtName" runat="server" 
             Text='<%# Bind("Name") %>' ForeColor="Blue" 
             BorderStyle="none" BorderWidth="0px" 
             ReadOnly="true" >
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Location" SortExpression
="Location">
<ItemTemplate>
<asp:TextBox ID="txtLocation" runat="server" 
             Text='<%# Bind("Location") %>' 
             ForeColor="Blue" BorderStyle="none" 
             ReadOnly="true">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]" 
DeleteCommand="DELETE FROM Details WHERE (ID = @ID)" 
UpdateCommand="UPDATE [Details] SET [Name] = @Name, 
               [Location] = @Location WHERE [ID] = @ID">
<DeleteParameters>
<asp:Parameter Name="ID" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Name" />
<asp:Parameter Name="Location" />
<asp:Parameter Name="ID" />
</UpdateParameters>
</asp:SqlDataSource>
<asp:Button ID="btnUpdate" runat="server" 
            OnClick="btnUpdate_Click" Text="Update" />
<asp:Button ID="btnDelete" runat="server" 
            OnClick="btnDelete_Click" 
            Text="Delete" /> 

C# Code behind :

protected void chkSelectAll_CheckedChanged
                               (object sender, EventArgs e)
{
 CheckBox chkAll = 
    (CheckBox)GridView1.HeaderRow.FindControl("chkSelectAll");
 if (chkAll.Checked == true)
 {
   foreach (GridViewRow gvRow in GridView1.Rows)
   {
    CheckBox chkSel = 
         (CheckBox)gvRow.FindControl("chkSelect");
    chkSel.Checked = true;
    TextBox txtname = (TextBox)gvRow.FindControl("txtName");
    TextBox txtlocation = (TextBox)gvRow.FindControl("txtLocation");
    txtname.ReadOnly = false;
    txtlocation.ReadOnly = false;
    txtname.ForeColor = System.Drawing.Color.Black;
    txtlocation.ForeColor = System.Drawing.Color.Black;
   }
 }
 else
 {
  foreach (GridViewRow gvRow in GridView1.Rows)
  {
   CheckBox chkSel = (CheckBox)gvRow.FindControl("chkSelect");
   chkSel.Checked = false;
   TextBox txtname = (TextBox)gvRow.FindControl("txtName");
   TextBox txtlocation = (TextBox)gvRow.FindControl("txtLocation");
   txtname.ReadOnly = true;
   txtlocation.ReadOnly = true;
   txtname.ForeColor = System.Drawing.Color.Blue;
   txtlocation.ForeColor = System.Drawing.Color.Blue;
   }
  }
}

VB.NET code behind :

Protected Sub chkSelectAll_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim chkAll As CheckBox = DirectCast(GridView1.HeaderRow.FindControl("chkSelectAll"), CheckBox)
    If chkAll.Checked = True Then
        For Each gvRow As GridViewRow In GridView1.Rows
            Dim chkSel As CheckBox = DirectCast(gvRow.FindControl("chkSelect"), CheckBox)
            chkSel.Checked = True
            Dim txtname As TextBox = DirectCast(gvRow.FindControl("txtName"), TextBox)
            Dim txtlocation As TextBox = DirectCast(gvRow.FindControl("txtLocation"), TextBox)
            txtname.[ReadOnly] = False
            txtlocation.[ReadOnly] = False
            txtname.ForeColor = System.Drawing.Color.Black
            txtlocation.ForeColor = System.Drawing.Color.Black
        Next
    Else
        For Each gvRow As GridViewRow In GridView1.Rows
            Dim chkSel As CheckBox = DirectCast(gvRow.FindControl("chkSelect"), CheckBox)
            chkSel.Checked = False
            Dim txtname As TextBox = DirectCast(gvRow.FindControl("txtName"), TextBox)
            Dim txtlocation As TextBox = DirectCast(gvRow.FindControl("txtLocation"), TextBox)
            txtname.[ReadOnly] = True
            txtlocation.[ReadOnly] = True
            txtname.ForeColor = System.Drawing.Color.Blue
            txtlocation.ForeColor = System.Drawing.Color.Blue
        Next
    End If
End Sub

How to get string array specific index position value in asp.net

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    private string[] controls = { "ListView", "GridView", "DetailsView", "FormView", "LinqDataSource", "EntityDataSource" };
    protected void Page_Load(object sender, System.EventArgs e) {
        if(!this.IsPostBack)
        {
            Label1.Text = "String array created successfully!<br />Array elements:<br /><br />";
            foreach (string element in controls)
            {
                Label1.Text += element + "<br />";
            }
        }
    }
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        Label2.Text = "Array [2] Index Value: " + controls[2];
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to get string array specific index position value in asp.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Green">asp.net array example:<br />String Array Specific Index Positin Value</h2>
        <asp:Label
             ID="Label1"
             runat="server"
             Font-Size="Large"
             ForeColor="HotPink"
             Font-Bold="true"
             Font-Italic="true"
             >
        </asp:Label>
        <br />
        <asp:Label
             ID="Label2"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Bold="true"
             Font-Italic="true"
             >
        </asp:Label>
        <br /><br />
        <asp:Button
             ID="Button1"
             runat="server"
             OnClick="Button1_Click"
             Font-Bold="true"
             Text="Get Array [2] Value"
             ForeColor="SeaGreen"
             />  
    </div>
    </form>
</body>
</html>

How to get (search, find) array index position by array element value in asp.net(Array.IndexOf)

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    private string[] controls = { "SqlDataSource", "AccessDataSource", "ObjectDataSource", "XmlDataSource", "LinqDataSource", "EntityDataSource", "SiteMapDataSource" };
    protected void Page_Load(object sender, System.EventArgs e) {
        if(!this.IsPostBack)
        {
            Label1.Text = "String array created successfully!<br />Array elements:<br /><br />";
            foreach (string element in controls)
            {
                Label1.Text += element + "<br />";
            }
        }
    }
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        int indexOf = Array.IndexOf(controls, "LinqDataSource");
        Label2.Text ="We Find [LinqDataSource] At the index position: " + indexOf.ToString();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to get (search, find) array index position by array element value in asp.net(Array.IndexOf)</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Red">asp.net Array.IndexOf() example:<br />Search Array Index Number By Element Value</h2>
        <asp:Label
             ID="Label1"
             runat="server"
             Font-Size="Large"
             ForeColor="SeaGreen"
             Font-Bold="true"
             Font-Italic="true"
             >
        </asp:Label>
        <br />
        <asp:Label
             ID="Label2"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Bold="true"
             Font-Italic="true"
             >
        </asp:Label>
        <br /><br />
        <asp:Button
             ID="Button1"
             runat="server"
             OnClick="Button1_Click"
             Font-Bold="true"
             Text="Search Array [LinqDataSource] Index Position"
             ForeColor="SeaGreen"
             />  
    </div>
    </form>
</body>
</html>

asp.net cookie example: how to set expires date time

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Net" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, System.EventArgs e) {
        HttpCookie cookie = new HttpCookie("ColorCookie");
        cookie["Color"] = "Crimson";
        cookie["ColorValue"] = "#DC143C";
        cookie.Expires = DateTime.Now.AddYears(1);
        Response.Cookies.Add(cookie);
        Label1.Text = "Cookie created successfully and set expire after 1 year";
        HttpCookie myCookie = Request.Cookies["ColorCookie"];
        if (myCookie != null)
        {
            string color = myCookie["Color"];
            string colorValue = myCookie["ColorValue"];
            Label1.Text += "<br /><br />Cookie[ColorCookie] Found and read<br/>";
            Label1.Text += "Color: " + color;
            Label1.Text += "<br />Value: " + colorValue;
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>asp.net cookie example: how to set expires date time</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Teal">asp.net Cookie example: set cookie expires</h2>
        <asp:Label
            ID="Label1"
            runat="server"
            Font-Size="Large"
            ForeColor="Crimson"
            Font-Italic="true"
            Font-Bold="true"
            >
        </asp:Label>
    </div>
    </form>
</body>
</html>

asp.net cookie example: how to use cookie in asp.net

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Net" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void page_Load(object sender, System.EventArgs e) {
        HttpCookie favoriteColor = Request.Cookies["FavoriteColor"];
        if (favoriteColor == null)
        {
            HttpCookie userCookie = new HttpCookie("FavoriteColor");
            userCookie["Name"] = "Jones";
            userCookie["Color"] = "Crimson";
            userCookie.Expires = DateTime.Now.AddDays(1);
            Response.Cookies.Add(userCookie);
            Label1.Text = "Cookie created at: " + DateTime.Now.ToString()+ "<br /><br />";
           
        }
        else
        {
            string name = favoriteColor["Name"];
            string color = favoriteColor["Color"];
            Label1.Text += "Cookie found and read<br />";
            Label1.Text += "Hi " + name + " your favorite Color: " + color;
        }
       
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>asp.net cookie example: how to use cookie in asp.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Navy">asp.net cookie: how to use</h2>
        <asp:Label ID="Label1" runat="server" Font-Size="Large" ForeColor="SeaGreen">
        </asp:Label>
    </div>
    </form>
</body>
</html>

asp.net cookie example: how to create a cookie

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Net" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, System.EventArgs e) {
        HttpCookie userCookie = new HttpCookie("UserInfo");
        userCookie["Country"] = "Italy";
        userCookie["City"] = "Rome";
        userCookie["Name"] = "Jones";
        userCookie.Expires = DateTime.Now.AddDays(3);
        Response.Cookies.Add(userCookie);
        Label1.Text = "Cookie create successful!<br><br/>";
       
        HttpCookie cookie = Request.Cookies["UserInfo"];
       
        if (cookie != null)
        {
            string country = cookie["Country"];
            string city = cookie["City"];
            string name = cookie["Name"];
            Label2.Text = "Cookie Found and read<br/>";
            Label2.Text += "Name: " + name;
            Label2.Text += "<br />Country: " + country;
            Label2.Text += "<br />City: " + city;
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>asp.net cookie example: how to create a cookie</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Teal">asp.net Cookie example: Create a cookie</h2>
        <asp:Label ID="Label1" runat="server" Font-Size="Large" ForeColor="SeaGreen">
        </asp:Label>
        <asp:Label ID="Label2" runat="server" Font-Size="Large" ForeColor="Crimson">
        </asp:Label>
    </div>
    </form>
</body>
</html>

asp.net application state example: how to use application state in asp.net

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e) {
        int counter = 0;
        if(Application["ButtonClickCounter"] !=null)
        {
            counter = (int)Application["ButtonClickCounter"];
        }
        counter++;
        Application["ButtonClickCounter"] = counter;
        Label1.Text = "Button Clicked: " + counter.ToString() + " times";
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>asp.net application state example: how to use application state in asp.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Teal">asp.net application state example</h2>
        <asp:Label ID="Label1" runat="server" Font-Size="Large" ForeColor="Crimson">
        </asp:Label>
        <br /><br />
        <asp:Button
            ID="Button1"
            runat="server"
            Text="Show Button Click Status"
            OnClick="Button1_Click"
            Font-Bold="true"
            ForeColor="SeaGreen"
            />
    </div>
    </form>
</body>
</html>

asp.net application state example: how to lock and unlock application state in asp.net

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e) {
        Application.Lock();
       
        int clickCounter = 0;
        if(Application["ClickCounter"] !=null)
        {
            clickCounter = (int)Application["ClickCounter"];
        }
        clickCounter++;
        Application["ClickCounter"] = clickCounter;
        Application.UnLock();
        Label1.Text = "Button Clicked: " + clickCounter.ToString() + " times";
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>asp.net application state example: how to lock and unlock application state in asp.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Red">asp.net application state example: Lock and UnLock</h2>
        <asp:Label
            ID="Label1"
            runat="server"
            Font-Size="Large"
            ForeColor="DodgerBlue"
            >
        </asp:Label>
        <br /><br />
        <asp:Button
            ID="Button1"
            runat="server"
            Text="Show Button Click Status"
            OnClick="Button1_Click"
            Font-Bold="true"
            ForeColor="DodgerBlue"
            />
    </div>
    </form>
</body>
</html>

Using AllowEdit property - how to edit update row in a DataView in ado.net

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.TableName = "Books";
        DataColumn dc1 = new DataColumn();
        dc1.ColumnName = "BookID";
        dc1.DataType = typeof(int);
        dc1.AllowDBNull = false;
        dc1.Unique = true;
        DataColumn dc2 = new DataColumn();
        dc2.ColumnName = "Category";
        dc2.DataType = typeof(string);
        DataColumn dc3 = new DataColumn();
        dc3.ColumnName = "BookName";
        dc3.DataType = typeof(string);
        DataColumn dc4 = new DataColumn();
        dc4.ColumnName = "Author";
        dc4.DataType = typeof(string);
        dt.Columns.AddRange(new DataColumn[] { dc1, dc2, dc3, dc4 });
        dt.Rows.Add(new object[] { 1, ".NET", "ASP.NET 3.5 Application Architecture and Design", "Vivek Thakur" });
        dt.Rows.Add(new object[] { 2, "Games", "Cocos2d for iPhone 0.99 Beginner's Guide", "Pablo Ruiz" });
        dt.AcceptChanges();
        GridView1.DataSource = dt.DefaultView;
        GridView1.DataBind();
        //this line create a new DataView
        DataView dView = new DataView(dt);
        dView.Sort = "BookName DESC" ;
        Label1.Text = "Here we create a new DataView<br />" +
                      "and set the sort order (BookName DESC)";
        GridView2.DataSource = dView;
        GridView2.DataBind();
        dView.AllowEdit = true;
        //this line edit a row in DataView which index is 0
        dView[0]["Category"] = ".NET";
        dView[0]["BookName"] = "Microsoft Windows Workflow Foundation 4.0 Cookbook";
        dView[0]["Author"] = "Andrew Zhu ";
        Label2.Text = "Here we edit a row in DataView, Now the DataView is...";
        GridView3.DataSource = dView;
        GridView3.DataBind();
        Label3.Text = "Now the source DataTable is...";
        GridView4.DataSource = dt;
        GridView4.DataBind();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Using AllowEdit property - how to edit update row in a DataView in ado.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">
            Using AllowEdit property - how to
            <br /> edit update row in a DataView in ado.net
        </h2>
        <hr width="450" align="left" color="CornFlowerBlue" />
        <asp:GridView
            ID="GridView1"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="700"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="DarkMagenta" Height="30" />
            <RowStyle BackColor="DarkKhaki" />
            <AlternatingRowStyle BackColor="DarkOliveGreen" />
        </asp:GridView>
        <asp:Label
             ID="Label1"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView2"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="700"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="Maroon" Height="30" />
            <RowStyle BackColor="DarkKhaki" />
            <AlternatingRowStyle BackColor="DarkOliveGreen" />
        </asp:GridView>
        <asp:Label
             ID="Label2"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView3"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="700"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="Maroon" Height="30" />
            <RowStyle BackColor="DarkKhaki" />
            <AlternatingRowStyle BackColor="DarkOliveGreen" />
        </asp:GridView>
        <asp:Label
             ID="Label3"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView4"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="700"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="DarkMagenta" Height="30" />
            <RowStyle BackColor="DarkKhaki" />
            <AlternatingRowStyle BackColor="DarkOliveGreen" />
        </asp:GridView>
        <asp:Button
            ID="Button1"
            runat="server"
            OnClick="Button1_Click"
            Text="Populate GridView"
            Height="45"
            Font-Bold="true"
            ForeColor="DodgerBlue"
            />
    </div>
    </form>
</body>
</html>

How to use DataView Delete Method to delete a row at the specified index in ado.net

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.TableName = "Books";
        DataColumn dc1 = new DataColumn();
        dc1.ColumnName = "BookID";
        dc1.DataType = typeof(int);
        dc1.AllowDBNull = false;
        dc1.Unique = true;
        DataColumn dc2 = new DataColumn();
        dc2.ColumnName = "Category";
        dc2.DataType = typeof(string);
        DataColumn dc3 = new DataColumn();
        dc3.ColumnName = "BookName";
        dc3.DataType = typeof(string);
        DataColumn dc4 = new DataColumn();
        dc4.ColumnName = "Author";
        dc4.DataType = typeof(string);
        dt.Columns.AddRange(new DataColumn[] { dc1, dc2, dc3, dc4 });
        dt.Rows.Add(new object[] { 1, "jQuery", "CMS Design Using PHP and jQuery", "Kae Verens" });
        dt.Rows.Add(new object[] { 2, "iPhone", "iPhone Applications Tune-Up", "Loyal Moses" });
        dt.Rows.Add(new object[] { 3, "jQuery", "jQuery Mobile First Look: RAW", "Giulio Bai" });
        dt.AcceptChanges();
        GridView1.DataSource = dt.DefaultView;
        GridView1.DataBind();
        //this line create a new DataView
        DataView dView = new DataView(dt);
        dView.Sort = "BookName DESC" ;
        Label1.Text = "Here we create a new DataView<br />" +
                      "and set the sort order (BookName DESC)";
        GridView2.DataSource = dView;
        GridView2.DataBind();
        //this line delete a row from DataView which index is 1
        dView.Delete(1);
        Label2.Text = "Here we delete a row from DataView, Now the DataView is...";
        GridView3.DataSource = dView;
        GridView3.DataBind();
        Label3.Text = "Now the source DataTable is...";
        GridView4.DataSource = dt;
        GridView4.DataBind();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to use DataView Delete Method to delete a row at the specified index in ado.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">
            How to use DataView Delete Method
            <br /> to delete a row at the specified index in ado.net
        </h2>
        <hr width="575" align="left" color="CornFlowerBlue" />
        <asp:GridView
            ID="GridView1"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="575"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="DarkOrchid" Height="30" />
            <RowStyle BackColor="HotPink" />
            <AlternatingRowStyle BackColor="DeepPink" />
        </asp:GridView>
        <asp:Label
             ID="Label1"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView2"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="575"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="Navy" Height="30" />
            <RowStyle BackColor="HotPink" />
            <AlternatingRowStyle BackColor="DeepPink" />
        </asp:GridView>
        <asp:Label
             ID="Label2"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView3"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="575"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="Navy" Height="30" />
            <RowStyle BackColor="HotPink" />
            <AlternatingRowStyle BackColor="DeepPink" />
        </asp:GridView>
        <asp:Label
             ID="Label3"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView4"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="575"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="DarkOrchid" Height="30" />
            <RowStyle BackColor="HotPink" />
            <AlternatingRowStyle BackColor="DeepPink" />
        </asp:GridView>
        <asp:Button
            ID="Button1"
            runat="server"
            OnClick="Button1_Click"
            Text="Populate GridView"
            Height="45"
            Font-Bold="true"
            ForeColor="DodgerBlue"
            />
    </div>
    </form>
</body>
</html>

How to use DataView ToTable method to create a new DataTable in ado.net

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.TableName = "Books";
        DataColumn dc1 = new DataColumn();
        dc1.ColumnName = "BookID";
        dc1.DataType = typeof(int);
        dc1.AllowDBNull = false;
        dc1.Unique = true;
        DataColumn dc2 = new DataColumn();
        dc2.ColumnName = "Category";
        dc2.DataType = typeof(string);
        DataColumn dc3 = new DataColumn();
        dc3.ColumnName = "BookName";
        dc3.DataType = typeof(string);
        DataColumn dc4 = new DataColumn();
        dc4.ColumnName = "Author";
        dc4.DataType = typeof(string);
        dt.Columns.AddRange(new DataColumn[] { dc1, dc2, dc3, dc4 });
        dt.Rows.Add(new object[] { 1, "iPhone", "iPhone User Interface Cookbook: RAW", "Cameron Banga" });
        dt.Rows.Add(new object[] { 2, "MySQL", "MySQL 5.1 Plugin Development", "Andrew Hutchings, Sergei Golubchik" });
        dt.Rows.Add(new object[] { 3, "MySQL", "MySQL Admin Cookbook", "Daniel Schneller, Udo Schwedt" });
        dt.AcceptChanges();
        Label1.Text = "Source DataTable";
        GridView1.DataSource = dt.DefaultView;
        GridView1.DataBind();
        //this line create a new DataView
        DataView dView = new DataView(dt);
        dView.RowFilter = "Category = 'MySQL'";
        Label2.Text = "Here we create a new DataView<br />" +
                      "and set the RowFilter (Category = 'MySQL')";
        GridView2.DataSource = dView;
        GridView2.DataBind();
        //this line create a new DataTable from DataView
        DataTable dt2 = dView.ToTable();
        Label3.Text = "Here we create a new DataTable from DataView";
        GridView3.DataSource = dt2;
        GridView3.DataBind();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to use DataView ToTable method to create a new DataTable in ado.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">
            How to use DataView ToTable method
            <br /> to create a new DataTable in ado.net
        </h2>
        <hr width="450" align="left" color="CornFlowerBlue" />
        <asp:Label
             ID="Label1"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView1"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="600"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="DarkSlateBlue" Height="30" />
            <RowStyle BackColor="MediumVioletRed" />
            <AlternatingRowStyle BackColor="PaleVioletRed" />
        </asp:GridView>
        <br />
        <asp:Label
             ID="Label2"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView2"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="600"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="DarkSlateBlue" Height="30" />
            <RowStyle BackColor="MediumVioletRed" />
            <AlternatingRowStyle BackColor="PaleVioletRed" />
        </asp:GridView>
        <br />
        <asp:Label
             ID="Label3"
             runat="server"
             Font-Size="Large"
             ForeColor="DodgerBlue"
             Font-Italic="true"
             >
        </asp:Label>
        <asp:GridView
            ID="GridView3"
            runat="server"
            BorderColor="Snow"
            ForeColor="Snow"
            Width="600"
            Font-Names="Courier"
            >
            <HeaderStyle BackColor="DarkSlateBlue" Height="30" />
            <RowStyle BackColor="MediumVioletRed" />
            <AlternatingRowStyle BackColor="PaleVioletRed" />
        </asp:GridView>
        <asp:Button
            ID="Button1"
            runat="server"
            OnClick="Button1_Click"
            Text="Populate GridView"
            Height="45"
            Font-Bold="true"
            ForeColor="DodgerBlue"
            />
    </div>
    </form>
</body>
</html>

Resize and crop of image to centre.

Hi I'm working on a portfolio site with a grid of 4x4
these are set to expand with the browser window
within these divs are an image, a caption (on hover) and then its clickable through to a lightbox with the projects details
an example of one of these are as follows
HTML Code:

<div class="project" id="client_name">
<a id="portfolio-project-2" href="client_name.html">
<img src="images/portfolio/client_name.jpg" alt="client_name" />
<span class="desc">
<strong>client_name</strong>
</span>
</a>
</div>

and the appropriate CSS for each project is as follows
Code:

.project {
width:24%;
height:23%;
margin:10px;
overflow:hidden;
position:absolute;
vertical-align:middle;
text-align:center;
}
.project img {
width:auto;
height:100%;
vertical-align:middle;
text-align:center;
}
.project a {
opacity:0.8;
filter:alpha(opacity=80);
text-decoration:none;
}
.project a:hover {
opacity:1;
filter:alpha(opacity=100);
}
.project a .desc { display: none; }
.project a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #000;
filter:alpha(opacity=80);
opacity:.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/
color: #efefea;
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
margin: 0;
width: 100%;
text-align:left;
}
.project a:hover .desc strong {
display: block;
font-size:0.85em;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.1em;
}

this resizes in the browser beautifully except for one small detail.
even though the image is centred and this is noticeable when the browser is resized to odd shapes, when the image starts to be cropped I cannot get it to crop to the centre, the image is always losing the right edge...
does anyone have any ideas on how to have it so when the image is smaller than the aspect ratio that it will crop the left and the right, thus leaving the image centre aligned still?

Placing 2 DIVs side by side..

Hi!
Something like this should solve your problem.


Code:

div { width: 300px; border: 1px solid red; float: left}

and, in the html:

Code:

<div>Woho, first div!</div>
<div>And a second one!</div>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


Hi,
To get one column to go to the left and one to the right you could do this:

CSS Code:

#leftcolumn { width: 300px; border: 1px solid red; float: left}
#rightcolumn { width: 300px; border: 1px solid red; float: right}

 and the html will be:
Code:

<div id="leftcolumn"><p>text goes here</p></div>
<div id="rightcolumn"><p>text goes here</p></div>

Also if you use float it affectivly removes that element from any surrounding div. To get around this problem try and add a div class which has 'clear' set to 'both' to your html. This make all the divs sit nicely in there container Like this:

CSS Code:

.clear { clear: both;}

html Code:

<div id"container">
<div id="leftcolumn"><p>text goes here</p></div>
<div id="rightcolumn"><p>text goes here</p></div>
<div class"clear"></div>
</div>

Ajax ComboBox - How to set change ComboBox DataTextField and DataValueField programmatically in asp.net

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        ComboBox1.DataTextField = "Name";
        ComboBox1.DataValueField = "Value";
    }
    void ComboBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label1.Text = ComboBox1.SelectedItem.Text + "<br />" + ComboBox1.SelectedItem.Value;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ajax ComboBox - How to set change ComboBox DataTextField and DataValueField programmatically in asp.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">
            ASP.NET Ajax ComboBox - How to set change ComboBox
            <br /> DataTextField and DataValueField programmatically in asp.net
        </h2>
        <hr width="600" align="left" color="LightBlue" />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Label
            ID="Label1"
            runat="server"
            Font-Size="Large"
            ForeColor="DarkGreen"
            Font-Italic="true"
            >
        </asp:Label>
        <br /><br />
        <asp:ComboBox
            ID="ComboBox1"
            runat="server"
            DropDownStyle="DropDown"
            AutoCompleteMode="None"
            DataSourceID="XmlDataSource1"
            CaseSensitive="false"
            RenderMode="Block"
            AppendDataBoundItems="false"
            AutoPostBack="true"
            Font-Names="Comic Sans MS"
            Font-Size="Medium"
            ForeColor="SaddleBrown"
            OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged"
            >
        </asp:ComboBox>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server">
            <Data>
                <Colors>
                    <Color Value="#FFFAF0" Name="FloralWhite" />
                    <Color Value="#FFE4B5" Name="Moccasin" />
                    <Color Value="#228B22" Name="ForestGreen" />
                    <Color Value="#FFFFE0" Name="LightYellow" />
                    <Color Value="#FFFACD" Name="LemonChiffon" />
                </Colors>
            </Data>
        </asp:XmlDataSource>
        <br /><br /><br />
        <br /><br /><br />
        <asp:Button
            ID="Button1"
            runat="server"
            OnClick="Button1_Click"
            Text="Set ComboBox DataTextField & DataValueField"
            Height="45"
            Font-Bold="true"
            ForeColor="DodgerBlue"
            />
    </div>
    </form>
</body>
</html>

Ajax ComboBox - How to use css to design ComboBox list item elements in asp.net

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
   
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ajax ComboBox - How to use css to design ComboBox list item elements in asp.net</title>
    <style type="text/css">
        .GreenTypeComboBoxStyle .ajax__combobox_itemlist li {
            background-color: DarkGreen;
            border: 1px solid YellowGreen;
            color: White;
            font-size:medium;
            font-family:Courier New;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">
            ASP.NET Ajax ComboBox - How to use css to design
            <br /> ComboBox list item elements in asp.net
        </h2>
        <hr width="525" align="left" color="LightBlue" />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <br /><br />
        <asp:ComboBox
            ID="ComboBox1"
            runat="server"
            DropDownStyle="DropDown"
            AutoCompleteMode="None"
            AutoPostBack="false"
            RenderMode="Block"
            CssClass="GreenTypeComboBoxStyle"
            >
              <asp:ListItem Text="GoldenRod"></asp:ListItem>
              <asp:ListItem Text="FloralWhite"></asp:ListItem>
              <asp:ListItem Text="DeepPink"></asp:ListItem>
              <asp:ListItem Text="DarkSlateBlue"></asp:ListItem>
              <asp:ListItem Text="DarkGoldenRod"></asp:ListItem>
              <asp:ListItem Text="Chocolate"></asp:ListItem>
              <asp:ListItem Text="BlanchedAlmond"></asp:ListItem>
        </asp:ComboBox>
    </div>
    </form>
</body>
</html>

Ajax Rating - How to use OnChanged event in asp.net Rating

 <%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Rating1_Changed(object sender, EventArgs e)
    {
        int ratingValue = Rating1.CurrentRating;
        if (ratingValue <= 3)
        {
            Label1.ForeColor = System.Drawing.Color.Red;
        }
        else
        {
            Label1.ForeColor = System.Drawing.Color.Green;
        }
        Label1.Text = "You Rated: " + ratingValue;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ajax Rating - How to use OnChanged event in asp.net Rating</title>
    <style type="text/css">
        .StarCss {
            background-image: url(/Image/star.png);
            height:24px;
            width:24px;
        }
        .FilledStarCss {
            background-image: url(/Image/filledstar.png);
            height:24px;
            width:24px;
        }
        .EmptyStarCss {
            background-image: url(/Image/star.png);
            height:24px;
            width:24px;
        }
        .WaitingStarCss {
            background-image: url(/Image/waitingstar.png);
            height:24px;
            width:24px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">
            ASP.NET Ajax Rating - How to use OnChanged
            <br /> event in asp.net Rating
        </h2>
        <hr width="500" align="left" color="LightBlue" />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <table border="0" cellpadding="4" cellspacing="4">
            <tr>
                <td>
                    <asp:Image
                        ID="Image1"
                        runat="server"
                        ImageUrl="~/Image/RedBird.jpg"
                        Height="250"
                        />
                </td>
                <td>
                    <asp:Label
                        ID="Label1"
                        runat="server"
                        Font-Size="X-Large"
                        Font-Italic="true"
                        Font-Names="Comic Sans MS"
                        >
                    </asp:Label>
                    <br /><br />
                    <asp:Label
                        ID="Label2"
                        runat="server"
                        ForeColor="SandyBrown"
                        Font-Size="Large"
                        Text="Rate this image"
                        >
                    </asp:Label>
                    <br />
                    <asp:Rating
                        ID="Rating1"
                        runat="server"
                        StarCssClass="StarCss"
                        FilledStarCssClass="FilledStarCss"
                        EmptyStarCssClass="EmptyStarCss"
                        WaitingStarCssClass="WaitingStarCss"
                        AutoPostBack="true"
                        OnChanged="Rating1_Changed"
                        >
                    </asp:Rating>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>