Results 1 to 1 of 1

Thread: WebList and client side custom sort support

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Join Date
    Feb 2009

    Lightbulb WebList and client side custom sort support

    Ok, this is to solve a particular problem I had to perform a custom sorting in a Manual-Loaded static WebList, that I asked originally in this thread.

    After some time, I finally got it working and though in sharing it !

    This version just covers basic WebColumn class. If you need to add the functionality to other Column classes (ColumnDate, ColumnHighlight, ColumCombo...) , you would have to subclass them as well, using the same approach (I guess). I am pretty sure there should be a better way to extend this to the other column sub-classes, but this is too "advanced" for my JavaScript skills.

    Anyway, after studying the WAF js stuff a bit, I found out that I would have to change (sub-class) at least 3 different components in order to implement this:

    1. the WebColumn:
    this is just to create the new web-property that will point the the custom js function to perform the sorting. I named it psClientCustomSort

    2. the WebListModel :
    this is a webList private internal object that is responsible to perform the sorting (at least for manually-loaded static list) ;
    Basically, I changed the sortData function, to recognize if a customSort is set for the sorting column, and I redirect the sorting to that function. If psClientCustomSort is not set, the default original logic remains;

    and finally
    3. the WebList:
    to instantiate the new WebListModel subclass, instead of the default one.

    In attachments, you will find the DF and JS sub-classes.

    The custom sort function works similar to the DF array compare functions, to sort arrays structures using any criteria we need.

    The function must return:

    • a negative value if 1st row paremeter should be come before the 2nd parameter (i.e a < b)
    • 0 if they compare as equal (i.e. a = b)
    • a positive value if the 1st rows should be sorted after the 2nd parameter. (i.e. a > b)

    It should be declared with 3 parameters:
    • #1 Row1 : row structure
    • #2 Row2 : row structure
    • #3 aColumns: columns array definitions.

    The first 2 parameters are two complete rows, with aCells array to retrieve each column value.
    The 3rd parameter is an array with all columns definitions, that might be useful to perform more complex sorting depending on column attributes, like peDataType.

    function myCustomSort_By_Artist_Album_TrackNum (oRow1, oRow2, aColumns) { 
        var x ; 
        // Artist name , Album and Track are at 2nd, 4th and 5th columns respectively
        // level 1 - Column 1 - Artist 
        x =[1].sValue, oRow2.aCells[1].sValue) ; 
        if ( x == 0 ) { 
            // level 2,  column 3,  Album 
            x =[3].sValue, oRow2.aCells[3].sValue) ; 
            if ( x == 0) { 
                // level 3, column 4,  Track Number 
                x =[4].sValue, oRow2.aCells[4].sValue) ; 
        return x ; 
    Of course, here I made it fixed and simple.. but you can use the aColumns array to determine the columns index by their names, to let it more reliable, if you ever add or change the columns creation order some day.
    Also , you could use peDataType as well to determine which compare Function should be used. They are all pre-defined in object.

    Enjoy !
    Attached Files Attached Files
    Samuel Pizarro

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts