jQuery Grid Plugin - jqGrid - Topic: Grouping in tabletogrid options http://www.trirand.com/blog/?page_id=393/help/grouping-in-tabletogrid-options Simple:Press Version 5.7.5.3 gijs_wil on Grouping in tabletogrid options http://www.trirand.com/blog/?page_id=393/help/grouping-in-tabletogrid-options#p21079 Help http://www.trirand.com/blog/?page_id=393/help/grouping-in-tabletogrid-options#p21079 Hi there,

Found the error. It is working now.

I rewrote the existing Grouping row(s) collapsed example to use an existing table instead of the myData variable. This way I could keep the grid options almost identical (only item removed is the data:myData option).

When the page loads the grouping is not working (other options are, the grouping column is removed, pager is added). There are no group headers and all rows are shown in their original order. When clicking one of the sortable column headers the table is reloaded and the grouping is working.

Because the original table is already loaded the grid needed to be reloaded to group the data. So I needed to add a trigger to reload the grid.

This the rewritten example:

<html>
 <head>
  <title>Test page</title>

  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <meta http-equiv="Content-Style-Type" content="text/css"/>

  <link rel="stylesheet" type="text/css" href="cs/ui/jquery-ui-1.7.2.custom.css" />
  <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
 
  <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript" src="js/grid.locale-nl.js"></script>
  <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){   
   tableToGrid("#list485", {
    datatype: "local",
    height: 'auto',
    rowNum: 30,
    rowList: [10,20,30],
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
      {name:'id',index:'id', width:60, sorttype:"int"},
      {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
      {name:'name',index:'name', width:100, editable:true},
      {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
      {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},  
      {name:'total',index:'total', width:80,align:"right",sorttype:"float"},  
      {name:'note',index:'note', width:150, sortable:false}  
    ],
    pager: "#plist485",
    viewrecords: true,
    sortname: 'name',
    grouping:true,
    groupingView : {
     groupField : ['name'],
     groupColumnShow : [false],
     groupText : ['<b>{0} - {1} Item(s)</b>'],
     groupCollapse : true,
     groupOrder: ['desc']
    },
    caption: "Initially hidden data"
   });
   
   $("#list485").trigger("reloadGrid");
  });
  </script>
 </head>
 <body>
  <table id="list485">
   <thead>
    <tr>
     <th>id</th>
     <th>invdate</th>
     <th>name</th>
     <th>note</tdh>
     <th>amount</th>
     <th>tax</th>
     <th>total</th>
    </tr>
   </thead>
   <tbody>
    <tr><td>1</td><td>2010-05-24</td><td>test</td><td>note</td><td>2100.00</td><td>10.00</td><td>2111.00</td></tr>
    <tr><td>2</td><td>2010-05-25</td><td>test2</td><td>note2</td><td>300.00</td><td>20.00</td><td>320.00</td></tr>
    <tr><td>3</td><td>2007-09-01</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
    <tr><td>4</td><td>2007-10-04</td><td>test</td><td>note</td><td>200.00</td><td>10.00</td><td>210.00</td></tr>
    <tr><td>5</td><td>2007-10-05</td><td>test2</td><td>note2</td><td>300.00</td><td>20.00</td><td>320.00</td></tr>
    <tr><td>6</td><td>2007-09-06</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
    <tr><td>7</td><td>2007-10-04</td><td>test</td><td>note</td><td>200.00</td><td>10.00</td><td>210.00</td></tr>
    <tr><td>8</td><td>2007-10-03</td><td>test2</td><td>note2</td><td>300.00</td><td>21.00</td><td>320.00</td></tr>
    <tr><td>9</td><td>2007-09-01</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
    <tr><td>11</td><td>2007-10-01</td><td>test</td><td>note</td><td>200.00</td><td>10.00</td><td>210.00</td></tr>
    <tr><td>12</td><td>2007-10-02</td><td>test2</td><td>note2</td><td>300.00</td><td>20.00</td><td>320.00</td></tr>
    <tr><td>13</td><td>2007-09-01</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
    <tr><td>14</td><td>2007-10-04</td><td>test</td><td>note</td><td>200.00</td><td>10.00</td><td>210.00</td></tr>
    <tr><td>15</td><td>2007-10-05</td><td>test2</td><td>note2</td><td>300.00</td><td>20.00</td><td>320.00</td></tr>
    <tr><td>16</td><td>2007-09-06</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
    <tr><td>17</td><td>2007-10-04</td><td>test</td><td>note</td><td>200.00</td><td>10.00</td><td>210.00</td></tr>
    <tr><td>18</td><td>2007-10-03</td><td>test2</td><td>note2</td><td>300.00</td><td>20.00</td><td>320.00</td></tr>
    <tr><td>19</td><td>2007-09-01</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
    <tr><td>21</td><td>2007-10-01</td><td>test</td><td>note</td><td>200.00</td><td>10.00</td><td>210.00</td></tr>
    <tr><td>22</td><td>2007-10-02</td><td>test2</td><td>note2</td><td>300.00</td><td>20.00</td><td>320.00</td></tr>
    <tr><td>23</td><td>2007-09-01</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
    <tr><td>24</td><td>2007-10-04</td><td>test</td><td>note</td><td>200.00</td><td>10.00</td><td>210.00</td></tr>
    <tr><td>25</td><td>2007-10-05</td><td>test2</td><td>note2</td><td>300.00</td><td>20.00</td><td>320.00</td></tr>
    <tr><td>26</td><td>2007-09-06</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
    <tr><td>27</td><td>2007-10-04</td><td>test</td><td>note</td><td>200.00</td><td>10.00</td><td>210.00</td></tr>
    <tr><td>28</td><td>2007-10-03</td><td>test2</td><td>note2</td><td>300.00</td><td>20.00</td><td>320.00</td></tr>
    <tr><td>29</td><td>2007-09-01</td><td>test3</td><td>note3</td><td>400.00</td><td>30.00</td><td>430.00</td></tr>
   </tbody>
  </table>
  <div id="plist485"></div>
 </body>
</html>

 

Kind regards,

Wilbert

]]> Thu, 02 Dec 2010 17:43:25 +0200 gijs_wil on Grouping in tabletogrid options http://www.trirand.com/blog/?page_id=393/help/grouping-in-tabletogrid-options#p21048 Help http://www.trirand.com/blog/?page_id=393/help/grouping-in-tabletogrid-options#p21048 Hello,

I am new to this fabulous plugin and trying to convert a existing html table (by using tabletogrid). The table is displayed fine but grouping is not working. The options are read as the grouping column is removed (as set by groupColumnShow : [false]).

All the grouping examples are working fine so all neccessary files are loaded. I am trying to find the minimum options needed for grouping by trial and error now.

here's my current code:

$(document).ready(function(){     
   tableToGrid("#mytable",{
    datatype: "local",
    sortname: 'Group',
    grouping:true,
    groupingView : {
     groupField : ['Group'],
     groupColumnShow : [false],
     groupText : ['<b>{0} - {1} Item(s)</b>']
    },
    caption: "Test grouping"
   });
  });

.....

<table id="mytable">
   <tr>
    <th>Group</th>
    <th>Name</th>
    <th>Description</th>
    <th>Summary</th>
   </tr>
   <tbody>
    <tr>
     <td>First group</td>
     <td>John Johnson</td>
     <td>Lorem ipsum dolor sit amet</td>
     <td>Lorem ipsum dolor sit amet, consectetur </td>
    </tr>
    <tr>
     <td>First group</td>
     <td>Peter Peterson</td>
     <td>Lorem ipsum dolor sit amet</td>
     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td>
    </tr>
    <tr>
     <td>Second group</td>
     <td>Lois Lane</td>
     <td>Lorem ipsum dolor sit amet</td>
     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt </td>
    </tr>
    <tr>
     <td>Third group</td>
     <td>Nicole Nickelson</td>
     <td>Lorem ipsum dolor sit amet</td>
     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</td>
    </tr>
   </tbody>
   </table>

Best regards,

Wilbert

]]> Tue, 30 Nov 2010 22:19:29 +0200