title: How to add sub column headers and symbols in Struts2 jqueryGrid
body: <p>i have  requirement to implement a column in <code>Struts2-Jquery Grid</code> 
  like bellow</p>
  
  <pre><code>------------------------------  
  col1    |   col2 is main column
  ________|________________________
          |  Sub col1 | Sub col 2
  ________|___________|____________                 
  
     /* Data */ in rows format 
  </code></pre>
  
  <p>I and I want to add <code>Tick</code> symbol in sub columns .. Can Any one please help me How to achieve this 
  I am using <code>Struts2 Jquery grid</code></p>
  
  <p>The below is my JSP page Please tell me Where I am doing Mistake.</p>
  
  <pre><code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt;
    &lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
    &lt;%@ taglib prefix="s" uri="/struts-tags"%&gt;
    &lt;%@ taglib prefix="sj" uri="/struts-jquery-tags"%&gt;
    &lt;%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%&gt;
   &lt;html&gt;
       &lt;head&gt;
         &lt;sj:head jquerytheme="redmond" jqueryui="true" /&gt;
         &lt;title&gt;JSP Page&lt;/title&gt;
         &lt;script type="text/javascript"&gt;
      function doGridComplete()
      {
          $("#gridId").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'idcountry', numberOfColumns: 2, titleText: '&lt;em&gt;col2 is main column&lt;/em&gt;'}] }).trigger("reloadGrid");            
      } 
  
  
    &lt;/script&gt;
      &lt;/head&gt;
     &lt;body&gt;
     &lt;s:form name="testform"  &gt;
  
      &lt;s:url id="topgrid" action="countrygrid"/&gt;
      &lt;s:url id="middlegrid" action="stategrid"/&gt;
      &lt;s:url id="bottomgrid" action="citygrid"/&gt;
  
      &lt;sjg:grid dataType="json" gridModel="gridModel" navigator="false"
                pager="true"
                viewrecords="true" width="600"
                href="%{topgrid}"
                height="400"
                id="gridId"
                  &gt;
  
          &lt;sjg:gridColumn name="idcountry" title="Country Id" labelSeparator="jak" label="HI this is lable"&gt;
          &lt;/sjg:gridColumn&gt;
          &lt;sjg:gridColumn name="countryname"  disabled="true" title="Country Name" key="true" align="center"/&gt;
          &lt;sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/&gt;
          &lt;sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/&gt;
          &lt;sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/&gt;
  
      &lt;/sjg:grid&gt;
      &lt;script language='JavaScript' type='text/JavaScript'&gt;
  
      function doGridComplete()
      {
          $("#gridId").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'idcountry', numberOfColumns: 2, titleText: '&lt;em&gt;col2 is main column&lt;/em&gt;'}] }).trigger("reloadGrid");            
      } 
      doGridComplete();
  
     &lt;/script&gt;
              &lt;/s:form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/d5yOt.jpg" alt="My Grid Output When I do click on column headers "></p>