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

Re: Datatable - custom row formatting

Expand Messages
  • MikeHatfield
    This should be exactly what you re after: http://yuiblog.com/sandbox/yui/v251/examples/datatable/conditional_highlight.html Cheers, Mike
    Message 1 of 6 , Apr 30, 2008
    • 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 2 of 6 , Apr 30, 2008
      • 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 3 of 6 , Apr 30, 2008
        • 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 4 of 6 , Apr 30, 2008
          • 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 5 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.