Question

In a jQGrid, when I double-click a row, I want to open another page that shows more data regarding the selected row. A query would need to be constructed based on the selected row and passed to that page. My jQGrid is dynamically created based on who logs in. I am a software student and I don’t know what to do. I’ve searched online but have got nowhere. Please can you help. If you need more info, please let me know.

<trirand:JQGrid ID="JQGrid1" runat="server" Width="760px" onsearching="JQGrid1_Searching" >         
    <Columns>

    </Columns>

    <PagerSettings ScrollBarPaging="true" PageSize="100" NoRowsMessage="Scroll to bottom to retrieve new page" />
    <AppearanceSettings HighlightRowsOnHover="true" /> 
    <ToolBarSettings ShowAddButton="true" ShowSearchToolBar="true" ShowRefreshButton="true" />
    <AddDialogSettings ReloadAfterSubmit="true" Caption="Add a new row" SubmitText="Add the row" Resizable="false" />   

</trirand:JQGrid>

Functions:

public static DataTable GetAnimalsByClient(Client cli)
{
    DataTable dt = new DataTable();

    try
    {
        MySqlConnection connection = Database.Connect();
        string sql = string.Format("select a.animal_official_tag as AnimalOfficialTag, DATE_FORMAT(a.animal_date_of_birth,'%d/%m/%Y') AS DateOfBirth, a.animal_gender as AnimalGender, a.animal_breed as AnimalBreed, a.animal_jumbo as AnimalJumbo from animal a inner join herd_animal ha on a.animal_id = ha.animal_id join herd h on ha.herd_id = h.herd_id join client c on h.client_id = c.client_id where c.client_id = {0}", cli.ID);
        MySqlDataAdapter adapter = new MySqlDataAdapter(sql, connection);

        adapter.Fill(dt);
        adapter.Dispose();

        Database.Disconnect(connection);
    }
    catch (Exception exp)
    {
        StackFrame stackFrame = new StackFrame();
        MethodBase methodBase = stackFrame.GetMethod();
        Error.SaveError(methodBase.Name, exp.Message);
    }
    return dt;
}


public DataTable GetCurrentStock()
{
    try
    {
        DataTable dt = (DataTable)AnimalDao.GetAnimalsByClient(UserSession.GetClient());

        List<DataColumn> lstCol = new List<DataColumn>();
        foreach (DataColumn col in dt.Columns)
        {
            lstCol.Add(col);
        }

        for (int i = 0; i < dt.Columns.Count; i++)
        {
            JQGridColumn col = new JQGridColumn();
            col.DataField = lstCol[i].ColumnName;
            col.HeaderText = lstCol[i].ColumnName;
            col.Width = lstCol[i].ColumnName.Length;
            col.Visible = true;
            col.Editable = true;
            JQGrid1.Columns.Add(col);
        }

        return dt;
    }
    catch (Exception exp)
    {
        return null;
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!UserSession.LoggedIn())
    {
        Response.Redirect("Default.aspx");
    }

    RefreshGrid();
    JQGrid1.DataSource = GetCurrentStock();
    JQGrid1.DataBind();      
}

Answer 1

I would just create a javascript function to send a query string with the RowID to a new page.

You can get the RowID of the selected row by:

var grid = jQuery("#<%= JQgrid1.ClientID %>");
var rowKey = grid.getGridParam("selrow");

And then just use this to open a new window while sending the rowID to open the information you want:

window.open("http://yourwebsite.com?RowID=" + rowKey);

Then all you need to do is connect the double click event to the javascript function:

<trirand:JQGrid ID="JQGrid1" runat="server" Width="760px"
        onsearching="JQGrid1_Searching"
        ClientSideEvents-RowDoubleClick="[function name]">

Hope this helps.