Rendering Headings Issue

[Steven Githens]

Hi all,

We've been using the renderer+pager in production (albeit limited to a 
small pilot) for at least 5 months now I think (it's been at least that 
long since I've touched the code).  Anyways, I just realized one of our 
optional columns isn't sorting.

I just tried upgrading to the Infusion 1.1.2 release.  Everything seems 
to work fine still (amazingly, since I was running off a random trunk 
revision before), but this is still an issue.

Hopefully I'm setting things up wrong.

I have this table header markup:
<thead>
             <tr class="sub-table-header">
                 <th class="flc-pager-sort-header">
                   <a class="student-name-sort" title="Click to sort" 
href="#">Student Name</a>
                   <img class="student-name-sort-img" 
src="/library/image/sakai/sortascending.gif" />
                 </th>
                 <th class="flc-pager-sort-header">
                   <a class="submitted-time-sort" title="Click to sort" 
href="#">Submitted</a>
                   <img class="submitted-time-sort-img" 
src="/library/image/sakai/sortascending.gif" />
                 </th>
                 <th class="flc-pager-sort-header">
                   <a class="submission-status-sort" title="Click to 
sort" href="#">Submission Status</a>
                   <img class="submission-status-sort-img" 
src="/library/image/sakai/sortascending.gif" />
                 </th>
                 <th class="grade-col-header flc-pager-sort-header">
                   <a class="grade-sort" title="Click to sort" 
href="#">Grade (Released)</a>
                   <!-- <img class="grade-sort-img" 
src="/library/image/sakai/sortascending.gif" /> TODO: Is this a renderer 
bug?-->
                 </th>
                 <th class="report-col-header flc-pager-sort-header">Report
                   <!-- <a class="submission-report-sort" title="Click 
to sort" href="#">Report</a>
                   <img class="submission-report-sort-img" 
src="/library/image/sakai/sortascending.gif" />-->
                 </th>
                 <th class="flc-pager-sort-header">
                   <a class="feedback-released-sort" title="Click to 
sort" href="#">Feedback Released?</a>
                   <img class="feedback-released-sort-img" 
src="/library/image/sakai/sortascending.gif" />
                 </th>
             </tr>
         </thead>

The issue is with the grade-col-header which we don't always display.

The selectors all look like:
[snip]
  { selector: ".submission-report-sort-img", id: 
"submission-report-sort-img" },
  { selector: ".feedback-released-sort", id: "feedback-released-sort" },
  { selector: ".feedback-released-sort-img", id: 
"feedback-released-sort-img" },
  { selector: ".grade-sort", id: "grade-sort" },
  { selector: ".grade-sort-img", id: "grade-sort-img" },
  { selector: ".grade-col-header", id: "grade-col-header" },
[snip]

The first part of the tree for the headers looks like:

var tree = {
      children: [
        { ID: "student-name-sort",
          value: true,
          decorators: [
            {"jQuery": ["click", onSortClick('studentName')]}
          ]
        },
        { ID: "submitted-time-sort",
          value: true,
          decorators: [
            {"jQuery": ["click", onSortClick('submittedTime')]}
          ]
        },
        { ID: "submission-status-sort",
          value: true,
          decorators: [
            {"jQuery": ["click", onSortClick('submissionStatus')]}
          ]
        },
        { ID: "feedback-released-sort",
          value: true,
          decorators: [
            {"jQuery": ["click", onSortClick('feedbackReleased')]}
          ]
        }
      ]
  };


Then if the optional column should be included:

if (asnn2subview.graded === true) {
    tree.children.push({
      ID: "grade-col-header", value: true
    });
    tree.children.push({
      ID: "grade-sort",
      value: true,
      decorators: [
        {"jQuery": ["click", onSortClick('grade')]}
      ]
    });
   
    /*
    tree.children.push({
      ID: "grade-col-header:", value: [{
        ID: "grade-sort",
        value: true,
        decorators: [
          {"jQuery": ["click", onSortClick('grade')]}
        ]
      }]
    }); */
  }


The conditional rendering works fine, but on tables when we do enable, 
there is no event happening when the sort link for that column is 
clicked.  You can see from the commented out bit, that I also tried 
making the <th> a branch container rather than just an optionally 
rendering entry point.

I realize this is pretty lame, and we should be doing more 
metaprogramming to set up this table, but it worked and was fast to set 
up in the time we had.  We're also rendering the inside our selves with 
the rendering because we do ajax requests for every sort page (which 
actually is fairly fast for this particular data set and solved some 
performance issues ).

Any ideas or spot checks on what we're doing wrong to set up that link 
in the optional <th> with the event decorator?

Megacheers,
Steve