FLUID-2777: Need more control over self rendering in Pager

Description

Using the pager with self rendering functionality and a data model is useful so you don't have to make your own sorting links and sorting functions. However, in practice, I've found a sizable mismatch between the column defs and what needs to be rendered in the table body.

Some scenario's are:

• You need to sort by the long/int representation but want something very different to display.
• You need a lot of component layout in the table cell
• The table cell consists of different icons for the representation
• The table cells actually bleed across each other. Each cell may require rendering of information from other columns for that row.
• You never know what your UI designers are going to draw up.

As an initial attempt to make things more flexible, I've added a pager option that consists of a fluid.transform function titled: filteredRowTransform

This would have the following API

/**
  *  A function capable of use in fluid.transform. This will be given the current filteredRow of the pager, which includes the
  *  original model as a row property. This can be used to build and return the component's for the current row of the table.
  *  You should be able to use either values or valuebindings.
  * 
  * @param {object|filteredRow} A filteredRow.  The original model is available via filtreredRow.row.
  * @param {int} The index of the current row.
  * @return You should return an Array of Maps containing component definitions for the table row to be rendered.
  */

Example usage:

var filteredRowTransform = function(obj, idx) {
    var row = obj.row;
    var togo = [ 
      { ID: "student-grade-link",
        target: '/portal/tool/'+sakai.curPlacement+'/grade/'+asnn2.curAsnnId+'/'+row.studentId,
        linktext: row.studentName
      },  
      {   
        ID: "submission-status",
        value: row.submissionStatus
      }   
    ];  

    if (row.submittedDateFormat) {
      togo.push({ ID: "submitted-time",
        value: row.submittedDateFormat
      }); 
    }   

    if (row.feedbackReleased === true) {
      togo.push({ ID: "feedback-released", value: true});
    }   

    if (graded === true) {
      togo.push({ ID: "grade", value: row.grade});
    }   


    return togo;
  };  

  var pager = fluid.pager("#submissions-table-area", {
    dataModel: data,
    columnDefs: columnDefs,
    pagerBar: pagerBarOptions,
    bodyRenderer: {
      type: "fluid.pager.selfRender",
      options: {
        filteredRowTransform : filteredRowTransform,
        selectors: {
          root: ".fl-pager-data"
        },  
        renderOptions: {debugMode: false, cutpoints: asnn2subview.selectorMap}
      }   
    }   

  });

Environments

Patch based off Fluid Infusion Trunk Revision 7248

Attachments

• Pager.r7248based.diff.txt