Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version
Go to top

Inplace Edit in GridView

, 24 Sep 2009
A slightly different way to look at GridView Edit
inlinegridviewedit.zip
InlineGridViewEdit
Blank.gif
edit.gif
gr.png
grG.png
InlineGridViewEdit.csproj.user
InlineGridViewEdit.suo
Properties
bin
InlineGridViewEdit_Take1.dll
InlineGridViewEdit_Take1.pdb
AjaxControlToolkit.dll
InlineGridViewEdit.dll
InlineGridViewEdit.pdb
App_Themes
Default
Default.skin
edit_Off.gif
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="InlineGridViewEdit._Default"
    Theme="Default" enableEventValidation="false" %>

<!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">
<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajx" %>
<head runat="server">
    <title>Inline Forms in Grid View by Jay@Thakar.info</title>

    <script language="javascript" type="text/javascript">
  function textOnFocus(textBox)
  {
    textBox.className='loginHighlight';
  }
  function textOnBlur(textBox)
  {
    textBox.className='loginNormal';
  }  
    </script>

    <style type="text/css">
        .loginHighlight
        {
            border: 2px solid grey;
            background: #FFFFFF url(    "./gr.png" ) repeat-x 0 1px;
            color: #666666;
            width: 80%;
        }
        .loginNormal
        {
            border: 1px solid #cdcdcd;
            background: #FFFFFF url(      "./gr.png" ) repeat-x 0 1px;
            color: #666666;
            width: 80%;
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
        .frmLbl
        {
            font-family: serif;
        }
        .btnNormal
        {
            border: 1px solid #cdcdcd;
            background: #FFFFFF url(      "./grG.png" ) repeat-x 0 1px;
            color: black;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <center><div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
            ForeColor="#333333" GridLines="Both" Width="60%" OnRowEditing="GridView1_RowEditing"
            AllowPaging="true" PageSize="3" OnPageIndexChanging="GridView1_PageIndexChanging"
            OnRowDataBound="GridView1_RowDataBound" DataKeyNames="UserID">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td style="width:15%;" align="left">
                                    First Name
                                </td>
                                <td style="width:15%;" align="left">
                                    Last Name
                                </td >
                                <td style="width:35%;" align="left">
                                    Web
                                </td>
                                <td style="width:35%;" align="left">
                                    Email
                                </td>
                            </tr>
                        </table>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <table width="100%" cellpadding="0" cellspacing="0" >
                            <tr>
                                <td style="width:15%;" align="left">
                                    <%#DataBinder.Eval(Container.DataItem, "FirstName")%>
                                </td>
                                <td style="width:15%;" align="left">
                                    <%#DataBinder.Eval(Container.DataItem, "LastName")%>
                                </td>
                                <td style="width:35%;" align="left">
                                    <%#DataBinder.Eval(Container.DataItem, "Web")%>
                                </td>
                                <td style="width:35%;" align="left">
                                    <%#DataBinder.Eval(Container.DataItem, "Email")%>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <center>
                            <ajx:RoundedCornersExtender ID="rce" runat="server" TargetControlID="pnlHead" Radius="6"
                                Corners="Top" BorderColor="black" />
                            <asp:Panel ID="pnlHead" runat="server" Font-Bold="true" ForeColor="white" BackColor="#507CD1"
                                Width="50%">
                                <center>
                                    <table>
                                        <tr>
                                            <td>
                                                Updating
                                                <%#DataBinder.Eval(Container.DataItem, "FirstName")%>,
                                                <%#DataBinder.Eval(Container.DataItem, "LastName")%>
                                            </td>
                                        </tr>
                                    </table>
                                </center>
                            </asp:Panel>
                            <ajx:RoundedCornersExtender ID="rceDetail" runat="server" TargetControlID="pnlDetail"
                                Radius="6" Corners="Bottom" BorderColor="black" />
                            <asp:Panel ID="pnlDetail" runat="server" Width="50%">
                                <table width="100%">
                                    <tr>
                                        <td align="right" style="width: 30%">
                                            First Name:
                                        </td>
                                        <td style="padding-right:10px;">
                                            <asp:TextBox ID="tbFirstName" Width="100%" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "FirstName")%>'></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="right">
                                            Last Name:
                                        </td>
                                        <td style="padding-right:10px;">
                                            <asp:TextBox ID="tbLastName" runat="server" Width="100%" Text='<%#DataBinder.Eval(Container.DataItem, "LastName")%>'></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="right">
                                            Web:
                                        </td>
                                        <td style="padding-right:10px;">
                                            <asp:TextBox ID="tbWeb" runat="server" Width="100%" Text='<%#DataBinder.Eval(Container.DataItem, "Web")%>'></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="right">
                                            eMail:
                                        </td>
                                        <td style="padding-right:10px;">
                                            <asp:TextBox ID="tbEmail" runat="server" Width="100%" Text='<%#DataBinder.Eval(Container.DataItem, "eMail")%>'></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                                <div style="padding-top: 3px; border-top: thin solid black;" id="divUpdate">
                                    <asp:Button CssClass="btnNormal" runat="server" ID="bUpdate" Text="Update" OnClick="bUpdate_Click" />&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button
                                        OnClick="bCancel_Click" CssClass="btnNormal" runat="server" ID="bCancel" Text="Cancel" />
                                </div>
                            </asp:Panel>
                        </center>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ShowEditButton="true" ButtonType="Image" EditImageUrl="./edit.gif"
                    HeaderText="Edit" ShowCancelButton="false" UpdateImageUrl="./Blank.gif" ItemStyle-Width="20" />
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
    </div></center>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jay Thakar
Software Developer Dimensional Strategies Inc
Canada Canada
He is a results oriented professional building on 10 years of progressive accomplishments in Software Development and Information Technology. He loves to make and help making user friendly web applications which provides enhanced user experience.


To contact Jay, email him at jay@thakar.info


Visit his blog a Day as {Developer} where you will find many of his articles.


View his LinkedIn Profile


View his Website Jay.Thakar.Info

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 24 Sep 2009
Article Copyright 2009 by Jay Thakar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid