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

Datatable - custom row formatting

Expand Messages
  • biafromwigg
    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
    Message 1 of 6 , Apr 30 6:52 AM
    • 0 Attachment
      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
      This should be exactly what you re after: http://yuiblog.com/sandbox/yui/v251/examples/datatable/conditional_highlight.html Cheers, Mike
      Message 2 of 6 , Apr 30 6:54 AM
      • 0 Attachment
        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 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 3 of 6 , Apr 30 10:28 AM
        • 0 Attachment
          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 4 of 6 , Apr 30 11:23 AM
          • 0 Attachment
            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 5 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 6 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.