OnDoubleClick Copy One GridView Row to Another GridView Row

Recently in the forum i saw a question on copying row from one GridView to another Gridview. Here i will discuss how we can do that.

Step 1: Create two gridview like below with ID and Country column. First one is source and second one is destination grid

Source Grid:

<</span>asp:GridView ID="gvSource" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="4" OnPageIndexChanging="gvSource_PageIndexChanging" CellPadding="5" Font-Name="verdana" OnRowDataBound="gvSource_RowDataBound">
<</span>RowStyle BackColor="#FFFFFF" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />

<</span>Columns>
<</span>asp:BoundField DataField="id" ItemStyle-HorizontalAlign="Left" HeaderText="ID" ItemStyle-Width="50px" ItemStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">asp:BoundField>
<</span>asp:BoundField DataField="country" HeaderText="Country" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" ItemStyle-Width="80px">asp:BoundField>

Columns>
<</span>HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<</span>AlternatingRowStyle BackColor="#eeeeee" />

asp:GridView>

Destination Grid:

<</span>asp:GridView ID="gvDestination" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="4" OnPageIndexChanging="gvDestination_PageIndexChanging" CellPadding="5" Font-Name="verdana" OnRowDataBound="gvDestination_RowDataBound">
<</span>RowStyle BackColor="#FFFFFF" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />

<</span>Columns>
<</span>asp:BoundField DataField="id" ItemStyle-HorizontalAlign="Left" HeaderText="ID" ItemStyle-Width="50px" ItemStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">asp:BoundField>
<</span>asp:BoundField DataField="country" HeaderText="Country" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" ItemStyle-Width="80px">asp:BoundField>

Columns>
<</span>HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<</span>AlternatingRowStyle BackColor="#eeeeee" />

asp:GridView>

Step 2: Add a button which won't be visible on UI

<</span>asp:Button runat="server" ID="btnPopulate" Style="display: none" OnClick="btnPopulate_Click" />

Step 3: Now fill the source grid by calling FillSource() method in the Page Load method

private void FillSource()

{
gvSource.DataSource = GetData();

gvSource.DataBind();

}

private DataTable GetData()
{

DataTable table = new DataTable();

table.Columns.Add("id", typeof(string));

table.Columns.Add("country", typeof(string));

table.Rows.Add(1, "India");

table.Rows.Add(2, "USA");

table.Rows.Add(3, "UK");

table.Rows.Add(4, "Canada");

table.Rows.Add(5, "Spain");

return table;

}

Step 4: Add GetRowData javascript method on ondblclick in the RowDataBound event of the source gridview(gvSource) which will be invoked on click of each row



protected void gvSource_RowDataBound(object sender, GridViewRowEventArgs e)
{

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

e.Row.Attributes.Add("ondblclick", "GetRowData('" + e.Row.RowIndex + "')");

}

}



Step 5: Add GetRowData javascript method in aspx page, this method will invoke btnPopulate_Click method of the hidden button which created in step 2.

<</span>script language="javascript" type="text/javascript">

function GetRowData(index)

{

__doPostBack('', index);

}

script>





Step 6: btnPopulate_Click method will get the row index which passed from javascript and invoke method FillDestinationGrid


protected void btnPopulate_Click(object sender, EventArgs e)

{

int intIndex = Convert.ToInt16(Request.Form["__EVENTARGUMENT"].ToString());

FillDestinationGrid(intIndex);
}





Step 7: Fill destination will append the selected row from source to destination grid

private void FillDestinationGrid(int intIndex)
{

DataTable table;

if (Session["DestinationTable"] == null)
{

table = new DataTable();

table.Columns.Add("id", typeof(string));

table.Columns.Add("country", typeof(string));
}
else
{

table = (DataTable)Session["DestinationTable"];
}

GridViewRowCollection gvRow = gvSource.Rows;
table.Rows.Add(gvRow[intIndex].Cells[0].Text, gvRow[intIndex].Cells[1].Text);
gvDestination.DataSource = table;
gvDestination.DataBind();

Session["DestinationTable"] = table;

}

Step 8: Add below line in Page_Load method to have post back reference call from javascript using __doPostBack



this.ClientScript.GetPostBackEventReference(this,string.Empty);

Step 9: Now add below two method to handle paging in the source and destination gridview



protected void gvSource_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

gvSource.PageIndex = e.NewPageIndex;

FillSource();

}

protected void gvDestination_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

gvDestination.PageIndex = e.NewPageIndex;

FillDestination();

}

Step 10: Make EnableEventValidation="false" in page directive

This ends the article.

Step 3: Now fill the source grid by calling FillSource() method in the Page Load method



private void FillSource()

{

gvSource.DataSource = GetData();

gvSource.DataBind();

}



private DataTable GetData()

{

DataTable table = new DataTable();

table.Columns.Add("id", typeof(string));

table.Columns.Add("country", typeof(string));

table.Rows.Add(1, "India");

table.Rows.Add(2, "USA");

table.Rows.Add(3, "UK");

table.Rows.Add(4, "Canada");

table.Rows.Add(5, "Spain");

return table;



}



Step 4: Add GetRowData javascript method on ondblclick in the RowDataBound event of the source gridview(gvSource) which will be invoked on click of each row



protected void gvSource_RowDataBound(object sender, GridViewRowEventArgs e)

{

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

{

e.Row.Attributes.Add("ondblclick", "GetRowData('" + e.Row.RowIndex + "')");

}



}



Step 5: Add GetRowData javascript method in aspx page, this method will invoke btnPopulate_Click method of the hidden button which created in step 2.









Step 6: btnPopulate_Click method will get the row index which passed from javascript and invoke method FillDestinationGrid



protected void btnPopulate_Click(object sender, EventArgs e)

{

int intIndex = Convert.ToInt16(Request.Form["__EVENTARGUMENT"].ToString());

FillDestinationGrid(intIndex);

}





Step 7: Fill destination will append the selected row from source to destination grid



private void FillDestinationGrid(int intIndex)

{

DataTable table;

if (Session["DestinationTable"] == null)

{

table = new DataTable();

table.Columns.Add("id", typeof(string));

table.Columns.Add("country", typeof(string));

}

else

{

table = (DataTable)Session["DestinationTable"];

}

GridViewRowCollection gvRow = gvSource.Rows;

table.Rows.Add(gvRow[intIndex].Cells[0].Text, gvRow[intIndex].Cells[1].Text);

gvDestination.DataSource = table;

gvDestination.DataBind();

Session["DestinationTable"] = table;

}



Step 8: Add below line in Page_Load method to have post back reference call from javascript using __doPostBack



this.ClientScript.GetPostBackEventReference(this,string.Empty);



Step 9: Now add below two method to handle paging in the source and destination gridview



protected void gvSource_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

gvSource.PageIndex = e.NewPageIndex;

FillSource();

}



protected void gvDestination_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

gvDestination.PageIndex = e.NewPageIndex;

FillDestination();

}



Step 10: Make EnableEventValidation="false" in page directive







This ends the article.







Visit www.dotnetspeaks.com for live demo and download the code

Reference: http://technicalsol.blogspot.com/2010/05/ondoubleclick-copy-one-gridview-row-to.html