How to Display selected data as Popup window in GridView

Introduction

In this article, i will show you how to show the selected data in popup window for printing and removing those records from the GridView in the parent page.Few days back I was stuck in a problem of getting the values of selected data from GridView in a pop up window for printing those records.My requirement was to print the selected records from DataGrid. And on Print Selected button I had to open a pop up window. In that page the user should be able to see the selected records in the table format. (i.e. Simple Grid without style).

For that I had made a JavaScript code to fetch the selected rows values. I stored those values in one hidden control. And then wrote the logic to bind the DataGrid for those Ids. But the problem was like this :: I was getting not getting the values of Ids in the hidden control.

To check I took a TextBox and assigned the Ids in it. At the time when the pop up was executed, I was able to see the Ids in TextBox, but when I tried to fetch them in server side code (like txtIDs.Text), I was getting blank value.

Implementation

So I need to do the postback again for that purpose and then I got the values in TextBox in server side.I am writing the Javascript code which I wrote to fetch the values in pop up window.

Javascript

function GetIDs()
{var IDs = "";var LoopCounter;for(LoopCounter=0; LoopCounter < (window.opener.document.getElementsByName('chkBox').length); LoopCounter++)
            {if(window.opener.document.getElementsByName("chkBox")[LoopCounter].checked == true)
               {
                        IDs = IDs + window.opener.document.getElementsByName("chkBox")[LoopCounter].value + ",";
               }
            }if(IDs != "")
            { 
                  IDs = IDs.substring(0, IDs.lastIndexOf(","));
                  document.getElementById("txtID").value = IDs;
            }
         __doPostBack();
   }

 In aspx page the 'chkBox' column was defined like this,

<input id="chkBox" name="chkBox" type="checkbox" value="<%# DataBinder.Eval(Container.DataItem, "ID") %>">

And on server side in Page_Load event, I wrote the following code.On first post back, I called the javascript and on second postback, I bind the DataGrid for those Ids.

C# Code

protected void Page_Load(object sender, EventArgs e)
{if (!IsPostBack)
                           ScriptManager.RegisterStartupScript(this, this.GetType(), "alertMsg", "javascript:GetIDs();", true);else{if (txtID.Text.Trim() != "")
                        {
                              BindGridData(txtID.Text.ToString().Trim()); // function to bind the Grid data.}
                  }
         }

 So finally, On second Postback I got the values in DataGrid and able to print the records.Upto this it was ok. But after that I had to remove those records from the calling page, which I had selected to print.So that I made a function which I called on onunload event of the form of Pop up window and called a javascript function of pagent page. The function is like this.

function CallParent()
{ 
         window.opener.ExecuteDeBtn();
         return false;
}

And write the following javascript function on calling (parent) page.

function ExecuteDeBtn()
{
      var objBtn = document.getElementById("btnMultiDelete"); 
      var objHid = document.getElementById("hidDeleted");

      objHid.value ="yes";
      __doPostBack(objBtn.id, null);
      return true;
}

where btnMultiDelete is the button on which client click I had opend a pop up window . So after printing the records from pop up I wanted to call its server side click event. So I wrote the code as above. As it was not executing the click event and executing only page_Load event, I had to take a hidden field for that purpose and I assined the value to hidden control.

Then on Page_Load I wrote the following code to execute the delete functionality

protected void Page_Load(object sender, EventArgs e)
{
      if (hidDeleted.Value == "yes")
      {
               MultipleDeposit();   // function to delete records from DataGrid.
               hidDeleted.Value = ""; 
      }

      if (!IsPostBack)
      { 
            // My General coding for that page.
            BindDataGrid();
      }
}

And I got the solution for it. And done the things for my task.

Conclusion

Through this article, i had explained how to show the selected data in popup window for printing and removing those records from the GridView in the parent page.