<br />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
