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

Re: [ydn-javascript] Yui data table and Jquery progress bar

Expand Messages
  • Satyam
    I think that you have a problem in identifying the progress bar since each cell will have a div with className progressbar, the result of searching for that
    Message 1 of 7 , Nov 30, 2008
      I think that you have a problem in identifying the progress bar since
      each cell will have a div with className progressbar, the result of
      searching for that div will find who knows which one. Anyway, elCell is
      already a <div> which is completely available for you to use as you want
      so you can create the progress bar right in it.

      I did a progress bar based on YUI you might want to try:

      http://www.satyam.com.ar/yui/#progressbar

      You would use it like this:

      Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
      (new YAHOO.widget.ProgressBar({value:oRecord.getData("status"), ... other config options ..})).render(elCell);
      };

      Though the config options allow you to set plenty of things, I recommend
      you use CSS to style it, for example, width and height. Other options
      are only available through CSS (images) and 'value', 'minValue',
      'maxValue' only via code.

      Satyam


      traderashish wrote:
      > I have yui data table and I want to show progess bar in one column.
      > Only good and easy to implement progress bar I could find is jquery progress bar
      >
      > http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.progressbar
      >
      >
      > I tried to add formatter to status column like this but it did not work,
      >
      > Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
      > var status = oRecord.getData("status");
      > elCell.innerHTML = "<div class=\"progressbar\"> </div>";
      > $(".progressbar").progressbar().progressbar("progress", status);
      >
      > };
      >
      > Can you please help - 1) how to make above work
      > or b) Please let me know if you know a good progress bar to use with YUI data table
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - http://www.avg.com
      > Version: 8.0.175 / Virus Database: 270.9.11/1819 - Release Date: 29/11/2008 10:37
      >
      >
    • traderashish
      Hi Satyam, one problem, it works except, when I click any header to sort the table it creates another progress bar in same row column. Every time I click to
      Message 2 of 7 , Dec 1, 2008
        Hi Satyam,

        one problem, it works except, when I click any header to sort the table it creates another
        progress bar in same row column. Every time I click to sort it adds more progress bars.

        Progress bar column is not sortable but other columns are.
        thanks

        --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
        >
        > I think that you have a problem in identifying the progress bar since
        > each cell will have a div with className progressbar, the result of
        > searching for that div will find who knows which one. Anyway, elCell is
        > already a <div> which is completely available for you to use as you want
        > so you can create the progress bar right in it.
        >
        > I did a progress bar based on YUI you might want to try:
        >
        > http://www.satyam.com.ar/yui/#progressbar
        >
        > You would use it like this:
        >
        > Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
        > (new YAHOO.widget.ProgressBar({value:oRecord.getData("status"), ... other config
        options ..})).render(elCell);
        > };
        >
        > Though the config options allow you to set plenty of things, I recommend
        > you use CSS to style it, for example, width and height. Other options
        > are only available through CSS (images) and 'value', 'minValue',
        > 'maxValue' only via code.
        >
        > Satyam
        >
        >
        > traderashish wrote:
        > > I have yui data table and I want to show progess bar in one column.
        > > Only good and easy to implement progress bar I could find is jquery progress bar
        > >
        > > http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.progressbar
        > >
        > >
        > > I tried to add formatter to status column like this but it did not work,
        > >
        > > Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
        > > var status = oRecord.getData("status");
        > > elCell.innerHTML = "<div class=\"progressbar\"> </div>";
        > > $(".progressbar").progressbar().progressbar("progress", status);
        > >
        > > };
        > >
        > > Can you please help - 1) how to make above work
        > > or b) Please let me know if you know a good progress bar to use with YUI data table
        > >
        > >
        > > ------------------------------------
        > >
        > > Yahoo! Groups Links
        > >
        > >
        > >
        > > ------------------------------------------------------------------
        ------
        > >
        > >
        > > No virus found in this incoming message.
        > > Checked by AVG - http://www.avg.com
        > > Version: 8.0.175 / Virus Database: 270.9.11/1819 - Release Date: 29/11/2008 10:37
        > >
        > >
        >
      • traderashish
        getting Safari issue for progress bar, the outer box is showing but bar is not showing in Safari 3.1 It is working fine in Fire Fox. Any clues. here is the
        Message 3 of 7 , Dec 2, 2008
          getting Safari issue for progress bar, the outer box is showing but
          bar is not showing in Safari 3.1
          It is working fine in Fire Fox.

          Any clues.
          here is the code
          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:
          >
          > I think that you have a problem in identifying the progress bar since
          > each cell will have a div with className progressbar, the result of
          > searching for that div will find who knows which one. Anyway,
          elCell is
          > already a <div> which is completely available for you to use as you
          want
          > so you can create the progress bar right in it.
          >
          > I did a progress bar based on YUI you might want to try:
          >
          > http://www.satyam.com.ar/yui/#progressbar
          >
          > You would use it like this:
          >
          > Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
          > (new YAHOO.widget.ProgressBar({value:oRecord.getData("status"), ...
          other config options ..})).render(elCell);
          > };
          >
          > Though the config options allow you to set plenty of things, I
          recommend
          > you use CSS to style it, for example, width and height. Other options
          > are only available through CSS (images) and 'value', 'minValue',
          > 'maxValue' only via code.
          >
          > Satyam
          >
          >
          > traderashish wrote:
          > > I have yui data table and I want to show progess bar in one column.
          > > Only good and easy to implement progress bar I could find is
          jquery progress bar
          > >
          > > http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.progressbar
          > >
          > >
          > > I tried to add formatter to status column like this but it did not
          work,
          > >
          > > Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData)
          {
          > > var status = oRecord.getData("status");
          > > elCell.innerHTML = "<div
          class=\"progressbar\"> </div>";
          > >
          $(".progressbar").progressbar().progressbar("progress", status);
          > >
          > > };
          > >
          > > Can you please help - 1) how to make above work
          > > or b) Please let me know if you know a good progress bar to use
          with YUI data table
          > >
          > >
          > > ------------------------------------
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          ------------------------------------------------------------------------
          > >
          > >
          > > No virus found in this incoming message.
          > > Checked by AVG - http://www.avg.com
          > > Version: 8.0.175 / Virus Database: 270.9.11/1819 - Release Date:
          29/11/2008 10:37
          > >
          > >
          >
        • Satyam
          I just changed your example to use my ProgressBar, you would have had the same issue with any bar. I guess that the best way to fix it would be something like
          Message 4 of 7 , Dec 2, 2008
            I just changed your example to use my ProgressBar, you would have had
            the same issue with any bar.

            I guess that the best way to fix it would be something like this. I
            haven't tested it so it might not work so cleanly.

            Have an extra object outside of the DataTable. Each table row in the DataTable has a unique identifier. Use this id as the key into this object to store the reference to the progressbar that belongs to that row. If there is no such entry in the table, create the progress bar and store it there. If there is an entry, use it and set the value.

            var pbs = {} // collection of progress bars
            Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
            var tr = YAHOO.util.Dom.getAncestorByTagName(elCell,'tr');
            if (pbs[tr.id]) {
            pbs[tr.id].set('value',oRecord.getData("status"));
            } else {
            pbs[tr.id] = new YAHOO.widget.ProgressBar({value:oRecord.getData("status"), ... other config options ..})).render(elCell);
            }
            });


            A far easier way is the following: Don't use any progress bar. After all, the progressbar is nothing more than a div with its size manipulated. If you don't care for the mask (rounder corners, borders or other decoration), then you already have all you need in the cell. The cell is made of two parts, the TD element of the actual HTML table and the liner, which is a div inside the TD. Set the TD element, that is, the whole column, to a fixed size and set the width of the liner proportional to the value.


            Satyam




            traderashish wrote:
            > Hi Satyam,
            >
            > one problem, it works except, when I click any header to sort the table it creates another
            > progress bar in same row column. Every time I click to sort it adds more progress bars.
            >
            > Progress bar column is not sortable but other columns are.
            > thanks
            >
            > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
            >
            >> I think that you have a problem in identifying the progress bar since
            >> each cell will have a div with className progressbar, the result of
            >> searching for that div will find who knows which one. Anyway, elCell is
            >> already a <div> which is completely available for you to use as you want
            >> so you can create the progress bar right in it.
            >>
            >> I did a progress bar based on YUI you might want to try:
            >>
            >> http://www.satyam.com.ar/yui/#progressbar
            >>
            >> You would use it like this:
            >>
            >> Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
            >> (new YAHOO.widget.ProgressBar({value:oRecord.getData("status"), ... other config
            >>
            > options ..})).render(elCell);
            >
            >> };
            >>
            >> Though the config options allow you to set plenty of things, I recommend
            >> you use CSS to style it, for example, width and height. Other options
            >> are only available through CSS (images) and 'value', 'minValue',
            >> 'maxValue' only via code.
            >>
            >> Satyam
            >>
            >>
            >> traderashish wrote:
            >>
            >>> I have yui data table and I want to show progess bar in one column.
            >>> Only good and easy to implement progress bar I could find is jquery progress bar
            >>>
            >>> http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.progressbar
            >>>
            >>>
            >>> I tried to add formatter to status column like this but it did not work,
            >>>
            >>> Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
            >>> var status = oRecord.getData("status");
            >>> elCell.innerHTML = "<div class=\"progressbar\"> </div>";
            >>> $(".progressbar").progressbar().progressbar("progress", status);
            >>>
            >>> };
            >>>
            >>> Can you please help - 1) how to make above work
            >>> or b) Please let me know if you know a good progress bar to use with YUI data table
            >>>
            >>>
            >>> ------------------------------------
            >>>
            >>> Yahoo! Groups Links
            >>>
            >>>
            >>>
            >>> ------------------------------------------------------------------
            >>>
            > ------
            >
            >>> No virus found in this incoming message.
            >>> Checked by AVG - http://www.avg.com
            >>> Version: 8.0.175 / Virus Database: 270.9.11/1819 - Release Date: 29/11/2008 10:37
            >>>
            >>>
            >>>
            >
            >
            >
            >
            > ------------------------------------
            >
            > 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/1823 - Release Date: 01/12/2008 19:59
            >
            >
          • traderashish
            Thanks Satyam, Safari issue: I am using your progress bar and your css with slight change in width=100px and height=10px. same code, in safari:
            Message 5 of 7 , Dec 2, 2008
              Thanks Satyam,
              Safari issue: I am using your progress bar and your css with slight
              change in width=100px and height=10px.
              same code,

              in safari: <div class="yui-pb-bar" style="width: 0px;">
              in firefox : <div class="yui-pb-bar" style="width: 37px;">
              value of oRecord.getData("status") is 37 in both cases.

              Any clues...
              code:
              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:
              >
              > I just changed your example to use my ProgressBar, you would have had
              > the same issue with any bar.
              >
              > I guess that the best way to fix it would be something like this. I
              > haven't tested it so it might not work so cleanly.
              >
              > Have an extra object outside of the DataTable. Each table row in
              the DataTable has a unique identifier. Use this id as the key into
              this object to store the reference to the progressbar that belongs to
              that row. If there is no such entry in the table, create the progress
              bar and store it there. If there is an entry, use it and set the value.
              >
              > var pbs = {} // collection of progress bars
              > Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
              > var tr = YAHOO.util.Dom.getAncestorByTagName(elCell,'tr');
              > if (pbs[tr.id]) {
              > pbs[tr.id].set('value',oRecord.getData("status"));
              > } else {
              > pbs[tr.id] = new
              YAHOO.widget.ProgressBar({value:oRecord.getData("status"), ... other
              config options ..})).render(elCell);
              > }
              > });
              >
              >
              > A far easier way is the following: Don't use any progress bar.
              After all, the progressbar is nothing more than a div with its size
              manipulated. If you don't care for the mask (rounder corners, borders
              or other decoration), then you already have all you need in the cell.
              The cell is made of two parts, the TD element of the actual HTML
              table and the liner, which is a div inside the TD. Set the TD
              element, that is, the whole column, to a fixed size and set the width
              of the liner proportional to the value.
              >
              >
              > Satyam
              >
              >
              >
              >
              > traderashish wrote:
              > > Hi Satyam,
              > >
              > > one problem, it works except, when I click any header to sort the
              table it creates another
              > > progress bar in same row column. Every time I click to sort it
              adds more progress bars.
              > >
              > > Progress bar column is not sortable but other columns are.
              > > thanks
              > >
              > > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
              > >
              > >> I think that you have a problem in identifying the progress bar
              since
              > >> each cell will have a div with className progressbar, the result of
              > >> searching for that div will find who knows which one. Anyway,
              elCell is
              > >> already a <div> which is completely available for you to use as
              you want
              > >> so you can create the progress bar right in it.
              > >>
              > >> I did a progress bar based on YUI you might want to try:
              > >>
              > >> http://www.satyam.com.ar/yui/#progressbar
              > >>
              > >> You would use it like this:
              > >>
              > >> Ex.myProgressFormatter = function(elCell, oRecord, oColumn,
              oData) {
              > >> (new YAHOO.widget.ProgressBar({value:oRecord.getData("status"),
              ... other config
              > >>
              > > options ..})).render(elCell);
              > >
              > >> };
              > >>
              > >> Though the config options allow you to set plenty of things, I
              recommend
              > >> you use CSS to style it, for example, width and height. Other
              options
              > >> are only available through CSS (images) and 'value', 'minValue',
              > >> 'maxValue' only via code.
              > >>
              > >> Satyam
              > >>
              > >>
              > >> traderashish wrote:
              > >>
              > >>> I have yui data table and I want to show progess bar in one column.
              > >>> Only good and easy to implement progress bar I could find is
              jquery progress bar
              > >>>
              > >>> http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.progressbar
              > >>>
              > >>>
              > >>> I tried to add formatter to status column like this but it did
              not work,
              > >>>
              > >>> Ex.myProgressFormatter = function(elCell, oRecord, oColumn,
              oData) {
              > >>> var status = oRecord.getData("status");
              > >>> elCell.innerHTML = "<div
              class=\"progressbar\"> </div>";
              > >>>
              $(".progressbar").progressbar().progressbar("progress", status);
              > >>>
              > >>> };
              > >>>
              > >>> Can you please help - 1) how to make above work
              > >>> or b) Please let me know if you know a good progress bar to
              use with YUI data table
              > >>>
              > >>>
              > >>> ------------------------------------
              > >>>
              > >>> Yahoo! Groups Links
              > >>>
              > >>>
              > >>>
              > >>> ------------------------------------------------------------------
              > >>>
              > > ------
              > >
              > >>> No virus found in this incoming message.
              > >>> Checked by AVG - http://www.avg.com
              > >>> Version: 8.0.175 / Virus Database: 270.9.11/1819 - Release Date:
              29/11/2008 10:37
              > >>>
              > >>>
              > >>>
              > >
              > >
              > >
              > >
              > > ------------------------------------
              > >
              > > 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/1823 - Release Date:
              01/12/2008 19:59
              > >
              > >
              >
            • Satyam
              Can I see your code running so I can understand what s going on? Satyam
              Message 6 of 7 , Dec 2, 2008
                Can I see your code running so I can understand what's going on?

                Satyam


                traderashish wrote:
                > Thanks Satyam,
                > Safari issue: I am using your progress bar and your css with slight
                > change in width=100px and height=10px.
                > same code,
                >
                > in safari: <div class="yui-pb-bar" style="width: 0px;">
                > in firefox : <div class="yui-pb-bar" style="width: 37px;">
                > value of oRecord.getData("status") is 37 in both cases.
                >
                > Any clues...
                > code:
                > 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:
                >
                >> I just changed your example to use my ProgressBar, you would have had
                >> the same issue with any bar.
                >>
                >> I guess that the best way to fix it would be something like this. I
                >> haven't tested it so it might not work so cleanly.
                >>
                >> Have an extra object outside of the DataTable. Each table row in
                >>
                > the DataTable has a unique identifier. Use this id as the key into
                > this object to store the reference to the progressbar that belongs to
                > that row. If there is no such entry in the table, create the progress
                > bar and store it there. If there is an entry, use it and set the value.
                >
                >> var pbs = {} // collection of progress bars
                >> Ex.myProgressFormatter = function(elCell, oRecord, oColumn, oData) {
                >> var tr = YAHOO.util.Dom.getAncestorByTagName(elCell,'tr');
                >> if (pbs[tr.id]) {
                >> pbs[tr.id].set('value',oRecord.getData("status"));
                >> } else {
                >> pbs[tr.id] = new
                >>
                > YAHOO.widget.ProgressBar({value:oRecord.getData("status"), ... other
                > config options ..})).render(elCell);
                >
                >> }
                >> });
                >>
                >>
                >> A far easier way is the following: Don't use any progress bar.
                >>
                > After all, the progressbar is nothing more than a div with its size
                > manipulated. If you don't care for the mask (rounder corners, borders
                > or other decoration), then you already have all you need in the cell.
                > The cell is made of two parts, the TD element of the actual HTML
                > table and the liner, which is a div inside the TD. Set the TD
                > element, that is, the whole column, to a fixed size and set the width
                > of the liner proportional to the value.
                >
                >>
                >> Satyam
                >>
                >>
                >>
                >>
                >> traderashish wrote:
                >>
                >>> Hi Satyam,
                >>>
                >>> one problem, it works except, when I click any header to sort the
                >>>
                > table it creates another
                >
                >>> progress bar in same row column. Every time I click to sort it
                >>>
                > adds more progress bars.
                >
                >>> Progress bar column is not sortable but other columns are.
                >>> thanks
                >>>
                >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                >>>
                >>>
                >>>> I think that you have a problem in identifying the progress bar
                >>>>
                > since
                >
                >>>> each cell will have a div with className progressbar, the result of
                >>>> searching for that div will find who knows which one. Anyway,
                >>>>
                > elCell is
                >
                >>>> already a <div> which is completely available for you to use as
                >>>>
                > you want
                >
                >>>> so you can create the progress bar right in it.
                >>>>
                >>>> I did a progress bar based on YUI you might want to try:
                >>>>
                >>>> http://www.satyam.com.ar/yui/#progressbar
                >>>>
                >>>> You would use it like this:
                >>>>
                >>>> Ex.myProgressFormatter = function(elCell, oRecord, oColumn,
                >>>>
                > oData) {
                >
                >>>> (new YAHOO.widget.ProgressBar({value:oRecord.getData("status"),
                >>>>
                > ... other config
                >
                >>>>
                >>>>
                >>> options ..})).render(elCell);
                >>>
                >>>
                >>>> };
                >>>>
                >>>> Though the config options allow you to set plenty of things, I
                >>>>
                > recommend
                >
                >>>> you use CSS to style it, for example, width and height. Other
                >>>>
                > options
                >
                >>>> are only available through CSS (images) and 'value', 'minValue',
                >>>> 'maxValue' only via code.
                >>>>
                >>>> Satyam
                >>>>
                >>>>
                >>>> traderashish wrote:
                >>>>
                >>>>
                >>>>> I have yui data table and I want to show progess bar in one column.
                >>>>> Only good and easy to implement progress bar I could find is
                >>>>>
                > jquery progress bar
                >
                >>>>> http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.progressbar
                >>>>>
                >>>>>
                >>>>> I tried to add formatter to status column like this but it did
                >>>>>
                > not work,
                >
                >>>>> Ex.myProgressFormatter = function(elCell, oRecord, oColumn,
                >>>>>
                > oData) {
                >
                >>>>> var status = oRecord.getData("status");
                >>>>> elCell.innerHTML = "<div
                >>>>>
                > class=\"progressbar\"> </div>";
                >
                >>>>>
                >>>>>
                > $(".progressbar").progressbar().progressbar("progress", status);
                >
                >>>>>
                >>>>> };
                >>>>>
                >>>>> Can you please help - 1) how to make above work
                >>>>> or b) Please let me know if you know a good progress bar to
                >>>>>
                > use with YUI data table
                >
                >>>>> ------------------------------------
                >>>>>
                >>>>> Yahoo! Groups Links
                >>>>>
                >>>>>
                >>>>>
                >>>>> ------------------------------------------------------------------
                >>>>>
                >>>>>
                >>> ------
                >>>
                >>>
                >>>>> No virus found in this incoming message.
                >>>>> Checked by AVG - http://www.avg.com
                >>>>> Version: 8.0.175 / Virus Database: 270.9.11/1819 - Release Date:
                >>>>>
                > 29/11/2008 10:37
                >
                >>>>>
                >>>>>
                >>>
                >>>
                >>> ------------------------------------
                >>>
                >>> 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/1823 - Release Date:
                >>>
                > 01/12/2008 19:59
                >
                >>>
                >
                >
                >
                > ------------------------------------
                >
                > 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/1823 - Release Date: 01/12/2008 19:59
                >
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.