editable gridview

**vee10** · Mar 28 '08, 09:51 AM

Hi ,

this is the sample example u can save and fill data using database

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default8.aspx.cs" Inherits="Default8" %>

<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  OnRowCancelingEdit="GridView1_RowCancelingEdit"  OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating"> 
<Columns> 
<asp:TemplateField HeaderText="Edit" ShowHeader="False"> 
<EditItemTemplate> 
  <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> 
</EditItemTemplate> 

<ItemTemplate> 
  <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"></asp:LinkButton> 
</ItemTemplate> 
</asp:TemplateField> 
<asp:TemplateField HeaderText="WTTPath" SortExpression="Name"> <EditItemTemplate> 
  <asp:TextBox ID="txtWTTPath" runat="server" Text='<%# Eval("WTTPath") %>'></asp:TextBox> 
</EditItemTemplate> 
<ItemTemplate> 
  <asp:Label ID="Label2" runat="server" Text='<%# Bind("WTTPath") %>'></asp:Label> 
</ItemTemplate> 
</asp:TemplateField> 

<asp:TemplateField HeaderText="PSPath"> 
<EditItemTemplate> 
  <asp:TextBox ID="txtPSPath" runat="server" Text='<%# Bind("PSPath") %>'></asp:TextBox> 
</EditItemTemplate> 

<ItemTemplate> 
  <asp:Label ID="Label3" runat="server" Text='<%# Bind("PSPath") %>'></asp:Label> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 
    </div>    
    </form>
</body>
</html>

page load event

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;

public partial class Default8 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable("ComponentTable");
        DataRow dr = dt.NewRow();
        DataColumn dc = new DataColumn("WTTPath");
        dc.DataType = Type.GetType("System.String");
        dt.Columns.Add(dc);
        dc = new DataColumn("PSPath");
        dc.DataType = Type.GetType("System.String");
        dt.Columns.Add(dc);
        dr["WTTPath"] = "WTTPath";
        dr["PSpath"] = "PSpath";
        dt.Rows.Add(dr);
        GridView1.DataSource = dt;
        GridView1.DataBind(); 
    }

    protected void FillData()
    {
        DataTable dt = new DataTable("ComponentTable");
        DataRow dr = dt.NewRow();
        DataColumn dc = new DataColumn("WTTPath");
        dc.DataType = Type.GetType("System.String");
        dt.Columns.Add(dc);
        dc = new DataColumn("PSPath");
        dc.DataType = Type.GetType("System.String");
        dt.Columns.Add(dc);
        dr["WTTPath"] = "WTTPath"; //u should fill data using database not directly assigning like this
        dr["PSpath"] = "PSpath";
        dt.Rows.Add(dr);
        GridView1.DataSource = dt;
        GridView1.DataBind(); 
    }
    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        FillData();
    }
    protected void GridView1_RowCommand(object sender, EventArgs e)
    {
    }
    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        TextBox txtName = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtWTTPath");        
        TextBox txtCity = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtPSPath");
        //write logic what ever u want  ie save this in database

        FillData();
        GridView1.EditIndex = -1;

    } 
    protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        GridView1.EditIndex = -1;
    
    }
    
}

any doubts u can query

**dipalichavan82** · Mar 28 '08, 10:02 AM

plz tell me steps to add edit-column in gridview in design view....i m not much thorough with xml...........i mean setting some property of gridvew(edit command or something) and then writing on rowediting event.......... ..i can write code for update .........proble m is i m not able to add that edit column in gridview....... ..plz tell steps ....setting properties or using smart tag of gridview

plz do reply.having interview 2moro

**vee10** · Mar 28 '08, 10:26 AM

hi ,

Step 1: Adding edit - column in Gridview
in Grid view click "Add New Colums" then a popup will be opened and
select "CommandFie ld" then click checkboxes Edit/Update and click "ok"

Step 2:
in Grid view click "Edit column" and then a popup will open and then click "Convert this into Template field" and click ok

Step3:
in grid view click "Edit Templates" a popup will open select "Edit Item Template"
and place textboxes in to that and click Edit bindings and then for Text
give Code Expression as "Bind("name of the column") and click "OK"

write the rowupdating ,rowcanceling,r owediting functions

Any doubt ask me

Originally posted by dipalichavan82

plz tell me steps to add edit-column in gridview in design view....i m not much thorough with xml...........i mean setting some property of gridvew(edit command or something) and then writing on rowediting event.......... ..i can write code for update .........proble m is i m not able to add that edit column in gridview....... ..plz tell steps ....setting properties or using smart tag of gridview

plz do reply.having interview 2moro

**dipalichavan82** · May 7 '08, 05:18 AM

Originally posted by vee10

hi ,

Step 1: Adding edit - column in Gridview
in Grid view click "Add New Colums" then a popup will be opened and
select "CommandFie ld" then click checkboxes Edit/Update and click "ok"

Step 2:
in Grid view click "Edit column" and then a popup will open and then click "Convert this into Template field" and click ok

Step3:
in grid view click "Edit Templates" a popup will open select "Edit Item Template"
and place textboxes in to that and click Edit bindings and then for Text
give Code Expression as "Bind("name of the column") and click "OK"

write the rowupdating ,rowcanceling,r owediting functions

Any doubt ask me

thnx for ur reply..
actually prob is i m confused withedtitemtemp late n itemtemplate in html source file.
can u tell what is purpose of both of these. can u explain sequence of steps occurs when i click a row to edit. wh happens inside.plz help

**vee10** · May 8 '08, 09:40 AM

Item Template is nothing but adding any linkbutton or textbox etc ie ading any single item control

EditItem Template is adding some controls when we click the Edit button in the datagrid only these controls will be available after clicking edit in datagrid
but in itemTemplate when the datagrid is loaded this will be available ie we can see the controls under <ITEMTEMPLATE > once datagrid is loaded
but for <EDITITEMTEMPLA TE> u can see only when u click the edit button
just once try the above example or check this

MorpheusWeb

http://www.morpheusweb.it/html/scripts/csharp/webcontrols/csharp_datagridtemplatecolumn.asp

Tutto dal mondo tech

then u can understand the difference b/w that

check the example and check these steps

steps when u click the edit:

1.After clicking edit the Update and Cancel link wil be available in the datagrid in that edit cell and all other cells will be converted to the Textboxes or dropdown box or checkbox according to the values or ur requirement (these will be written in the <edititemtempla te>)

2.then u can update ur cells and once u click Update then OnRowUpdating event is fired so u should write ur logic for that event ie placing it in database etc

3.U update the cells but u clicked cancel then OnRowCancelling is fired so the correspoing logic for that event

Originally posted by dipalichavan82

thnx for ur reply..
actually prob is i m confused withedtitemtemp late n itemtemplate in html source file.
can u tell what is purpose of both of these. can u explain sequence of steps occurs when i click a row to edit. wh happens inside.plz help

**dipalichavan82** · May 9 '08, 12:10 PM

Originally posted by vee10

Item Template is nothing but adding any linkbutton or textbox etc ie ading any single item control

EditItem Template is adding some controls when we click the Edit button in the datagrid only these controls will be available after clicking edit in datagrid
but in itemTemplate when the datagrid is loaded this will be available ie we can see the controls under <ITEMTEMPLATE > once datagrid is loaded
but for <EDITITEMTEMPLA TE> u can see only when u click the edit button
just once try the above example or check this

MorpheusWeb

http://www.morpheusweb.it/html/scripts/csharp/webcontrols/csharp_datagridtemplatecolumn.asp

Tutto dal mondo tech

then u can understand the difference b/w that

check the example and check these steps

steps when u click the edit:

1.After clicking edit the Update and Cancel link wil be available in the datagrid in that edit cell and all other cells will be converted to the Textboxes or dropdown box or checkbox according to the values or ur requirement (these will be written in the <edititemtempla te>)

2.then u can update ur cells and once u click Update then OnRowUpdating event is fired so u should write ur logic for that event ie placing it in database etc

3.U update the cells but u clicked cancel then OnRowCancelling is fired so the correspoing logic for that event

thank u so much for this detail explanation.Cur rently i m doing other project.i will check this soon.thnx once again

editable gridview

editable gridview

Comment

Comment

Comment

Comment

Comment

Comment