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

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

Expand Messages
  • Satyam
    Can I see your code running so I can understand what s going on? Satyam
    Message 1 of 7 , Dec 2, 2008
    • 0 Attachment
      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.