Display data in new window from GridView certain row

Question

Currently I have a GridView that has a column with a date. This column has a link in each cell that opens up a window and displays an aspx page. What I want it to do is to have the link open a window and display the date for that certain row and other information in a new GridView.

Here is my code:

ascx

<asp:GridView ID="GridView1" runat="server" CssClass="summary1" DataSourceID="SqlDataSource2" 
                AllowPaging="True" AutoGenerateColumns="False" AllowSorting="True" EmptyDataText="No Records Found..." >
        <AlternatingRowStyle CssClass="altrow"/>
        <HeaderStyle CssClass="ui-state-default" />
        <Columns>            
            <asp:TemplateField HeaderText="Date">
                <ItemTemplate> <%--edited the javascript--%> 
                    <a href="javascript:showDateProfile('%# Eval('DateFormat') %')" id="link1" runat="server" class="underline"><%# Eval("DateFormat") %></a>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Orders" HeaderText="Orders" SortExpression="Orders" />
            <asp:BoundField DataField="Cancels" HeaderText="Cancels" SortExpression="Cancels" />
            <asp:BoundField DataField="Net" HeaderText="Net" SortExpression="Net" />
            <asp:BoundField DataField="Total" HeaderText="Total" SortExpression="Total" />
        </Columns>
    </asp:GridView>

javascript (in aspx file) - edited

<script type="text/javascript">
function showDateProfile(x) {
    var w1 = window.open("DateProfile.aspx?id=x", "Profile", "width=800,height=600");
}

// edit
var qs = this.Request.QueryString["x"];
</script>

I would greatly appreciate help on how to get it to work how I want. Thanks in advanced.

EDIT

Is this a good way to do the data source for the gridview in the new window?

<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
SelectCommand="SELECT uid, name, company, startdate, enddate FROM Customer WHERE (startdate = @Date) or (enddate = @Date)" 
ConnectionString="<%$ ConnectionStrings:New_QuickBooksConnectionString %>">
    <SelectParameters>
    <asp:QueryStringParameter DefaultValue="" Name="Date" QueryStringField="DateFormat" Type="Object" />
    </SelectParameters>
    </asp:SqlDataSource>

Answer 1

i wrote a sample for you, which shows all persons and by click on BirthDate column, user is redirected to another page, this is main page code front (WebForm1.aspx) :

<script>

    function showDateProfile(x) {

        window.open("DateProfile_1.aspx?id=" + x, "Profile", "width=800,height=600");
    };

</script>

<asp:GridView ID="PersonGridView_Master" 
    runat="server" 
    AutoGenerateColumns="False" >
    <Columns>            
        <asp:TemplateField HeaderText="BirthDate">
            <ItemTemplate>
                <a href="javascript:showDateProfile('<%#Eval("id")%>')"><%# Eval("date")%></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="name" HeaderText="Name"/>
    </Columns>
</asp:GridView>

i have no DataSource control because i bound data from code behind (WebForm1.aspx.cs), details doesn`t matter

protected void Page_Load(object sender, EventArgs e)
    {
        BindGrid();
    }

    public void BindGrid()
    {
        // you can bind data to your grid in different ways
        // SqlDataSource, ObjectDataSource, ... , it doesn`t matter

        PersonGridView_Master.DataSource = GetPersons();
        PersonGridView_Master.DataBind();
    }

    public object GetPersons()
    {
        // you can fetch your data in different ways, it doesn`t matter

        TestEntities context = new TestEntities();
        return context.tbl_Persons
            .Select(u => new
            {
                id = u.fldID,
                name = u.fldFirstName,
                date = u.fldBirthDate
            })
            .ToList();
    }

now, in second page... this is my second page code front (DateProfile_1.aspx),

<asp:GridView ID="PersonGridView_Detail" 
        runat="server" 
        AutoGenerateColumns="False" >
        <Columns>            
            <asp:BoundField DataField="date" HeaderText="BirthDate"/>
            <asp:BoundField DataField="name" HeaderText="Name"/>
        </Columns>
    </asp:GridView>

and also here, i dont have any data source control, because i bound data from code behind... this is code behind of (DateProfile_1.aspx.cs)

public partial class DateProfile : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // get from query string and casting to its type
        Guid id = Guid.Parse(Request.QueryString["id"]);

        // populate grid
        BindGridToPerson(id);
    }

    public void BindGridToPerson(Guid ID)
    {
        // you can bind data to your grid in different ways
        // if you can use SqlDataSource, ObjectDataSource, you need to set property on those
        // to say that they need to get id from query string, in this way, we bind data
        // to grid manually

        PersonGridView_Detail.DataSource = GetPersonByID(ID);
        PersonGridView_Detail.DataBind();
    }

    public object GetPersonByID(Guid ID)
    {
        // you can fetch your data in different ways, it doesn`t matter

        TestEntities context = new TestEntities();
        return context.tbl_Persons
            .Select(u => new
            {
                id = u.fldID,
                name = u.fldFirstName,
                date = u.fldBirthDate
            })
            .Where(u => u.id == ID)
            .ToList();
    }
}

and i have another page use SqlDataSource to Bind data, in this case, you dont need any server side code, for this reson, i post just code front (DateProfile_2.aspx):

   <asp:GridView ID="PersonGridView_Detail" 
        runat="server" 
        AutoGenerateColumns="False" 
        DataSourceID="SqlDataSource1">
        <Columns>            
            <asp:BoundField DataField="date" HeaderText="BirthDate"/>
            <asp:BoundField DataField="name" HeaderText="Name"/>
        </Columns>
    </asp:GridView>

    <br />
    <asp:SqlDataSource ID="SqlDataSource1" 
        runat="server" 
        ConnectionString="<%$ ConnectionStrings:Web_TestConnectionString %>" 
        SelectCommand="SELECT [fldID], [fldBirthDate] as date, [fldFirstName] as name 
            FROM [Common].[tbl_Persons] 
            where [fldID] = @id">
        <SelectParameters>
            <asp:QueryStringParameter Name="id" QueryStringField="id" />
        </SelectParameters>
    </asp:SqlDataSource>

and the end, let me know, if this post was usefull to you

Answer 2

first you need to pass your unique identifier to showDateProfile() to pas to second page, for this, probably yo can define <a> element in markup like this

<a href="javascript:showDateProfile('<%# Eval("YOUR_UNIQUE_INDETIFIER_FIELD_NAME") %>')" id="link1" runat="server" class="underline"><%# Eval("DateFormat") %></a>

then you need to pass id from showDateProfile() to second page as Query String like this:

function showDateProfile(id) { var w1 = window.open("DateProfile.aspx?x="id, "Profile", "width=800,height=600"); }

then in second page_load event, you can get unique identifier has been passed like this:

this.Request.QueryString["x"]

and cast to its type, for example, if your id is type of Guid, you need to do this: Guid.Parse(this.Request.QueryString["x"])

and then, you have id, and the only thing is to get inforamtion from your DB and show them with any thing, like GridView