Forum
Log In
Home
Topic RSS
Related Topics
22:19
30/11/2010
Offline
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
17:43
30/11/2010
Offline
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
Most Users Ever Online: 715
Currently Online:
45 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
