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

Re: Datatable - custom row formatting

Expand Messages
  • traderashish
    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
    Message 1 of 6 , Apr 30, 2008
      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.
      > >
      >
    • MikeHatfield
      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
      Message 2 of 6 , Apr 30, 2008
        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
        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 3 of 6 , Apr 30, 2008
          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 4 of 6 , Apr 30, 2008
            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.