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

Re: Datatable - custom row formatting

Expand Messages
  • traderashish
    Thanks to y_lsmith for pointing me to http://yuiblog.com/sandbox/yui/v251/examples/datatable/row_color.html ... YAHOO.util.DataSource.TYPE_JSON; ... records
    Message 1 of 6 , Apr 30, 2008
    • 0 Attachment
      Thanks to y_lsmith for pointing me to

      http://yuiblog.com/sandbox/yui/v251/examples/datatable/row_color.html

      --- In ydn-javascript@yahoogroups.com, "traderashish"
      <traderashish@...> wrote:
      >
      > I put alerts in updateClass but they never fired.
      >
      > Here is the code
      >
      > YAHOO.util.Event.onDOMReady(function () {
      > var Ev = YAHOO.util.Event,
      > Dom = YAHOO.util.Dom,
      > DS = YAHOO.util.DataSource,
      > DT = YAHOO.widget.DataTable;
      >
      > YAHOO.example.ClientPagination = new function() {
      > var myColumnDefs = [
      > {key:"id", label:"Case Id", sortable:true},
      > {key:"status", label:"Status",sortable:true},
      > ];
      >
      > this.myDataSource = new
      > YAHOO.util.DataSource("http://127.0.0.1:8000/viewallstatus?");
      > this.myDataSource.responseType =
      YAHOO.util.DataSource.TYPE_JSON;
      >
      > // When responseSchema.totalRecords is not indicated, the
      records
      > // returned from the DataSource are assumed to represent the
      entire set
      > this.myDataSource.responseSchema = {
      > initialLoad : false,
      > resultsList: "items",
      > fields:
      [{key:"id",parser:YAHOO.util.DataSource.parseNumber},"status"]};
      > // The Paginator instance will have its totalRecords configuration
      > // populated by the DataTable when it receives the records
      from the
      > // DataSource
      > var oConfigs = {
      > initialRequest : 'startIndex=0&results=25',
      > /* paginator: new YAHOO.widget.Paginator({
      > rowsPerPage: 15
      > }),
      >
      > // Show over 500 records
      > initialRequest: "results=504" */
      > };
      >
      > // Create a custom function to assign the ok and mark classes to the
      cells
      > updateClass = function () {
      > var dTable = this.myDataTable,
      > tbody = dTable.getTbodyEl(),
      > rows,r,colIdx,i,c;
      >
      >
      > val="New";
      >
      >
      > if (tbody && dTable.getColumn('status')) {
      > colIdx = dTable.getColumn(col).getKeyIndex();
      >
      > // Iterate the tbody rows
      > for (rows=tbody.rows,i=rows.length-1;i>=0;--i) {
      > r = dTable.getRecord(i);
      > c = rows[i].cells[colIdx];
      >
      > if (val === null) {
      > // Clear highlighting
      > Dom.removeClass(c,'ok');
      > Dom.removeClass(c,'mark');
      > } else if (r.getData(col) == val) {
      > Dom.replaceClass(c,'ok','mark');
      > } else {
      > Dom.replaceClass(c,'mark','ok');
      > }
      > }
      > }
      > };
      >
      >
      > this.myDataTable = new YAHOO.widget.DataTable("sort", myColumnDefs,
      > this.myDataSource,oConfigs);
      >
      > this.myDataTable.subscribe('renderEvent', updateClass);
      >
      > this.myDataTable.subscribe('rowAddEvent', updateClass);
      >
      >
      >
      > };
      > });
      >
      >
      >
      > and the css
      >
      > .yui-skin-sam .yui-dt td.ok div.yui-dt-liner {
      > background: #cfc;
      > }
      > .yui-skin-sam .yui-dt tr.yui-dt-odd td.ok
      div.yui-dt-liner {
      > background: #cfc;
      > }
      > .yui-skin-sam .yui-dt td.mark div.yui-dt-liner {
      > background: #711;
      > color: #fff;
      > }
      > .yui-skin-sam .yui-dt tr.yui-dt-odd td.ok
      div.yui-dt-liner {
      > background: #ada;
      > }
      > .yui-skin-sam .yui-dt tr.yui-dt-odd td.mark
      div.yui-dt-liner {
      > background: #500;
      > }
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "MikeHatfield"
      <mikehatfield@> wrote:
      > >
      > > Hi Ashish
      > >
      > > renderEvent seems like the correct place, but without seeing code
      I'm not sure why your
      > > highlights aren't working.
      > >
      > > The other event you might want to look at is rowAddEvent, which
      also gives you direct
      > > access to the record being rendered, so that makes getting hold of
      the data somewhat
      > > easier.
      > >
      > > Regards,
      > > Mike
      > >
      > >
      > > --- In ydn-javascript@yahoogroups.com, "traderashish"
      <traderashish@> wrote:
      > > >
      > > > thanks Mike,
      > > >
      > > > How do i do it so that when datatable is displayed for the first
      time, the rows of kids
      > of
      > > > less than 10 years come highlighted.
      > > >
      > > > There is no form for input and value 10 and column name "age"
      can be hardcoded.
      > > >
      > > > I am doing an HTTP get call in datasource to get json from
      server side to load the
      > table.
      > > >
      > > > I tried by removing the form stuff and also removed the
      following. But renderEvent is
      > > not
      > > > firing and table is getting displayed with data but no highlighting.
      > > >
      > > > <<<Removed all form code and following lines >>>
      > > > Ev.on('mark','mousedown',function (e) {
      > > > 105 Ev.stopEvent(e);
      > > > 106 Ex.updateMarks();
      > > > 107 });
      > > > 108 Ev.on('the_form','submit',function (e) {
      > > > 109 Ev.stopEvent(e);
      > > > 110 Ex.updateMarks();
      > > > 111 });
      > > >
      > > > thanks
      > > > Ashish
      > > >
      > > > --- In ydn-javascript@yahoogroups.com, "MikeHatfield"
      <mikehatfield@> wrote:
      > > > >
      > > > > This should be exactly what you're after:
      > > > >
      > > > >
      > >
      http://yuiblog.com/sandbox/yui/v251/examples/datatable/conditional_highlight.html
      > > > >
      > > > > Cheers,
      > > > > Mike
      > > > >
      > > > > --- In ydn-javascript@yahoogroups.com, "biafromwigg"
      <biafromwigg@> wrote:
      > > > > >
      > > > > > Let's say I have a table as follows:
      > > > > >
      > > > > > Name Age
      > > > > > Billy 10
      > > > > > Mary 11
      > > > > > Mark 7
      > > > > >
      > > > > > I'd like to highlight all of the names of kids under the age
      of 10, so
      > > > > > in this case highlight the row containing "Mark". Does
      anyone have any
      > > > > > thoughts on how to easily do this? I basically need row
      formatting to
      > > > > > be dependent on the data for that row. I'm not sure if this
      is built
      > > > > > into the Datatable somewhere or not.
      > > > > >
      > > > > > Thanks.
      > > > > >
      > > > >
      > > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.