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

Re: Datatable - custom row formatting

Expand Messages
  • traderashish
    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,
    Message 1 of 6 , Apr 30 11:49 AM
    • 0 Attachment
      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.
      > > > >
      > > >
      > >
      >
    • 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 2 of 6 , Apr 30 1:29 PM
      • 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.