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:

<asp:GridView ID="gvSource" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="4" OnPageIndexChanging="gvSource_PageIndexChanging" CellPadding="5" Font-Name="verdana" OnRowDataBound="gvSource_RowDataBound">
<RowStyle BackColor="#FFFFFF" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:BoundField DataField="id" ItemStyle-HorizontalAlign="Left" HeaderText="ID" ItemStyle-Width="50px" ItemStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">asp:BoundField>
<asp:BoundField DataField="country" HeaderText="Country" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" ItemStyle-Width="80px">asp:BoundField>
Columns>
<HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
asp:GridView>

Destination Grid:

<asp:GridView ID="gvDestination" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="4" OnPageIndexChanging="gvDestination_PageIndexChanging" CellPadding="5" Font-Name="verdana" OnRowDataBound="gvDestination_RowDataBound">
<RowStyle BackColor="#FFFFFF" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:BoundField DataField="id" ItemStyle-HorizontalAlign="Left" HeaderText="ID" ItemStyle-Width="50px" ItemStyle-Font-Bold="true" ItemStyle-VerticalAlign="Top">asp:BoundField>
<asp:BoundField DataField="country" HeaderText="Country" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" ItemStyle-Width="80px">asp:BoundField>
Columns>
<HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
asp:GridView>

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

<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.

<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