jQuery UI Widgets Forums Grid Help With Column Hierarchy

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 9 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Help With Column Hierarchy #63279

    Sibeesh Venu
    Participant

    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

    Help With Column Hierarchy #63326

    Sibeesh Venu
    Participant

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

    Kindest Regards
    Sibeesh

    Help With Column Hierarchy #63353

    Dimitar
    Participant

    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/

    Help With Column Hierarchy #63367

    Sibeesh Venu
    Participant

    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

    Help With Column Hierarchy #63433

    Dimitar
    Participant

    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/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.