Loading ...
Sorry, an error occurred while loading the content.

Advanced Sorting in DataTable

Expand Messages
  • annie
    Hi all, I have a question about the advanced sorting you can have in DataTable ( http://developer.yahoo.com/yui/datatable/#advancedsort ). I have two columns,
    Message 1 of 7 , Dec 5, 2008
    • 0 Attachment
      Hi all,

      I have a question about the advanced sorting you can have in DataTable (
      http://developer.yahoo.com/yui/datatable/#advancedsort ). I have two columns, artist
      and album. I want to sort by artist and then album. When artist is in ascending order,
      album is too. But when the artist is in descending order, it seems that no matter how I
      configure the album sort, it won't display in ascending order by album.

      For example, when artist is in descending order, I want to see:

      Weezer | Blue Album
      Weezer | Green Album
      Weezer | Red Album
      The Offspring | Americana
      The Offspring | Ixnay on the Hombre
      The Offspring | The Offspring
      Nirvana | Bleach
      Nirvana | In Utero
      Nirvana | Nevermind
      Green Day | American Idiot
      Green Day | Dookie
      Green Day | Insomniac

      But what I really see is:

      Weezer | Red Album
      Weezer | Green Album
      Weezer | Blue Album
      The Offspring | The Offspring
      The Offspring | Ixnay on the Hombre
      The Offspring | Americana
      Nirvana | Nevermind
      Nirvana | In Utero |
      Nirvana | Bleach
      Green Day | Insomniac
      Green Day | Dookie
      Green Day | American Idiot


      I've tried the following with no luck in the album part of my sort function:

      // If states are equal, then compare by album
      return (compState !== 0) ? compState : comp(a.getData("album"), b.getData("album"),
      false);

      [screenshots -
      artist ASC: http://i38.tinypic.com/2ewpqac.png - correct
      artist DESC: http://i37.tinypic.com/29upqjc.png - incorrect ]

      // If states are equal, then compare by album
      return (compState !== 0) ? compState : comp(a.getData("album"), b.getData("album"),
      desc);

      [screenshots -
      artist ASC: http://i37.tinypic.com/1zb9w74.png - correct
      artist DESC: http://i33.tinypic.com/16gxrns.png - incorrect ]

      // If states are equal, then compare by album
      return (compState !== 0) ? compState : comp(a.getData("album"), b.getData("album"),
      true);

      [screenshots -
      artist ASC: http://i34.tinypic.com/66j0uh.png - incorrect
      artist DESC: http://i37.tinypic.com/u3pg7.png - correct ]


      Below is my full code. Any ideas? It looks like I want the bool to be false when artist is ASC
      and true when artist is DESC.

      Thanks,
      Annie


      /**
      @import "http://yui.yahooapis.com/combo?
      2.6.0/build/utilities/utilities.js&2.6.0/build/element/element-beta-
      min.js&2.6.0/build/datasource/datasource-min.js&2.6.0/build/json/json-
      min.js&2.6.0/build/connection/connection-min.js&2.6.0/build/dragdrop/dragdrop-
      min.js&2.6.0/build/datatable/datatable-min.js";
      */

      YAHOO.example.Data = {

      music: [
      {artist: "Weezer", album: "Blue Album"},
      {artist: "Weezer", album: "Red Album"},
      {artist: "Weezer", album: "Green Album"},
      {artist: "Green Day", album: "Dookie"},
      {artist: "Green Day", album: "Insomniac"},
      {artist: "Green Day", album: "American Idiot"},
      {artist: "Nirvana", album: "In Utero"},
      {artist: "Nirvana", album: "Bleach"},
      {artist: "Nirvana", album: "Nevermind"},
      {artist: "The Offspring", album: "The Offspring"},
      {artist: "The Offspring", album: "Ixnay on the Hombre"},
      {artist: "The Offspring", album: "Americana"}
      ]
      }


      YAHOO.util.Event.addListener(window, "load", function() {
      YAHOO.example.myContainer = function() {

      // Custom sort handler to sort by artist and then by album
      // where a and b are Record instances to compare
      var sortArtists = function(a, b, desc) {
      // Deal with empty values
      if(!YAHOO.lang.isValue(a)) {
      return (!YAHOO.lang.isValue(b)) ? 0 : 1;
      }
      else if(!YAHOO.lang.isValue(b)) {
      return -1;
      }

      // First compare by artist
      var comp = YAHOO.util.Sort.compare;
      var compState = comp(a.getData("artist"), b.getData("artist"), desc);

      // If states are equal, then compare by album
      return (compState !== 0) ? compState : comp(a.getData("album"),
      b.getData("album"), desc);
      };

      var myColumnDefs = [
      {key:"artist", label:"Artist", parser:"string", formatter:"string", sortable:true,
      resizeable:true, sortOptions:{sortFunction:sortArtists}, width:100},
      {key:"album", label:"Album", parser:"string", formatter:"string", sortable:false,
      resizeable:true, width:100}
      ];

      var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.music);
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      myDataSource.responseSchema = {
      fields: ["artist", "album"]
      };


      var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs,
      myDataSource);

      // Enable row highlighting
      myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
      myDataTable.subscribe("rowMouseoutEvent",
      myDataTable.onEventUnhighlightRow);

      return {
      oDS: myDataSource,
      oDT: myDataTable
      };
      }();
      });
    • Satyam
      You can t provide the sorting direction from within the function, only whether one is greater than or less than the other so the only alternative I can think
      Message 2 of 7 , Dec 6, 2008
      • 0 Attachment
        You can't provide the sorting direction from within the function, only
        whether one is greater than or less than the other so the only
        alternative I can think of is to lie about it, something like;

        var dir = this.get('sortedBy').dir;
        if (dir == 'asc') {

        return (compState !== 0) ? compState : comp(a.getData("album"), b.getData("album"),
        } else {

        return (compState !== 0) ? compState : comp(b.getData("album"), a.getData("album"),

        }

        Notice the a and b are reversed in the second one. BTW, dir won't be
        'asc' or 'desc' but either of a couple of constants defined somewhere.

        Satyam

        annie wrote:
        > Hi all,
        >
        > I have a question about the advanced sorting you can have in DataTable (
        > http://developer.yahoo.com/yui/datatable/#advancedsort ). I have two columns, artist
        > and album. I want to sort by artist and then album. When artist is in ascending order,
        > album is too. But when the artist is in descending order, it seems that no matter how I
        > configure the album sort, it won't display in ascending order by album.
        >
        > For example, when artist is in descending order, I want to see:
        >
        > Weezer | Blue Album
        > Weezer | Green Album
        > Weezer | Red Album
        > The Offspring | Americana
        > The Offspring | Ixnay on the Hombre
        > The Offspring | The Offspring
        > Nirvana | Bleach
        > Nirvana | In Utero
        > Nirvana | Nevermind
        > Green Day | American Idiot
        > Green Day | Dookie
        > Green Day | Insomniac
        >
        > But what I really see is:
        >
        > Weezer | Red Album
        > Weezer | Green Album
        > Weezer | Blue Album
        > The Offspring | The Offspring
        > The Offspring | Ixnay on the Hombre
        > The Offspring | Americana
        > Nirvana | Nevermind
        > Nirvana | In Utero |
        > Nirvana | Bleach
        > Green Day | Insomniac
        > Green Day | Dookie
        > Green Day | American Idiot
        >
        >
        > I've tried the following with no luck in the album part of my sort function:
        >
        > // If states are equal, then compare by album
        > return (compState !== 0) ? compState : comp(a.getData("album"), b.getData("album"),
        > false);
        >
        > [screenshots -
        > artist ASC: http://i38.tinypic.com/2ewpqac.png - correct
        > artist DESC: http://i37.tinypic.com/29upqjc.png - incorrect ]
        >
        > // If states are equal, then compare by album
        > return (compState !== 0) ? compState : comp(a.getData("album"), b.getData("album"),
        > desc);
        >
        > [screenshots -
        > artist ASC: http://i37.tinypic.com/1zb9w74.png - correct
        > artist DESC: http://i33.tinypic.com/16gxrns.png - incorrect ]
        >
        > // If states are equal, then compare by album
        > return (compState !== 0) ? compState : comp(a.getData("album"), b.getData("album"),
        > true);
        >
        > [screenshots -
        > artist ASC: http://i34.tinypic.com/66j0uh.png - incorrect
        > artist DESC: http://i37.tinypic.com/u3pg7.png - correct ]
        >
        >
        > Below is my full code. Any ideas? It looks like I want the bool to be false when artist is ASC
        > and true when artist is DESC.
        >
        > Thanks,
        > Annie
        >
        >
        > /**
        > @import "http://yui.yahooapis.com/combo?
        > 2.6.0/build/utilities/utilities.js&2.6.0/build/element/element-beta-
        > min.js&2.6.0/build/datasource/datasource-min.js&2.6.0/build/json/json-
        > min.js&2.6.0/build/connection/connection-min.js&2.6.0/build/dragdrop/dragdrop-
        > min.js&2.6.0/build/datatable/datatable-min.js";
        > */
        >
        > YAHOO.example.Data = {
        >
        > music: [
        > {artist: "Weezer", album: "Blue Album"},
        > {artist: "Weezer", album: "Red Album"},
        > {artist: "Weezer", album: "Green Album"},
        > {artist: "Green Day", album: "Dookie"},
        > {artist: "Green Day", album: "Insomniac"},
        > {artist: "Green Day", album: "American Idiot"},
        > {artist: "Nirvana", album: "In Utero"},
        > {artist: "Nirvana", album: "Bleach"},
        > {artist: "Nirvana", album: "Nevermind"},
        > {artist: "The Offspring", album: "The Offspring"},
        > {artist: "The Offspring", album: "Ixnay on the Hombre"},
        > {artist: "The Offspring", album: "Americana"}
        > ]
        > }
        >
        >
        > YAHOO.util.Event.addListener(window, "load", function() {
        > YAHOO.example.myContainer = function() {
        >
        > // Custom sort handler to sort by artist and then by album
        > // where a and b are Record instances to compare
        > var sortArtists = function(a, b, desc) {
        > // Deal with empty values
        > if(!YAHOO.lang.isValue(a)) {
        > return (!YAHOO.lang.isValue(b)) ? 0 : 1;
        > }
        > else if(!YAHOO.lang.isValue(b)) {
        > return -1;
        > }
        >
        > // First compare by artist
        > var comp = YAHOO.util.Sort.compare;
        > var compState = comp(a.getData("artist"), b.getData("artist"), desc);
        >
        > // If states are equal, then compare by album
        > return (compState !== 0) ? compState : comp(a.getData("album"),
        > b.getData("album"), desc);
        > };
        >
        > var myColumnDefs = [
        > {key:"artist", label:"Artist", parser:"string", formatter:"string", sortable:true,
        > resizeable:true, sortOptions:{sortFunction:sortArtists}, width:100},
        > {key:"album", label:"Album", parser:"string", formatter:"string", sortable:false,
        > resizeable:true, width:100}
        > ];
        >
        > var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.music);
        > myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        > myDataSource.responseSchema = {
        > fields: ["artist", "album"]
        > };
        >
        >
        > var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs,
        > myDataSource);
        >
        > // Enable row highlighting
        > myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
        > myDataTable.subscribe("rowMouseoutEvent",
        > myDataTable.onEventUnhighlightRow);
        >
        > return {
        > oDS: myDataSource,
        > oDT: myDataTable
        > };
        > }();
        > });
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - http://www.avg.com
        > Version: 8.0.176 / Virus Database: 270.9.14/1832 - Release Date: 05/12/2008 9:57
        >
        >
      • Annie Lausier
        Thanks for the help Satyam. I tried hashing it out but I don t think it s going to work. It looks like the sort function only gets run once, on the first
        Message 3 of 7 , Dec 8, 2008
        • 0 Attachment
          Thanks for the help Satyam.  I tried hashing it out but I don't think it's going to work.  It looks like the sort function only gets run once, on the first sort, and on the next sort it just reverses the result (if I put alerts in the if/else statements, they only show up on initial sort and not subsequent ones).

          FYI, I couldn't do get('sortedBy').dir for a specific column (it's listed in the API under DataTable, not column) but was able to get a direction by this...

          var dir = myDataTable.getColumnSortDir(myDataTable.getColumn('artist'));

          and the direction constants are 'yui-dt-asc' and 'yui-dt-desc'.  I know you were throwing code together so thanks for pointing me in the right direction.

          Would really love to see nested/child rows at some point in DataTable!

          -Annie


          From: Satyam <satyam@...>
          To: ydn-javascript@yahoogroups.com
          Sent: Saturday, December 6, 2008 11:14:50 AM
          Subject: Re: [ydn-javascript] Advanced Sorting in DataTable

          You can't provide the sorting direction from within the function, only
          whether one is greater than or less than the other so the only
          alternative I can think of is to lie about it, something like;

          var dir = this.get('sortedBy' ).dir;
          if (dir == 'asc') {

          return (compState !== 0) ? compState : comp(a.getData( "album"), b.getData("album" ),
          } else {

          return (compState !== 0) ? compState : comp(b.getData( "album"), a.getData("album" ),

          }

          Notice the a and b are reversed in the second one. BTW, dir won't be
          'asc' or 'desc' but either of a couple of constants defined somewhere.

          Satyam

          annie wrote:

          > Hi all,
          >
          > I have a question about the advanced sorting you can have in DataTable (
          > http://developer. yahoo.com/ yui/datatable/ #advancedsort ). I have two columns, artist
          > and album. I want to sort by artist and then album. When artist is in ascending order,
          > album is too. But when the artist is in descending order, it seems that no matter how I
          > configure the album sort, it won't display in ascending order by album.
          >
          > For example, when artist is in descending order, I want to see:
          >
          > Weezer | Blue Album
          > Weezer | Green Album
          > Weezer | Red Album
          > The Offspring | Americana
          > The Offspring | Ixnay on the Hombre
          > The Offspring | The Offspring
          > Nirvana | Bleach
          > Nirvana | In Utero
          > Nirvana | Nevermind
          > Green Day | American Idiot
          > Green Day | Dookie
          > Green Day | Insomniac
          >
          > But what I really see is:
          >
          > Weezer | Red Album
          > Weezer | Green Album
          > Weezer | Blue Album
          > The Offspring | The Offspring
          > The Offspring | Ixnay on the Hombre
          > The Offspring | Americana
          > Nirvana | Nevermind
          > Nirvana | In Utero |
          > Nirvana | Bleach
          > Green Day | Insomniac
          > Green Day | Dookie
          > Green Day | American Idiot
          >
          >
          > I've tried the following with no luck in the album part of my sort function:
          >
          > // If states are equal, then compare by album
          > return (compState !== 0) ? compState : comp(a.getData( "album"), b.getData("album" ),
          > false);
          >
          > [screenshots -
          > artist ASC: http://i38.tinypic. com/2ewpqac. png - correct
          > artist DESC: http://i37.tinypic. com/29upqjc. png - incorrect ]
          >
          > // If states are equal, then compare by album
          > return (compState !== 0) ? compState : comp(a.getData( "album"), b.getData("album" ),
          > desc);
          >
          > [screenshots -
          > artist ASC: http://i37.tinypic. com/1zb9w74. png - correct
          > artist DESC: http://i33.tinypic. com/16gxrns. png - incorrect ]
          >
          > // If states are equal, then compare by album
          > return (compState !== 0) ? compState : comp(a.getData( "album"), b.getData("album" ),
          > true);
          >
          > [screenshots -
          > artist ASC: http://i34.tinypic. com/66j0uh. png - incorrect
          > artist DESC: http://i37.tinypic. com/u3pg7. png - correct ]
          >
          >
          > Below is my full code. Any ideas? It looks like I want the bool to be false when artist is ASC
          > and true when artist is DESC.
          >
          > Thanks,
          > Annie
          >
          >
          > /**
          > @import "http://yui.yahooapi s.com/combo?
          > 2.6.0/build/ utilities/ utilities. js&2.6.0/ build/element/ element-beta-
          > min.js&2.6.0/ build/datasource /datasource- min.js&2. 6.0/build/ json/json-
          > min.js&2.6.0/ build/connection /connection- min.js&2. 6.0/build/ dragdrop/ dragdrop-
          > min.js&2.6.0/ build/datatable/ datatable- min.js";
          > */
          >
          > YAHOO.example. Data = {
          >
          > music: [
          > {artist: "Weezer", album: "Blue Album"},
          > {artist: "Weezer", album: "Red Album"},
          > {artist: "Weezer", album: "Green Album"},
          > {artist: "Green Day", album: "Dookie"},
          > {artist: "Green Day", album: "Insomniac"} ,
          > {artist: "Green Day", album: "American Idiot"},
          > {artist: "Nirvana", album: "In Utero"},
          > {artist: "Nirvana", album: "Bleach"},
          > {artist: "Nirvana", album: "Nevermind"} ,
          > {artist: "The Offspring", album: "The Offspring"},
          > {artist: "The Offspring", album: "Ixnay on the Hombre"},
          > {artist: "The Offspring", album: "Americana"}
          > ]
          > }
          >
          >
          > YAHOO.util.Event. addListener( window, "load", function() {
          > YAHOO.example. myContainer = function() {
          >
          > // Custom sort handler to sort by artist and then by album
          > // where a and b are Record instances to compare
          > var sortArtists = function(a, b, desc) {
          > // Deal with empty values
          > if(!YAHOO.lang. isValue(a) ) {
          > return (!YAHOO.lang. isValue(b) ) ? 0 : 1;
          > }
          > else if(!YAHOO.lang. isValue(b) ) {
          > return -1;
          > }
          >
          > // First compare by artist
          > var comp = YAHOO.util.Sort. compare;
          > var compState = comp(a.getData( "artist") , b.getData("artist" ), desc);
          >
          > // If states are equal, then compare by album
          > return (compState !== 0) ? compState : comp(a.getData( "album"),
          > b.getData("album" ), desc);
          > };
          >
          > var myColumnDefs = [
          > {key:"artist" , label:"Artist" , parser:"string" , formatter:"string" , sortable:true,
          > resizeable:true, sortOptions: {sortFunction: sortArtists} , width:100},
          > {key:"album" , label:"Album" , parser:"string" , formatter:"string" , sortable:false,
          > resizeable:true, width:100}
          > ];
          >
          > var myDataSource = new YAHOO.util.DataSour ce(YAHOO. example.Data. music);
          > myDataSource. responseType = YAHOO.util.DataSour ce.TYPE_JSARRAY;
          > myDataSource. responseSchema = {
          > fields: ["artist", "album"]
          > };
          >
          >
          > var myDataTable = new YAHOO.widget. DataTable( "myContainer" , myColumnDefs,
          > myDataSource) ;
          >
          > // Enable row highlighting
          > myDataTable. subscribe( "rowMouseoverEve nt", myDataTable. onEventHighlight Row);
          > myDataTable. subscribe( "rowMouseoutEven t",
          > myDataTable. onEventUnhighlig htRow);
          >
          > return {
          > oDS: myDataSource,
          > oDT: myDataTable
          > };
          > }();
          > });
          >
          >
          > ------------ --------- --------- ------
          >
          > Yahoo! Groups Links
          >
          >
          >
          > ------------ --------- --------- --------- --------- --------- -
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - http://www.avg. com
          > Version: 8.0.176 / Virus Database: 270.9.14/1832 - Release Date: 05/12/2008 9:57
          >
          >

        • Satyam
          Something like this: http://www.satyam.com.ar/yui/#grouping Satyam
          Message 4 of 7 , Dec 9, 2008
          • 0 Attachment
            Something like this:

            http://www.satyam.com.ar/yui/#grouping

            Satyam



            Annie Lausier wrote:
            > Thanks for the help Satyam. I tried hashing it out but I don't think
            > it's going to work. It looks like the sort function only gets run
            > once, on the first sort, and on the next sort it just reverses the
            > result (if I put alerts in the if/else statements, they only show up
            > on initial sort and not subsequent ones).
            >
            > FYI, I couldn't do get('sortedBy').dir for a specific column (it's
            > listed in the API under DataTable, not column) but was able to get a
            > direction by this...
            >
            > var dir = myDataTable.getColumnSortDir(myDataTable.getColumn('artist'));
            >
            > and the direction constants are 'yui-dt-asc' and 'yui-dt-desc'. I
            > know you were throwing code together so thanks for pointing me in the
            > right direction.
            >
            > Would really love to see nested/child rows at some point in DataTable!
            >
            > -Annie
            >
            > ------------------------------------------------------------------------
            > *From:* Satyam <satyam@...>
            > *To:* ydn-javascript@yahoogroups.com
            > *Sent:* Saturday, December 6, 2008 11:14:50 AM
            > *Subject:* Re: [ydn-javascript] Advanced Sorting in DataTable
            >
            > You can't provide the sorting direction from within the function, only
            > whether one is greater than or less than the other so the only
            > alternative I can think of is to lie about it, something like;
            >
            > var dir = this.get('sortedBy' ).dir;
            > if (dir == 'asc') {
            >
            > return (compState !== 0) ? compState : comp(a.getData( "album"),
            > b.getData("album" ),
            > } else {
            >
            > return (compState !== 0) ? compState : comp(b.getData( "album"),
            > a.getData("album" ),
            >
            > }
            >
            > Notice the a and b are reversed in the second one. BTW, dir won't be
            > 'asc' or 'desc' but either of a couple of constants defined somewhere.
            >
            > Satyam
            >
            > annie wrote:
            > > Hi all,
            > >
            > > I have a question about the advanced sorting you can have in
            > DataTable (
            > > http://developer. yahoo.com/ yui/datatable/ #advancedsort
            > <http://developer.yahoo.com/yui/datatable/#advancedsort> ). I have two
            > columns, artist
            > > and album. I want to sort by artist and then album. When artist is
            > in ascending order,
            > > album is too. But when the artist is in descending order, it seems
            > that no matter how I
            > > configure the album sort, it won't display in ascending order by album.
            > >
            > > For example, when artist is in descending order, I want to see:
            > >
            > > Weezer | Blue Album
            > > Weezer | Green Album
            > > Weezer | Red Album
            > > The Offspring | Americana
            > > The Offspring | Ixnay on the Hombre
            > > The Offspring | The Offspring
            > > Nirvana | Bleach
            > > Nirvana | In Utero
            > > Nirvana | Nevermind
            > > Green Day | American Idiot
            > > Green Day | Dookie
            > > Green Day | Insomniac
            > >
            > > But what I really see is:
            > >
            > > Weezer | Red Album
            > > Weezer | Green Album
            > > Weezer | Blue Album
            > > The Offspring | The Offspring
            > > The Offspring | Ixnay on the Hombre
            > > The Offspring | Americana
            > > Nirvana | Nevermind
            > > Nirvana | In Utero |
            > > Nirvana | Bleach
            > > Green Day | Insomniac
            > > Green Day | Dookie
            > > Green Day | American Idiot
            > >
            > >
            > > I've tried the following with no luck in the album part of my sort
            > function:
            > >
            > > // If states are equal, then compare by album
            > > return (compState !== 0) ? compState : comp(a.getData( "album"),
            > b.getData("album" ),
            > > false);
            > >
            > > [screenshots -
            > > artist ASC: http://i38.tinypic. com/2ewpqac. png
            > <http://i38.tinypic.com/2ewpqac.png> - correct
            > > artist DESC: http://i37.tinypic. com/29upqjc. png
            > <http://i37.tinypic.com/29upqjc.png> - incorrect ]
            > >
            > > // If states are equal, then compare by album
            > > return (compState !== 0) ? compState : comp(a.getData( "album"),
            > b.getData("album" ),
            > > desc);
            > >
            > > [screenshots -
            > > artist ASC: http://i37.tinypic. com/1zb9w74. png
            > <http://i37.tinypic.com/1zb9w74.png> - correct
            > > artist DESC: http://i33.tinypic. com/16gxrns. png
            > <http://i33.tinypic.com/16gxrns.png> - incorrect ]
            > >
            > > // If states are equal, then compare by album
            > > return (compState !== 0) ? compState : comp(a.getData( "album"),
            > b.getData("album" ),
            > > true);
            > >
            > > [screenshots -
            > > artist ASC: http://i34.tinypic. com/66j0uh. png
            > <http://i34.tinypic.com/66j0uh.png> - incorrect
            > > artist DESC: http://i37.tinypic. com/u3pg7. png
            > <http://i37.tinypic.com/u3pg7.png> - correct ]
            > >
            > >
            > > Below is my full code. Any ideas? It looks like I want the bool to
            > be false when artist is ASC
            > > and true when artist is DESC.
            > >
            > > Thanks,
            > > Annie
            > >
            > >
            > > /**
            > > @import "http://yui.yahooapi s.com/combo?
            > <http://yui.yahooapis.com/combo?>
            > > 2.6.0/build/ utilities/ utilities. js&2.6.0/ build/element/
            > element-beta-
            > > min.js&2.6.0/ build/datasource /datasource- min.js&2. 6.0/build/
            > json/json-
            > > min.js&2.6.0/ build/connection /connection- min.js&2. 6.0/build/
            > dragdrop/ dragdrop-
            > > min.js&2.6.0/ build/datatable/ datatable- min.js";
            > > */
            > >
            > > YAHOO.example. Data = {
            > >
            > > music: [
            > > {artist: "Weezer", album: "Blue Album"},
            > > {artist: "Weezer", album: "Red Album"},
            > > {artist: "Weezer", album: "Green Album"},
            > > {artist: "Green Day", album: "Dookie"},
            > > {artist: "Green Day", album: "Insomniac"} ,
            > > {artist: "Green Day", album: "American Idiot"},
            > > {artist: "Nirvana", album: "In Utero"},
            > > {artist: "Nirvana", album: "Bleach"},
            > > {artist: "Nirvana", album: "Nevermind"} ,
            > > {artist: "The Offspring", album: "The Offspring"},
            > > {artist: "The Offspring", album: "Ixnay on the Hombre"},
            > > {artist: "The Offspring", album: "Americana"}
            > > ]
            > > }
            > >
            > >
            > > YAHOO.util.Event. addListener( window, "load", function() {
            > > YAHOO.example. myContainer = function() {
            > >
            > > // Custom sort handler to sort by artist and then by album
            > > // where a and b are Record instances to compare
            > > var sortArtists = function(a, b, desc) {
            > > // Deal with empty values
            > > if(!YAHOO.lang. isValue(a) ) {
            > > return (!YAHOO.lang. isValue(b) ) ? 0 : 1;
            > > }
            > > else if(!YAHOO.lang. isValue(b) ) {
            > > return -1;
            > > }
            > >
            > > // First compare by artist
            > > var comp = YAHOO.util.Sort. compare;
            > > var compState = comp(a.getData( "artist") , b.getData("artist" ), desc);
            > >
            > > // If states are equal, then compare by album
            > > return (compState !== 0) ? compState : comp(a.getData( "album"),
            > > b.getData("album" ), desc);
            > > };
            > >
            > > var myColumnDefs = [
            > > {key:"artist" , label:"Artist" , parser:"string" ,
            > formatter:"string" , sortable:true,
            > > resizeable:true, sortOptions: {sortFunction: sortArtists} , width:100},
            > > {key:"album" , label:"Album" , parser:"string" , formatter:"string"
            > , sortable:false,
            > > resizeable:true, width:100}
            > > ];
            > >
            > > var myDataSource = new YAHOO.util.DataSour ce(YAHOO. example.Data.
            > music);
            > > myDataSource. responseType = YAHOO.util.DataSour ce.TYPE_JSARRAY;
            > > myDataSource. responseSchema = {
            > > fields: ["artist", "album"]
            > > };
            > >
            > >
            > > var myDataTable = new YAHOO.widget. DataTable( "myContainer" ,
            > myColumnDefs,
            > > myDataSource) ;
            > >
            > > // Enable row highlighting
            > > myDataTable. subscribe( "rowMouseoverEve nt", myDataTable.
            > onEventHighlight Row);
            > > myDataTable. subscribe( "rowMouseoutEven t",
            > > myDataTable. onEventUnhighlig htRow);
            > >
            > > return {
            > > oDS: myDataSource,
            > > oDT: myDataTable
            > > };
            > > }();
            > > });
            > >
            > >
            > > ------------ --------- --------- ------
            > >
            > > Yahoo! Groups Links
            > >
            > >
            > >
            > > ------------ --------- --------- --------- --------- --------- -
            > >
            > >
            > > No virus found in this incoming message.
            > > Checked by AVG - http://www.avg. com <http://www.avg.com>
            > > Version: 8.0.176 / Virus Database: 270.9.14/1832 - Release Date:
            > 05/12/2008 9:57
            > >
            > >
            >
            >
            > ------------------------------------------------------------------------
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG - http://www.avg.com
            > Version: 8.0.176 / Virus Database: 270.9.15/1837 - Release Date: 08/12/2008 9:38
            >
            >
          • Annie Lausier
            Yes, grouping like that, but also the ability to specify a parent row and children rows. http://annielausier.com/yui/group.html This will group, but not order
            Message 5 of 7 , Dec 10, 2008
            • 0 Attachment
              Yes, grouping like that, but also the ability to specify a parent row and children rows.

              http://annielausier.com/yui/group.html

              This will group, but not order (e.g. Weezer - Blue Album always being the parent row for Weezer) when Artist is DESC.

              Thanks,
              Annie


              From: Satyam <satyam@...>
              To: ydn-javascript@yahoogroups.com
              Sent: Tuesday, December 9, 2008 12:19:25 AM
              Subject: Re: [ydn-javascript] Advanced Sorting in DataTable

              Something like this:

              http://www.satyam. com.ar/yui/ #grouping

              Satyam

              Annie Lausier wrote:

              > Thanks for the help Satyam. I tried hashing it out but I don't think
              > it's going to work. It looks like the sort function only gets run
              > once, on the first sort, and on the next sort it just reverses the
              > result (if I put alerts in the if/else statements, they only show up
              > on initial sort and not subsequent ones).
              >
              > FYI, I couldn't do get('sortedBy' ).dir for a specific column (it's
              > listed in the API under DataTable, not column) but was able to get a
              > direction by this...
              >
              > var dir = myDataTable. getColumnSortDir (myDataTable. getColumn( 'artist') );
              >
              > and the direction constants are 'yui-dt-asc' and 'yui-dt-desc' . I
              > know you were throwing code together so thanks for pointing me in the
              > right direction.
              >
              > Would really love to see nested/child rows at some point in DataTable!
              >
              > -Annie
              >
              > ------------ --------- --------- --------- --------- --------- -
              > *From:* Satyam <satyam@satyam. com.ar>
              > *To:* ydn-javascript@ yahoogroups. com
              > *Sent:* Saturday, December 6, 2008 11:14:50 AM
              > *Subject:* Re: [ydn-javascript] Advanced Sorting in DataTable
              >
              > You can't provide the sorting direction from within the function, only
              > whether one is greater than or less than the other so the only
              > alternative I can think of is to lie about it, something like;
              >
              > var dir = this.get('sortedBy' ).dir;
              > if (dir == 'asc') {
              >
              > return (compState !== 0) ? compState : comp(a.getData( "album"),
              > b.getData("album" ),
              > } else {
              >
              > return (compState !== 0) ? compState : comp(b.getData( "album"),
              > a.getData("album" ),
              >
              > }
              >
              > Notice the a and b are reversed in the second one. BTW, dir won't be
              > 'asc' or 'desc' but either of a couple of constants defined somewhere.
              >
              > Satyam
              >
              > annie wrote:
              > > Hi all,
              > >
              > > I have a question about the advanced sorting you can have in
              > DataTable (
              > > http://developer. yahoo.com/ yui/datatable/ #advancedsort
              > <http://developer. yahoo.com/ yui/datatable/ #advancedsort> ). I have two
              > columns, artist
              > > and album. I want to sort by artist and then album. When artist is
              > in ascending order,
              > > album is too. But when the artist is in descending order, it seems
              > that no matter how I
              > > configure the album sort, it won't display in ascending order by album.
              > >
              > > For example, when artist is in descending order, I want to see:
              > >
              > > Weezer | Blue Album
              > > Weezer | Green Album
              > > Weezer | Red Album
              > > The Offspring | Americana
              > > The Offspring | Ixnay on the Hombre
              > > The Offspring | The Offspring
              > > Nirvana | Bleach
              > > Nirvana | In Utero
              > > Nirvana | Nevermind
              > > Green Day | American Idiot
              > > Green Day | Dookie
              > > Green Day | Insomniac
              > >
              > > But what I really see is:
              > >
              > > Weezer | Red Album
              > > Weezer | Green Album
              > > Weezer | Blue Album
              > > The Offspring | The Offspring
              > > The Offspring | Ixnay on the Hombre
              > > The Offspring | Americana
              > > Nirvana | Nevermind
              > > Nirvana | In Utero |
              > > Nirvana | Bleach
              > > Green Day | Insomniac
              > > Green Day | Dookie
              > > Green Day | American Idiot
              > >
              > >
              > > I've tried the following with no luck in the album part of my sort
              > function:
              > >
              > > // If states are equal, then compare by album
              > > return (compState !== 0) ? compState : comp(a.getData( "album"),
              > b.getData("album" ),
              > > false);
              > >
              > > [screenshots -
              > > artist ASC: http://i38.tinypic. com/2ewpqac. png
              > <http://i38.tinypic. com/2ewpqac. png> - correct
              > > artist DESC: http://i37.tinypic. com/29upqjc. png
              > <http://i37.tinypic. com/29upqjc. png> - incorrect ]
              > >
              > > // If states are equal, then compare by album
              > > return (compState !== 0) ? compState : comp(a.getData( "album"),
              > b.getData("album" ),
              > > desc);
              > >
              > > [screenshots -
              > > artist ASC: http://i37.tinypic. com/1zb9w74. png
              > <http://i37.tinypic. com/1zb9w74. png> - correct
              > > artist DESC: http://i33.tinypic. com/16gxrns. png
              > <http://i33.tinypic. com/16gxrns. png> - incorrect ]
              > >
              > > // If states are equal, then compare by album
              > > return (compState !== 0) ? compState : comp(a.getData( "album"),
              > b.getData("album" ),
              > > true);
              > >
              > > [screenshots -
              > > artist ASC: http://i34.tinypic. com/66j0uh. png
              > <http://i34.tinypic. com/66j0uh. png> - incorrect
              > > artist DESC: http://i37.tinypic. com/u3pg7. png
              > <http://i37.tinypic. com/u3pg7. png> - correct ]
              > >
              > >
              > > Below is my full code. Any ideas? It looks like I want the bool to
              > be false when artist is ASC
              > > and true when artist is DESC.
              > >
              > > Thanks,
              > > Annie
              > >
              > >
              > > /**
              > > @import "http://yui.yahooapi s.com/combo?
              > <http://yui.yahooapi s.com/combo?>
              > > 2.6.0/build/ utilities/ utilities. js&2.6.0/ build/element/
              > element-beta-
              > > min.js&2.6.0/ build/datasource /datasource- min.js&2. 6.0/build/
              > json/json-
              > > min.js&2.6.0/ build/connection /connection- min.js&2. 6.0/build/
              > dragdrop/ dragdrop-
              > > min.js&2.6.0/ build/datatable/ datatable- min.js";
              > > */
              > >
              > > YAHOO.example. Data = {
              > >
              > > music: [
              > > {artist: "Weezer", album: "Blue Album"},
              > > {artist: "Weezer", album: "Red Album"},
              > > {artist: "Weezer", album: "Green Album"},
              > > {artist: "Green Day", album: "Dookie"},
              > > {artist: "Green Day", album: "Insomniac"} ,
              > > {artist: "Green Day", album: "American Idiot"},
              > > {artist: "Nirvana", album: "In Utero"},
              > > {artist: "Nirvana", album: "Bleach"},
              > > {artist: "Nirvana", album: "Nevermind"} ,
              > > {artist: "The Offspring", album: "The Offspring"},
              > > {artist: "The Offspring", album: "Ixnay on the Hombre"},
              > > {artist: "The Offspring", album: "Americana"}
              > > ]
              > > }
              > >
              > >
              > > YAHOO.util.Event. addListener( window, "load", function() {
              > > YAHOO.example. myContainer = function() {
              > >
              > > // Custom sort handler to sort by artist and then by album
              > > // where a and b are Record instances to compare
              > > var sortArtists = function(a, b, desc) {
              > > // Deal with empty values
              > > if(!YAHOO.lang. isValue(a) ) {
              > > return (!YAHOO.lang. isValue(b) ) ? 0 : 1;
              > > }
              > > else if(!YAHOO.lang. isValue(b) ) {
              > > return -1;
              > > }
              > >
              > > // First compare by artist
              > > var comp = YAHOO.util.Sort. compare;
              > > var compState = comp(a.getData( "artist") , b.getData("artist" ), desc);
              > >
              > > // If states are equal, then compare by album
              > > return (compState !== 0) ? compState : comp(a.getData( "album"),
              > > b.getData("album" ), desc);
              > > };
              > >
              > > var myColumnDefs = [
              > > {key:"artist" , label:"Artist" , parser:"string" ,
              > formatter:"string" , sortable:true,
              > > resizeable:true, sortOptions: {sortFunction: sortArtists} , width:100},
              > > {key:"album" , label:"Album" , parser:"string" , formatter:"string"
              > , sortable:false,
              > > resizeable:true, width:100}
              > > ];
              > >
              > > var myDataSource = new YAHOO.util.DataSour ce(YAHOO. example.Data.
              > music);
              > > myDataSource. responseType = YAHOO.util.DataSour ce.TYPE_JSARRAY;
              > > myDataSource. responseSchema = {
              > > fields: ["artist", "album"]
              > > };
              > >
              > >
              > > var myDataTable = new YAHOO.widget. DataTable( "myContainer" ,
              > myColumnDefs,
              > > myDataSource) ;
              > >
              > > // Enable row highlighting
              > > myDataTable. subscribe( "rowMouseoverEve nt", myDataTable.
              > onEventHighlight Row);
              > > myDataTable. subscribe( "rowMouseoutEven t",
              > > myDataTable. onEventUnhighlig htRow);
              > >
              > > return {
              > > oDS: myDataSource,
              > > oDT: myDataTable
              > > };
              > > }();
              > > });
              > >
              > >
              > > ------------ --------- --------- ------
              > >
              > > Yahoo! Groups Links
              > >
              > >
              > >
              > > ------------ --------- --------- --------- --------- --------- -
              > >
              > >
              > > No virus found in this incoming message.
              > > Checked by AVG - http://www.avg. com <http://www.avg. com>
              > > Version: 8.0.176 / Virus Database: 270.9.14/1832 - Release Date:
              > 05/12/2008 9:57
              > >
              > >
              >
              >
              > ------------ --------- --------- --------- --------- --------- -
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - http://www.avg. com
              > Version: 8.0.176 / Virus Database: 270.9.15/1837 - Release Date: 08/12/2008 9:38
              >
              >

            • Satyam
              The code in the example will prevent repeated values in the same column to show. You tell it which columns should be grouped. It does not sort at all nor
              Message 6 of 7 , Dec 10, 2008
              • 0 Attachment
                The code in the example will prevent repeated values in the same column
                to show. You tell it which columns should be grouped. It does not sort
                at all nor does it prevent you from doing so. The function that
                generates values provides repeated values, but they are not sorted. You
                can still provide the data sorted whichever way you want, or you can use
                sortColumn to have it your way.

                Satyam


                Annie Lausier wrote:
                > Yes, grouping like that, but also the ability to specify a parent row
                > and children rows.
                >
                > http://annielausier.com/yui/group.html
                >
                > This will group, but not order (e.g. Weezer - Blue Album always being
                > the parent row for Weezer) when Artist is DESC.
                >
                > Thanks,
                > Annie
                >
                > ------------------------------------------------------------------------
                > *From:* Satyam <satyam@...>
                > *To:* ydn-javascript@yahoogroups.com
                > *Sent:* Tuesday, December 9, 2008 12:19:25 AM
                > *Subject:* Re: [ydn-javascript] Advanced Sorting in DataTable
                >
                > Something like this:
                >
                > http://www.satyam. com.ar/yui/ #grouping
                > <http://www.satyam.com.ar/yui/#grouping>
                >
                > Satyam
                >
                > Annie Lausier wrote:
                > > Thanks for the help Satyam. I tried hashing it out but I don't think
                > > it's going to work. It looks like the sort function only gets run
                > > once, on the first sort, and on the next sort it just reverses the
                > > result (if I put alerts in the if/else statements, they only show up
                > > on initial sort and not subsequent ones).
                > >
                > > FYI, I couldn't do get('sortedBy' ).dir for a specific column (it's
                > > listed in the API under DataTable, not column) but was able to get a
                > > direction by this...
                > >
                > > var dir = myDataTable. getColumnSortDir (myDataTable. getColumn(
                > 'artist') );
                > >
                > > and the direction constants are 'yui-dt-asc' and 'yui-dt-desc' . I
                > > know you were throwing code together so thanks for pointing me in the
                > > right direction.
                > >
                > > Would really love to see nested/child rows at some point in DataTable!
                > >
                > > -Annie
                > >
                > > ------------ --------- --------- --------- --------- --------- -
                > > *From:* Satyam <satyam@satyam. com.ar <mailto:satyam%40satyam.com.ar>>
                > > *To:* ydn-javascript@ yahoogroups. com
                > <mailto:ydn-javascript%40yahoogroups.com>
                > > *Sent:* Saturday, December 6, 2008 11:14:50 AM
                > > *Subject:* Re: [ydn-javascript] Advanced Sorting in DataTable
                > >
                > > You can't provide the sorting direction from within the function, only
                > > whether one is greater than or less than the other so the only
                > > alternative I can think of is to lie about it, something like;
                > >
                > > var dir = this.get('sortedBy' ).dir;
                > > if (dir == 'asc') {
                > >
                > > return (compState !== 0) ? compState : comp(a.getData( "album"),
                > > b.getData("album" ),
                > > } else {
                > >
                > > return (compState !== 0) ? compState : comp(b.getData( "album"),
                > > a.getData("album" ),
                > >
                > > }
                > >
                > > Notice the a and b are reversed in the second one. BTW, dir won't be
                > > 'asc' or 'desc' but either of a couple of constants defined somewhere.
                > >
                > > Satyam
                > >
                > > annie wrote:
                > > > Hi all,
                > > >
                > > > I have a question about the advanced sorting you can have in
                > > DataTable (
                > > > http://developer. yahoo.com/ yui/datatable/ #advancedsort
                > > <http://developer. yahoo.com/ yui/datatable/ #advancedsort
                > <http://developer.yahoo.com/yui/datatable/#advancedsort>> ). I have two
                > > columns, artist
                > > > and album. I want to sort by artist and then album. When artist is
                > > in ascending order,
                > > > album is too. But when the artist is in descending order, it seems
                > > that no matter how I
                > > > configure the album sort, it won't display in ascending order by
                > album.
                > > >
                > > > For example, when artist is in descending order, I want to see:
                > > >
                > > > Weezer | Blue Album
                > > > Weezer | Green Album
                > > > Weezer | Red Album
                > > > The Offspring | Americana
                > > > The Offspring | Ixnay on the Hombre
                > > > The Offspring | The Offspring
                > > > Nirvana | Bleach
                > > > Nirvana | In Utero
                > > > Nirvana | Nevermind
                > > > Green Day | American Idiot
                > > > Green Day | Dookie
                > > > Green Day | Insomniac
                > > >
                > > > But what I really see is:
                > > >
                > > > Weezer | Red Album
                > > > Weezer | Green Album
                > > > Weezer | Blue Album
                > > > The Offspring | The Offspring
                > > > The Offspring | Ixnay on the Hombre
                > > > The Offspring | Americana
                > > > Nirvana | Nevermind
                > > > Nirvana | In Utero |
                > > > Nirvana | Bleach
                > > > Green Day | Insomniac
                > > > Green Day | Dookie
                > > > Green Day | American Idiot
                > > >
                > > >
                > > > I've tried the following with no luck in the album part of my sort
                > > function:
                > > >
                > > > // If states are equal, then compare by album
                > > > return (compState !== 0) ? compState : comp(a.getData( "album"),
                > > b.getData("album" ),
                > > > false);
                > > >
                > > > [screenshots -
                > > > artist ASC: http://i38.tinypic. com/2ewpqac. png
                > > <http://i38.tinypic. com/2ewpqac. png
                > <http://i38.tinypic.com/2ewpqac.png>> - correct
                > > > artist DESC: http://i37.tinypic. com/29upqjc. png
                > > <http://i37.tinypic. com/29upqjc. png
                > <http://i37.tinypic.com/29upqjc.png>> - incorrect ]
                > > >
                > > > // If states are equal, then compare by album
                > > > return (compState !== 0) ? compState : comp(a.getData( "album"),
                > > b.getData("album" ),
                > > > desc);
                > > >
                > > > [screenshots -
                > > > artist ASC: http://i37.tinypic. com/1zb9w74. png
                > > <http://i37.tinypic. com/1zb9w74. png
                > <http://i37.tinypic.com/1zb9w74.png>> - correct
                > > > artist DESC: http://i33.tinypic. com/16gxrns. png
                > > <http://i33.tinypic. com/16gxrns. png
                > <http://i33.tinypic.com/16gxrns.png>> - incorrect ]
                > > >
                > > > // If states are equal, then compare by album
                > > > return (compState !== 0) ? compState : comp(a.getData( "album"),
                > > b.getData("album" ),
                > > > true);
                > > >
                > > > [screenshots -
                > > > artist ASC: http://i34.tinypic. com/66j0uh. png
                > > <http://i34.tinypic. com/66j0uh. png
                > <http://i34.tinypic.com/66j0uh.png>> - incorrect
                > > > artist DESC: http://i37.tinypic. com/u3pg7. png
                > > <http://i37.tinypic. com/u3pg7. png
                > <http://i37.tinypic.com/u3pg7.png>> - correct ]
                > > >
                > > >
                > > > Below is my full code. Any ideas? It looks like I want the bool to
                > > be false when artist is ASC
                > > > and true when artist is DESC.
                > > >
                > > > Thanks,
                > > > Annie
                > > >
                > > >
                > > > /**
                > > > @import "http://yui.yahooapi s.com/combo?
                > > <http://yui.yahooapi s.com/combo? <http://yui.yahooapis.com/combo?>>
                > > > 2.6.0/build/ utilities/ utilities. js&2.6.0/ build/element/
                > > element-beta-
                > > > min.js&2.6.0/ build/datasource /datasource- min.js&2. 6.0/build/
                > > json/json-
                > > > min.js&2.6.0/ build/connection /connection- min.js&2. 6.0/build/
                > > dragdrop/ dragdrop-
                > > > min.js&2.6.0/ build/datatable/ datatable- min.js";
                > > > */
                > > >
                > > > YAHOO.example. Data = {
                > > >
                > > > music: [
                > > > {artist: "Weezer", album: "Blue Album"},
                > > > {artist: "Weezer", album: "Red Album"},
                > > > {artist: "Weezer", album: "Green Album"},
                > > > {artist: "Green Day", album: "Dookie"},
                > > > {artist: "Green Day", album: "Insomniac"} ,
                > > > {artist: "Green Day", album: "American Idiot"},
                > > > {artist: "Nirvana", album: "In Utero"},
                > > > {artist: "Nirvana", album: "Bleach"},
                > > > {artist: "Nirvana", album: "Nevermind"} ,
                > > > {artist: "The Offspring", album: "The Offspring"},
                > > > {artist: "The Offspring", album: "Ixnay on the Hombre"},
                > > > {artist: "The Offspring", album: "Americana"}
                > > > ]
                > > > }
                > > >
                > > >
                > > > YAHOO.util.Event. addListener( window, "load", function() {
                > > > YAHOO.example. myContainer = function() {
                > > >
                > > > // Custom sort handler to sort by artist and then by album
                > > > // where a and b are Record instances to compare
                > > > var sortArtists = function(a, b, desc) {
                > > > // Deal with empty values
                > > > if(!YAHOO.lang. isValue(a) ) {
                > > > return (!YAHOO.lang. isValue(b) ) ? 0 : 1;
                > > > }
                > > > else if(!YAHOO.lang. isValue(b) ) {
                > > > return -1;
                > > > }
                > > >
                > > > // First compare by artist
                > > > var comp = YAHOO.util.Sort. compare;
                > > > var compState = comp(a.getData( "artist") , b.getData("artist" ),
                > desc);
                > > >
                > > > // If states are equal, then compare by album
                > > > return (compState !== 0) ? compState : comp(a.getData( "album"),
                > > > b.getData("album" ), desc);
                > > > };
                > > >
                > > > var myColumnDefs = [
                > > > {key:"artist" , label:"Artist" , parser:"string" ,
                > > formatter:"string" , sortable:true,
                > > > resizeable:true, sortOptions: {sortFunction: sortArtists} ,
                > width:100},
                > > > {key:"album" , label:"Album" , parser:"string" , formatter:"string"
                > > , sortable:false,
                > > > resizeable:true, width:100}
                > > > ];
                > > >
                > > > var myDataSource = new YAHOO.util.DataSour ce(YAHOO. example.Data.
                > > music);
                > > > myDataSource. responseType = YAHOO.util.DataSour ce.TYPE_JSARRAY;
                > > > myDataSource. responseSchema = {
                > > > fields: ["artist", "album"]
                > > > };
                > > >
                > > >
                > > > var myDataTable = new YAHOO.widget. DataTable( "myContainer" ,
                > > myColumnDefs,
                > > > myDataSource) ;
                > > >
                > > > // Enable row highlighting
                > > > myDataTable. subscribe( "rowMouseoverEve nt", myDataTable.
                > > onEventHighlight Row);
                > > > myDataTable. subscribe( "rowMouseoutEven t",
                > > > myDataTable. onEventUnhighlig htRow);
                > > >
                > > > return {
                > > > oDS: myDataSource,
                > > > oDT: myDataTable
                > > > };
                > > > }();
                > > > });
                > > >
                > > >
                > > > ------------ --------- --------- ------
                > > >
                > > > Yahoo! Groups Links
                > > >
                > > >
                > > >
                > > > ------------ --------- --------- --------- --------- --------- -
                > > >
                > > >
                > > > No virus found in this incoming message.
                > > > Checked by AVG - http://www.avg. com <http://www.avg. com
                > <http://www.avg.com>>
                > > > Version: 8.0.176 / Virus Database: 270.9.14/1832 - Release Date:
                > > 05/12/2008 9:57
                > > >
                > > >
                > >
                > >
                > > ------------ --------- --------- --------- --------- --------- -
                > >
                > >
                > > No virus found in this incoming message.
                > > Checked by AVG - http://www.avg. com <http://www.avg.com>
                > > Version: 8.0.176 / Virus Database: 270.9.15/1837 - Release Date:
                > 08/12/2008 9:38
                > >
                > >
                >
                >
                > ------------------------------------------------------------------------
                >
                >
                > No virus found in this incoming message.
                > Checked by AVG - http://www.avg.com
                > Version: 8.0.176 / Virus Database: 270.9.15/1839 - Release Date: 09/12/2008 9:59
                >
                >
              • Timothy Jowers
                ... Does the datatable support nested/child row?. What I m really looking for is more likely to be called secondary rows or wrapped rows . The basic idea is
                Message 7 of 7 , Feb 26, 2009
                • 0 Attachment
                  --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                  >
                  > Something like this:
                  >
                  > http://www.satyam.com.ar/yui/#grouping
                  >
                  > Satyam
                  >
                  >
                  >
                  > Annie Lausier wrote:
                  ....

                  > >
                  > > Would really love to see nested/child rows at some point in DataTable!
                  > >
                  > > -Annie
                  > >


                  Does the datatable support nested/child row?. What I'm really looking
                  for is more likely to be called "secondary rows" or "wrapped rows".
                  The basic idea is the column headers wrap and the rows wrap. For
                  example when a table has 15 columns. A common technique is to make the
                  column headers on the second line be in a smaller font. In this way,
                  twice the columns can be supported and seen onscreen at once.
                  Obviously, we can custom format the data and have it display in this
                  way but then the sorting on column headers will not work. Here is one
                  approach using a "subgrid" but it fails to do what is needed as
                  sorting does not work on the second row of columns:
                  http://trirand.com/jqgrid/jqgrid.html#
                  We really like the YUI datatable and want to migrate to it from our
                  custom HTML/JSP stuff.

                  Basically, should be able to tell the datatable how many columns to
                  have on the top row (or something like that). Additional columns wrap:
                  list across below these top columns. Additional data on each row wraps
                  (becomes a new row). A font style for the second row can be
                  used/specified. In this way, secondary rows would be supported. The
                  user can sort by clicking on any column header; either one on the top
                  row or one on a subsequent row.
                Your message has been successfully submitted and would be delivered to recipients shortly.