CODEWITHSUNDEEP
jqueryjqgridstruts2
Rookie007
Rookie007

Reputation: 1219

How to add sub column headers and symbols in Struts2 jqueryGrid

i have requirement to implement a column in Struts2-Jquery Grid like bellow

------------------------------  
col1    |   col2 is main column
________|________________________
        |  Sub col1 | Sub col 2
________|___________|____________                 

   /* Data */ in rows format

I and I want to add Tick symbol in sub columns .. Can Any one please help me How to achieve this I am using Struts2 Jquery grid

The below is my JSP page Please tell me Where I am doing Mistake.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  <%@page contentType="text/html" pageEncoding="UTF-8"%>
  <%@ taglib prefix="s" uri="/struts-tags"%>
  <%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
  <%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
 <html>
     <head>
       <sj:head jquerytheme="redmond" jqueryui="true" />
       <title>JSP Page</title>
       <script type="text/javascript">
    function doGridComplete()
    {
        $("#gridId").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'idcountry', numberOfColumns: 2, titleText: '<em>col2 is main column</em>'}] }).trigger("reloadGrid");            
    } 


  </script>
    </head>
   <body>
   <s:form name="testform"  >

    <s:url id="topgrid" action="countrygrid"/>
    <s:url id="middlegrid" action="stategrid"/>
    <s:url id="bottomgrid" action="citygrid"/>

    <sjg:grid dataType="json" gridModel="gridModel" navigator="false"
              pager="true"
              viewrecords="true" width="600"
              href="%{topgrid}"
              height="400"
              id="gridId"
                >

        <sjg:gridColumn name="idcountry" title="Country Id" labelSeparator="jak" label="HI this is lable">
        </sjg:gridColumn>
        <sjg:gridColumn name="countryname"  disabled="true" title="Country Name" key="true" align="center"/>
        <sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/>
        <sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/>
        <sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/>

    </sjg:grid>
    <script language='JavaScript' type='text/JavaScript'>

    function doGridComplete()
    {
        $("#gridId").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'idcountry', numberOfColumns: 2, titleText: '<em>col2 is main column</em>'}] }).trigger("reloadGrid");            
    } 
    doGridComplete();

   </script>
            </s:form>
    </body>
</html>

My Grid Output When I do click on column headers

Upvotes: 0

Views: 948

Answers (1)

Uchenna Nwanyanwu
Uchenna Nwanyanwu

Reputation: 3204

Call the doGridComplete() after your grid. 

<sjg:grid dataType="json" gridModel="gridModel" navigator="false"
          pager="true"
          viewrecords="true" width="600"
          href="%{topgrid}"
          height="400"
          id="gridId" 
          onGridCompleteTopics="gridcomplete">

    <sjg:gridColumn name="idcountry" title="Country Id" labelSeparator="jak" label="HI this is lable">
    </sjg:gridColumn>
    <sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/>
</sjg:grid>

<script language='JavaScript' type='text/JavaScript'>

        function doGridComplete()
        {
             $("#gridId").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'sub_Col1_name', numberOfColumns: 2, titleText: '<em>col2 is main column</em>'}] });            
        } 
        doGridComplete();

</script>

sub_Col1_name in startColumnName is the name of column that you want to start the header grouping from. Hope this helps.

Upvotes: 2

Related Questions