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

Show number (%) on YUI progress bar by Satyam

Expand Messages
  • traderashish
    I am using Satyam progress bar to show percentage complete. Along with progress bar, how can I show a label with percent complete like 35%. I am rendering
    Message 1 of 4 , Dec 2, 2008
      I am using Satyam' progress bar to show percentage complete. Along
      with progress bar, how can I show a label with percent complete like 35%.

      I am rendering progress bar in data table cell using -
      (new
      YAHOO.widget.ProgressBar({value:oRecord.getData("status")})).render(elCell)
      ;
    • Satyam
      If you look at the example page, there is a number in boldface that changes when the value changes. It is right above the third progress bar. The code for
      Message 2 of 4 , Dec 3, 2008
        If you look at the example page, there is a number in boldface that
        changes when the value changes. It is right above the third progress
        bar. The code for that is:

        var settingEl = YAHOO.util.Dom.get('setting');
        pb.on('changingEvent',function (value) {
        settingEl.innerHTML = value + ' ... moving ...';
        });

        pb.on('completeEvent',function (value) {
        settingEl.innerHTML = value;
        });

        Satyam


        traderashish wrote:
        > I am using Satyam' progress bar to show percentage complete. Along
        > with progress bar, how can I show a label with percent complete like 35%.
        >
        > I am rendering progress bar in data table cell using -
        > (new
        > YAHOO.widget.ProgressBar({value:oRecord.getData("status")})).render(elCell)
        > ;
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - http://www.avg.com
        > Version: 8.0.176 / Virus Database: 270.9.12/1824 - Release Date: 02/12/2008 9:31
        >
        >
      • traderashish
        Thanks. My difficulty is displaying the number next to progress bar in yui datatable cell. Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
        Message 3 of 4 , Dec 3, 2008
          Thanks. My difficulty is displaying the number next to progress bar in
          yui datatable cell.
          Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
          (new
          YAHOO.widget.ProgressBar({value:oRecord.getData("status")})).render(elCell)
          );
          };

          --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
          >
          > If you look at the example page, there is a number in boldface that
          > changes when the value changes. It is right above the third progress
          > bar. The code for that is:
          >
          > var settingEl = YAHOO.util.Dom.get('setting');
          > pb.on('changingEvent',function (value) {
          > settingEl.innerHTML = value + ' ... moving ...';
          > });
          >
          > pb.on('completeEvent',function (value) {
          > settingEl.innerHTML = value;
          > });
          >
          > Satyam
          >
          >
          > traderashish wrote:
          > > I am using Satyam' progress bar to show percentage complete. Along
          > > with progress bar, how can I show a label with percent complete
          like 35%.
          > >
          > > I am rendering progress bar in data table cell using -
          > > (new
          > >
          YAHOO.widget.ProgressBar({value:oRecord.getData("status")})).render(elCell)
          > > ;
          > >
          > >
          > > ------------------------------------
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          ------------------------------------------------------------------------
          > >
          > >
          > > No virus found in this incoming message.
          > > Checked by AVG - http://www.avg.com
          > > Version: 8.0.176 / Virus Database: 270.9.12/1824 - Release Date:
          02/12/2008 9:31
          > >
          > >
          >
        • Satyam
          I haven t tested it, this is just a draft: Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) { var elNumber =
          Message 4 of 4 , Dec 4, 2008
            I haven't tested it, this is just a draft:

            Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
            var elNumber = elCell.appendChild(document.createElement('div'));
            var elBar = elCell.appendChild(document.createElement('div'));
            var pb =new YAHOO.widget.ProgressBar({value:oRecord.getData("status")}).render(elBar);
            pb.on('completeEvent',function (value) {
            elNumber.innerHTML = value;
            });
            };

            You would probably add classNames to both elNumber and elBar to have them laid out whichever way you want, or make them <span> instead of <div> and let them flow as normal text does.

            Satyam




            traderashish wrote:
            > Thanks. My difficulty is displaying the number next to progress bar in
            > yui datatable cell.
            > Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
            > (new
            > YAHOO.widget.ProgressBar({value:oRecord.getData("status")})).render(elCell)
            > );
            > };
            >
            > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
            >
            >> If you look at the example page, there is a number in boldface that
            >> changes when the value changes. It is right above the third progress
            >> bar. The code for that is:
            >>
            >> var settingEl = YAHOO.util.Dom.get('setting');
            >> pb.on('changingEvent',function (value) {
            >> settingEl.innerHTML = value + ' ... moving ...';
            >> });
            >>
            >> pb.on('completeEvent',function (value) {
            >> settingEl.innerHTML = value;
            >> });
            >>
            >> Satyam
            >>
            >>
            >> traderashish wrote:
            >>
            >>> I am using Satyam' progress bar to show percentage complete. Along
            >>> with progress bar, how can I show a label with percent complete
            >>>
            > like 35%.
            >
            >>> I am rendering progress bar in data table cell using -
            >>> (new
            >>>
            >>>
            > YAHOO.widget.ProgressBar({value:oRecord.getData("status")})).render(elCell)
            >
            >>> ;
            >>>
            >>>
            >>> ------------------------------------
            >>>
            >>> Yahoo! Groups Links
            >>>
            >>>
            >>>
            >>>
            >>>
            > ------------------------------------------------------------------------
            >
            >>> No virus found in this incoming message.
            >>> Checked by AVG - http://www.avg.com
            >>> Version: 8.0.176 / Virus Database: 270.9.12/1824 - Release Date:
            >>>
            > 02/12/2008 9:31
            >
            >>>
            >
            >
            >
            > ------------------------------------
            >
            > Yahoo! Groups Links
            >
            >
            >
            > ------------------------------------------------------------------------
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG - http://www.avg.com
            > Version: 8.0.176 / Virus Database: 270.9.13/1826 - Release Date: 03/12/2008 9:34
            >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.