Help With Column Hierarchy

[Sibeesh VenuParticipant]

Hi All,
I have populated JQX Grid successfully for the normal case. Now I am trying for a multi grid or hierarchical grid. Please look at the below table. This is my data source. I found that there is no way we can bind our HTML table directly to the JQX. So I found a solution for converting this HTML data to array , but the same is applicable for only normal grid. Can anyone help me with populating the same for the below mentioned HTML table. Any help is appreciated. Thanks in advance.

`<table id=”YearlyGridReport” class=”display dataTable no-footer” role=”grid” aria-describedby=”YearlyGridReport_info” style=”width: 1501px;”>
<thead>
<tr role=”row”>
<td class=”titleAllLockedCell” rowspan=”1″ colspan=”1″>Year Description</td>
<td class=”titleAllLockedCell” rowspan=”1″ colspan=”1″></td>
<th class=”titleTopLockedCell” colspan=”8″ rowspan=”1″><span>2014</span></th>
</tr>
<tr role=”row”>
<td class=”titleAllLockedCell” rowspan=”1″ colspan=”1″>Quarter</td>
<td class=”titleAllLockedCell” rowspan=”1″ colspan=”1″></td>
<th class=”titleTopLockedCell” colspan=”2″ rowspan=”1″><span>Q1</span></th>
<th class=”titleTopLockedCell” colspan=”2″ rowspan=”1″><span>Q2</span></th>
<th class=”titleTopLockedCell” colspan=”2″ rowspan=”1″><span>Q3</span></th>
<th class=”titleTopLockedCell” colspan=”2″ rowspan=”1″><span>Q4</span></th>
</tr>
<tr role=”row”>
<td class=”titleAllLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Work Type: activate to sort column ascending” style=”width: 100px;”>Work Type</td>
<td class=”titleAllLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Work Status: activate to sort column ascending” style=”width: 102px;”>Work Status</td>
<th class=”titleTopLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Total Effort Reported: activate to sort column ascending” style=”width: 130px;”><span>Total Effort Reported</span></th>
<th class=”titleTopLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Effort Scheduled: activate to sort column ascending” style=”width: 101px;”><span>Effort Scheduled</span></th>
<th class=”titleTopLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Total Effort Reported: activate to sort column ascending” style=”width: 130px;”><span>Total Effort Reported</span></th>
<th class=”titleTopLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Effort Scheduled: activate to sort column ascending” style=”width: 101px;”><span>Effort Scheduled</span></th>
<th class=”titleTopLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Total Effort Reported: activate to sort column ascending” style=”width: 130px;”><span>Total Effort Reported</span></th>
<th class=”titleTopLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Effort Scheduled: activate to sort column ascending” style=”width: 102px;”><span>Effort Scheduled</span></th>
<th class=”titleTopLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Total Effort Reported: activate to sort column ascending” style=”width: 131px;”><span>Total Effort Reported</span></th>
<th class=”titleTopLockedCell sorting” tabindex=”0″ aria-controls=”YearlyGridReport” rowspan=”1″ colspan=”1″ aria-label=”Effort Scheduled: activate to sort column ascending” style=”width: 103px;”><span>Effort Scheduled</span></th>
</tr>
</thead>
<tbody>

<tr role=”row” class=”odd”>
<td class=”titleLeftLockedCell”><span>Administration</span></td>
<td class=”titleLeftLockedCell”><span>Open/Approved</span></td>
<td class=”valueCell”><span>7,520.75</span></td>
<td class=”valueCell”><span>1,153.53</span></td>
<td class=”valueCell”><span>11,775.75</span></td>
<td class=”valueCell”><span>1,172.16</span></td>
<td class=”valueCell”><span>8,594.00</span></td>
<td class=”valueCell”><span>500.31</span></td>
<td class=”valueCell”><span>4,150.50</span></td>
<td class=”valueCell”><span>4,125.51</span></td>
</tr>
<tr role=”row” class=”even”>
<td class=”titleLeftLockedCell”><span>Administration</span></td>
<td class=”titleLeftLockedCell”><span>Requested</span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span>116.00</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>76.00</span></td>
<td class=”valueCell”><span>86.92</span></td>
</tr>
<tr role=”row” class=”odd”>
<td class=”titleLeftLockedCell”><span>Administration</span></td>
<td class=”titleLeftLockedCell”><span>Work Cancelled</span></td>
<td class=”valueCell”><span>78.00</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>0.00</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
</tr>
<tr role=”row” class=”even”>
<td class=”titleLeftLockedCell”><span>Administration</span></td>
<td class=”titleLeftLockedCell”><span>Work Completed</span></td>
<td class=”valueCell”><span>205.50</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>22.50</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>7.75</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
</tr>
<tr role=”row” class=”odd”>
<td class=”titleLeftLockedCell”><span>Maintenance</span></td>
<td class=”titleLeftLockedCell”><span>Assumed Completed</span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span>35.75</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
</tr>
<tr role=”row” class=”even”>
<td class=”titleLeftLockedCell”><span>Maintenance</span></td>
<td class=”titleLeftLockedCell”><span>On Hold</span></td>
<td class=”valueCell”><span>45.25</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>0.00</span></td>
<td class=”valueCell”><span>53.98</span></td>
<td class=”valueCell”><span>0.00</span></td>
<td class=”valueCell”><span>32.87</span></td>
<td class=”valueCell”><span>0.00</span></td>
<td class=”valueCell”><span>270.22</span></td>
</tr>
<tr role=”row” class=”odd”>
<td class=”titleLeftLockedCell”><span>Maintenance</span></td>
<td class=”titleLeftLockedCell”><span>Open/Approved</span></td>
<td class=”valueCell”><span>9,954.75</span></td>
<td class=”valueCell”><span>15.84</span></td>
<td class=”valueCell”><span>13,220.50</span></td>
<td class=”valueCell”><span>387.13</span></td>
<td class=”valueCell”><span>15,430.25</span></td>
<td class=”valueCell”><span>2,261.97</span></td>
<td class=”valueCell”><span>10,609.75</span></td>
<td class=”valueCell”><span>11,781.11</span></td>
</tr>
<tr role=”row” class=”even”>
<td class=”titleLeftLockedCell”><span>Maintenance</span></td>
<td class=”titleLeftLockedCell”><span>Requested</span></td>
<td class=”valueCell”><span>49.75</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>1,029.75</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>1,314.00</span></td>
<td class=”valueCell”><span>51.46</span></td>
<td class=”valueCell”><span>914.25</span></td>
<td class=”valueCell”><span>1,199.37</span></td>
</tr>
<tr role=”row” class=”odd”>
<td class=”titleLeftLockedCell”><span>Maintenance</span></td>
<td class=”titleLeftLockedCell”><span>Work Cancelled</span></td>
<td class=”valueCell”><span>16.00</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>10.50</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>0.25</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span></span></td>
<td class=”valueCell”><span></span></td>
</tr>
<tr role=”row” class=”even”>
<td class=”titleLeftLockedCell”><span>Maintenance</span></td>
<td class=”titleLeftLockedCell”><span>Work Completed</span></td>
<td class=”valueCell”><span>2,436.50</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>2,608.00</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>2,407.00</span></td>
<td class=”valueCell”><span>.00</span></td>
<td class=”valueCell”><span>252.00</span></td>
<td class=”valueCell”><span>.00</span></td>
</tr>
</tbody>
</table>

Kindest Regards
Sibeesh

[Sibeesh VenuParticipant]

HI I am asking about what should be the format for columns: [{}] for the below mentioned table.

Kindest Regards
Sibeesh

[DimitarParticipant]

Hello Sibeesh,

The information about column hierarchy will probably have to be added to the array you created from the HTML table. We cannot assist you, however, without a sample of your JavaScript code (preferably share a JSFiddle example).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Sibeesh VenuParticipant]

Hi Dimitar,

Thanks a lot for the reply . Please follow the link for the js fiddle . You may find the code looks not good. I need some suggestion to improve that too. Looking for war to hear from you. Please be noted that the output I need is like the image below.

http://jsfiddle.net/Sibeesh/nyj7rcLs/3/

Kindest Regards
Sibeesh

[DimitarParticipant]

Hi Sibeesh,

You have commented out the column definitions containing each column’s columngroup setting. Without this property, the columns will not be assigned to any column group and the columns hierarchy will not be built. This should be taken in mind while you are building your columns array dynamically.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts