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

Re: [ydn-javascript] Re: DataTable - Custom Formatting on Column Headers ONLY!

Expand Messages
  • Satyam
    From your code sample it seems that when you click on a column you are asking the server to provide a newly sorted table and then reload the whole page. When
    Message 1 of 5 , Oct 11, 2007
      From your code sample it seems that when you click on a column you are
      asking the server to provide a newly sorted table and then reload the whole
      page. When you do that reload, you should read from the
      document.location.href what was the column you asked the data to be sorted
      by and set the sortedBy property accordingly. If you always set it the same
      way, no matter how the data came, it will always look the same. The
      DataTable doesn't analize your data, it trusts what you tell it.

      Do you really need server-side sorting? The DataTable is quite capable of
      sorting it on the client. If so, check the server-side sorting sample code,
      it does reload the sorted data but without reloading the whole page,
      meaning, the stylesheets, component libraries and so on won't be reloaded.

      Satyam


      ----- Original Message -----
      From: "Shafique" <shafique_kassam@...>
      To: <ydn-javascript@yahoogroups.com>
      Sent: Wednesday, October 10, 2007 11:09 PM
      Subject: [ydn-javascript] Re: DataTable - Custom Formatting on Column
      Headers ONLY!


      > In response to your below help about gettin the arrows to show up, I
      > simply use the sortedBy propery in my oConfigs, but the styling/arrow
      > doesn't change columns when I click a different column header to
      > sort. Any other suggestions? Perhaps something in the CSS like you
      > suggested?
      >
      >> > How can i format the column headers to be a simple hyperlink (that
      >> > doesn't point to anything, but at least has a blue underline and
      >> > looks inviting to click).
      >>
      >> You don't need to, you can redefine the style so it looks like one.
      >>
      >> >
      >> > Secondly, I want the column that I've sorted on to highlight and
      > show
      >> > the arrows as well. Is this possible? Here's some codes snippets
      > for
      >> > the pertinent code:
      >>
      >> When you load or reload the sorted table, you can set the sortedBy
      > property
      >>
      > (http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#sorte
      > dBy).
      >> That will set the correct className for the sorted column. The
      > Sam skin
      >> does what you ask, otherwise, you would have to define yui-dt-desc
      > and
      >> yui-dt-asc to show it anyway you want it.
      >>
      >> Satyam
      >>
      >>
      >> >
      >> > // Column definitions
      >> > var myColumnDefs = [
      >> > {label:"",
      >> > formatter:YAHOO.widget.DataTable.formatCheckbox},
      >> > {key:"roomsLeft", label:"Avail", sortable: false},
      >> > {key:"info", label:"Info", sortable: false},
      >> > {key:"name", label:"Property Name", sortable: true,
      >> > formatter: this.formatName},
      >> > {key:"qualityRating", label:"Quality Rating", sortable:
      >> > true, formatter: this.formatQualityRating},
      >> > {key:"guestRating", label:"Guest Rating", sortable:
      > true},
      >> > {key:"total", label:"Total", sortable: false},
      >> > {key:"average", label:"Avg", formatter:
      >> > this.formatTooltip, sortable: true},
      >> > {key:"taxesFees", label:"Taxes and Fees", sortable:
      >> > false},
      >> > {key:"extraPersonFees", label:"Extra Person", sortable:
      >> > false},
      >> > {key:"distance", label:"Distance", sortable: false}
      >> >
      >> > ];
      >> >
      >> >
      >> > // Override function for custom sorting
      >> > this.myDataTable.sortColumn = function(oColumn) {
      >> >
      >> > // if the same column is selected twice, reverse the sort order
      >> > if (oColumn.key == document.forms
      > ['searchForm'].selectedColumn.value){
      >> > if (document.forms['searchForm'].sortDir.value == '_DESC'){
      >> > document.forms['searchForm'].sortDir.value = '_ASC';
      >> > } else {
      >> > document.forms['searchForm'].sortDir.value = '_DESC';
      >> > }
      >> > } else {
      >> > document.forms['searchForm'].sortDir.value = '_ASC';
      >> > }
      >> >
      >> > document.forms['searchForm'].selectedColumn.value = oColumn.key;
      >> > document.forms['searchForm'].action = '/processSearch.do';
      >> > document.forms['searchForm'].submit();
      >> > return;
      >> > };
      >> >
      >> >
      >> >
      >> >
      >> > Yahoo! Groups Links
      >> >
      >> >
      >> >
      >> >
      >> >
      >> > --
      >> > No virus found in this incoming message.
      >> > Checked by AVG Free Edition.
      >> > Version: 7.5.488 / Virus Database: 269.14.5/1058 - Release Date:
      >> > 08/10/2007 16:54
      >> >
      >> >
      >>
      >
      >
      >
      >
      >
      > Yahoo! Groups Links
      >
      >
      >
      >
      >
      > --
      > No virus found in this incoming message.
      > Checked by AVG Free Edition.
      > Version: 7.5.488 / Virus Database: 269.14.6/1060 - Release Date:
      > 09/10/2007 16:43
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.