Custom hierarchy content

In some cases you need to show custom HTML/Details for a row in the parent grid table and do not wish to use a subgrid for that. jqGrid for ASP.NET supports that and you can have any content as child content for a row. Here is a typical setup you can achieve - show details for Employees, including information, photo, etc.

The key here is to set the HierarchiSettings.HierarchyMode property to Parent - this will show the expand (plus) images for each row. Then, take advantage of the client-side SubGridRowExpanded event - we will use that to send ajax request to the server with the ID of the parent row. The details we get will be appended as a child to the parent row. The javascript event handler gets two parameters - the ID of placeholder below the row expanded (can be used to show custom HTML) and the ID of the parent row (can be used to get details for that particular row.

<trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="SqlDataSource1" 
   Width="650px" Height="300px">
   <Columns>
      <trirand:JQGridColumn DataField="EmployeeID" PrimaryKey="True" />
      <trirand:JQGridColumn DataField="LastName" />
      <trirand:JQGridColumn DataField="FirstName" />
      <trirand:JQGridColumn DataField="Title" />
   </Columns>
   <HierarchySettings HierarchyMode="Parent"  />
   <ClientSideEvents SubGridRowExpanded="showSubGrid" />
</trirand:JQGrid>

<script type="text/javascript">    
   function showSubGrid(placeholder_id, row_id) 
   {            
      $.ajax({
         url: "/examples/hierarchy/custom_details/default.aspx?employeeID=" + row_id,
         type: "GET",
         success: function(html) {
            $("#" + placeholder_id).append(html);
         }
      });
        }    
</script>

Note: We are using the built-in jQuery $ajax functionality to make the ajax callback to the server. Since you will be using jqGrid for ASP.NET (which is built on top of jQuery), you will have jQuery anyway and can use this syntax as well.

The only thing we have to do is to intercept the request on the server and prepare the custom HTML. You can use any approach you wish, in our case we are querying the database for details for the respective employee (we get the ID of the employee using the QueryString) and are creating HTML based on that. The HTML will be appended on the client-side.

Note: You need to write the HTML to the Response object and terminate the ASP.NET page lifecycle using Response.End() [see source code below for details) - otherwise you will get normal response - the whole page in initial state. If you do not like this approach, you can use WebServices to get the custom response you need.

public partial class _default : System.Web.UI.Page
   {
        string result = @"<table>
                            <tr>
                              <td><b>FirstName</b></td>
                              <td>{0}</td>
                              <td rowspan='9' valign='top'><img src='{9}'></td>
                            </tr>
                            <tr>
                              <td><b>LastName</b></td>
                              <td>{1}</td>
                            </tr>
                            <tr>
                              <td><b>Title</b></td>
                              <td>{2}</td>
                            </tr>
                            <tr>
                              <td><b>Title of Courtesy</b></td>
                              <td>{3}</td>
                            </tr>
                            <tr>
                              <td><b>Birth Date</b></td>
                              <td>{4}</td>
                            </tr>
                            <tr>
                              <td><b>Hire Date</b></td>
                              <td>{5}</td>
                            </tr>
                            <tr>
                              <td><b>Address</b></td>
                              <td>{6}</td>
                            </tr>
                            <tr>
                              <td><b>City</b></td>
                              <td>{7}</td>
                            </tr>
                            <tr>
                              <td><b>Postal Code</b></td>
                              <td>{8}</td>
                            </tr>
                        ";

        protected void Page_Load(object sender, EventArgs e)
        {
            string employeeID = Request.QueryString["employeeID"];
            if (!String.IsNullOrEmpty(employeeID))
            {
                DataTable dt = GetData(employeeID);
                result = String.Format(result, 
                                            dt.Rows[0]["FirstName"].ToString(), 
                                            dt.Rows[0]["LastName"].ToString(),
                                            dt.Rows[0]["Title"].ToString(),
                                            dt.Rows[0]["TitleOfCourtesy"].ToString(),
                                            dt.Rows[0]["BirthDate"].ToString(),
                                            dt.Rows[0]["HireDate"].ToString(),
                                            dt.Rows[0]["Address"].ToString(), 
                                            dt.Rows[0]["City"].ToString(),
                                            dt.Rows[0]["PostalCode"].ToString(),                                            
                                            "images/" + dt.Rows[0]["EmployeeID"].ToString() + ".jpg"
                                       );

                Response.Clear();
                Response.Write(result);
                Response.End();
            }
        }

        protected DataTable GetData(string employeeID)
        {
            // Create a new Sql Connection and set connection string accordingly
            SqlConnection sqlConnection = new SqlConnection();
            sqlConnection.ConnectionString = ConfigurationManager.ConnectionStrings["SQL2008_449777_fhsConnectionString"].ConnectionString;
            sqlConnection.Open();

            string sqlStatement = "SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [PostalCode] FROM [Employees] Where EmployeeID =" + employeeID;

            // Create a SqlDataAdapter to get the results as DataTable
            SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sqlStatement, sqlConnection);

            // Create a new DataTable
            DataTable dtResult = new DataTable();

            // Fill the DataTable with the result of the SQL statement
            sqlDataAdapter.Fill(dtResult);

            return dtResult;
        }
}