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

Using DataTable with Drag and Drop: Part II

Expand Messages
  • Mike M.
    Hey everyone, So my experiment into adding drag and drop functionality to a YUI DataTable continues... The ultimate goal of this experiment was to see if I
    Message 1 of 14 , Dec 11, 2007
    • 0 Attachment
      Hey everyone,

      So my experiment into adding drag and drop functionality to a YUI
      DataTable continues... The ultimate goal of this experiment was to
      see if I could create DataTables that would allow you to either
      perform drag and drop sorting or more importantly, drag a row from one
      table and drop it into another, thus updating the underlying database
      and retaining sorting functionality within the destination table.

      My latest stumbling block is as follows... When you release the mouse
      button over the destination table, I can read in the HTML Element ID
      of that table. Is there a way to use that ID (or any other method) to
      find out which of my DataTables that ID belongs to? I want to be able
      to, within the event handling function, call the AddRow() function on
      the table I'm dropping on and similarly call DeleteRow() on the source
      table.

      Thank you all for your help with this so far and I really hope someone
      out there has some ideas for me. I could I think maintain a global
      array of the ID's of the tables that I make, and have the event
      handler call out to a function that compares against the array and
      then perform the task, but I'd prefer to do this a cleaner way if
      there is one.

      Thanks,
      Mike
    • Satyam
      The id property with -table appended is the same as the id attribute you would get from the HTML table element. You could store a reference to each
      Message 2 of 14 , Dec 11, 2007
      • 0 Attachment
        The id property with '-table' appended is the same as the id attribute you
        would get from the HTML table element. You could store a reference to each
        DataTable, indexed by the id of each one (they are unique):

        myTableArray[myNthDataTable.id + '-table'] = myNthDataTable;

        Actually, the id is the prefix for most DOM element ids.

        Also:

        myTableArray[myNthDataTable.getTableEl().id] = myNthDataTable;

        Either should point you to the right table in no time at all.

        Satyam







        ----- Original Message -----
        From: "Mike M." <guiltyspark05@...>
        To: <ydn-javascript@yahoogroups.com>
        Sent: Wednesday, December 12, 2007 7:38 AM
        Subject: [ydn-javascript] Using DataTable with Drag and Drop: Part II


        > Hey everyone,
        >
        > So my experiment into adding drag and drop functionality to a YUI
        > DataTable continues... The ultimate goal of this experiment was to
        > see if I could create DataTables that would allow you to either
        > perform drag and drop sorting or more importantly, drag a row from one
        > table and drop it into another, thus updating the underlying database
        > and retaining sorting functionality within the destination table.
        >
        > My latest stumbling block is as follows... When you release the mouse
        > button over the destination table, I can read in the HTML Element ID
        > of that table. Is there a way to use that ID (or any other method) to
        > find out which of my DataTables that ID belongs to? I want to be able
        > to, within the event handling function, call the AddRow() function on
        > the table I'm dropping on and similarly call DeleteRow() on the source
        > table.
        >
        > Thank you all for your help with this so far and I really hope someone
        > out there has some ideas for me. I could I think maintain a global
        > array of the ID's of the tables that I make, and have the event
        > handler call out to a function that compares against the array and
        > then perform the task, but I'd prefer to do this a cleaner way if
        > there is one.
        >
        > Thanks,
        > Mike
        >
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        > --
        > No virus found in this incoming message.
        > Checked by AVG Free Edition.
        > Version: 7.5.503 / Virus Database: 269.17.0/1180 - Release Date:
        > 10/12/2007 14:51
        >
        >
      • Mike M.
        That was very helpful, thank you! Is there any trick method for comparing the record that I intend to add against the records in the destination table.
        Message 3 of 14 , Dec 13, 2007
        • 0 Attachment
          That was very helpful, thank you!

          Is there any trick method for comparing the record that I intend to
          add against the records in the destination table. Basically I,
          instead of blindly adding whatever I drop on the table, want to either
          add a new record (if it doesn't already exist) or increment a column
          value (if the record does already exist in the table). I imagine that
          iterating through the table one record at a time might be rather slow
          if the table were to grow to a large size.

          I think if I can figure this out, then tie it together with my
          database, I'll have something really cool to share with you all.


          -Mike


          --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
          >
          > The id property with '-table' appended is the same as the id
          attribute you
          > would get from the HTML table element. You could store a reference
          to each
          > DataTable, indexed by the id of each one (they are unique):
          >
          > myTableArray[myNthDataTable.id + '-table'] = myNthDataTable;
          >
          > Actually, the id is the prefix for most DOM element ids.
          >
          > Also:
          >
          > myTableArray[myNthDataTable.getTableEl().id] = myNthDataTable;
          >
          > Either should point you to the right table in no time at all.
          >
          > Satyam
          >
          >
          >
          >
          >
          >
          >
          > ----- Original Message -----
          > From: "Mike M." <guiltyspark05@...>
          > To: <ydn-javascript@yahoogroups.com>
          > Sent: Wednesday, December 12, 2007 7:38 AM
          > Subject: [ydn-javascript] Using DataTable with Drag and Drop: Part II
          >
          >
          > > Hey everyone,
          > >
          > > So my experiment into adding drag and drop functionality to a YUI
          > > DataTable continues... The ultimate goal of this experiment was to
          > > see if I could create DataTables that would allow you to either
          > > perform drag and drop sorting or more importantly, drag a row from one
          > > table and drop it into another, thus updating the underlying database
          > > and retaining sorting functionality within the destination table.
          > >
          > > My latest stumbling block is as follows... When you release the mouse
          > > button over the destination table, I can read in the HTML Element ID
          > > of that table. Is there a way to use that ID (or any other method) to
          > > find out which of my DataTables that ID belongs to? I want to be able
          > > to, within the event handling function, call the AddRow() function on
          > > the table I'm dropping on and similarly call DeleteRow() on the source
          > > table.
          > >
          > > Thank you all for your help with this so far and I really hope someone
          > > out there has some ideas for me. I could I think maintain a global
          > > array of the ID's of the tables that I make, and have the event
          > > handler call out to a function that compares against the array and
          > > then perform the task, but I'd prefer to do this a cleaner way if
          > > there is one.
          > >
          > > Thanks,
          > > Mike
          > >
          > >
          > >
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          > >
          > > --
          > > No virus found in this incoming message.
          > > Checked by AVG Free Edition.
          > > Version: 7.5.503 / Virus Database: 269.17.0/1180 - Release Date:
          > > 10/12/2007 14:51
          > >
          > >
          >
        • Satyam
          Either that or you make a similar associative array to allow for faster access. You would put the unique key of your records as the key to the array and the
          Message 4 of 14 , Dec 14, 2007
          • 0 Attachment
            Either that or you make a similar associative array to allow for faster
            access. You would put the unique key of your records as the key to the
            array and the reference to the Record object itself (or the table row) as
            the value.

            The formatter function might be a good place to do it. If you are not using
            a formatter for any of the columns, just add one:

            {key:'anyField',formatter:function(el, oRecord, oColumn, oData) {
            el.innerHTML = oData;
            myRecordsArray[oRecord.getData('uniqueKeyField')] = oRecord;
            // either the one above or the one below, whichever you find easier.
            myRecordsArray[oRecord.getData('uniqueKeyField')] = this.getTrEl(el);
            }, .... },....

            The formatter function will be called once per visible record so this
            wouldn't work with paging. You couldn't drop any dragged records on a page
            that's not visible so it shouldn't be a problem. It will be called again
            on any operation that forces a refresh of the table, but since it is not a
            simple array but an indexed one, the records will simply be overwritten over
            and over again, the array won't grow uncontrolled.

            Satyam


            ----- Original Message -----
            From: "Mike M." <guiltyspark05@...>
            To: <ydn-javascript@yahoogroups.com>
            Sent: Friday, December 14, 2007 8:06 AM
            Subject: [ydn-javascript] Re: Using DataTable with Drag and Drop: Part II


            > That was very helpful, thank you!
            >
            > Is there any trick method for comparing the record that I intend to
            > add against the records in the destination table. Basically I,
            > instead of blindly adding whatever I drop on the table, want to either
            > add a new record (if it doesn't already exist) or increment a column
            > value (if the record does already exist in the table). I imagine that
            > iterating through the table one record at a time might be rather slow
            > if the table were to grow to a large size.
            >
            > I think if I can figure this out, then tie it together with my
            > database, I'll have something really cool to share with you all.
            >
            >
            > -Mike
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
            >>
            >> The id property with '-table' appended is the same as the id
            > attribute you
            >> would get from the HTML table element. You could store a reference
            > to each
            >> DataTable, indexed by the id of each one (they are unique):
            >>
            >> myTableArray[myNthDataTable.id + '-table'] = myNthDataTable;
            >>
            >> Actually, the id is the prefix for most DOM element ids.
            >>
            >> Also:
            >>
            >> myTableArray[myNthDataTable.getTableEl().id] = myNthDataTable;
            >>
            >> Either should point you to the right table in no time at all.
            >>
            >> Satyam
            >>
            >>
            >>
            >>
            >>
            >>
            >>
            >> ----- Original Message -----
            >> From: "Mike M." <guiltyspark05@...>
            >> To: <ydn-javascript@yahoogroups.com>
            >> Sent: Wednesday, December 12, 2007 7:38 AM
            >> Subject: [ydn-javascript] Using DataTable with Drag and Drop: Part II
            >>
            >>
            >> > Hey everyone,
            >> >
            >> > So my experiment into adding drag and drop functionality to a YUI
            >> > DataTable continues... The ultimate goal of this experiment was to
            >> > see if I could create DataTables that would allow you to either
            >> > perform drag and drop sorting or more importantly, drag a row from one
            >> > table and drop it into another, thus updating the underlying database
            >> > and retaining sorting functionality within the destination table.
            >> >
            >> > My latest stumbling block is as follows... When you release the mouse
            >> > button over the destination table, I can read in the HTML Element ID
            >> > of that table. Is there a way to use that ID (or any other method) to
            >> > find out which of my DataTables that ID belongs to? I want to be able
            >> > to, within the event handling function, call the AddRow() function on
            >> > the table I'm dropping on and similarly call DeleteRow() on the source
            >> > table.
            >> >
            >> > Thank you all for your help with this so far and I really hope someone
            >> > out there has some ideas for me. I could I think maintain a global
            >> > array of the ID's of the tables that I make, and have the event
            >> > handler call out to a function that compares against the array and
            >> > then perform the task, but I'd prefer to do this a cleaner way if
            >> > there is one.
            >> >
            >> > Thanks,
            >> > Mike
            >> >
            >> >
            >> >
            >> >
            >> > Yahoo! Groups Links
            >> >
            >> >
            >> >
            >> >
            >> >
            >> > --
            >> > No virus found in this incoming message.
            >> > Checked by AVG Free Edition.
            >> > Version: 7.5.503 / Virus Database: 269.17.0/1180 - Release Date:
            >> > 10/12/2007 14:51
            >> >
            >> >
            >>
            >
            >
            >
            >
            >
            > Yahoo! Groups Links
            >
            >
            >
            >
            >
            > --
            > No virus found in this incoming message.
            > Checked by AVG Free Edition.
            > Version: 7.5.503 / Virus Database: 269.17.1/1182 - Release Date:
            > 12/12/2007 11:29
            >
            >
          • Satyam
            I just added this capability to my sample at: http://satyam.com.ar/yui/invoice.html Check in the source for variable recordRefs. Satyam ... From: Mike M.
            Message 5 of 14 , Dec 14, 2007
            • 0 Attachment
              I just added this capability to my sample at:

              http://satyam.com.ar/yui/invoice.html

              Check in the source for variable recordRefs.

              Satyam

              ----- Original Message -----
              From: "Mike M." <guiltyspark05@...>
              To: <ydn-javascript@yahoogroups.com>
              Sent: Friday, December 14, 2007 8:06 AM
              Subject: [ydn-javascript] Re: Using DataTable with Drag and Drop: Part II


              > That was very helpful, thank you!
              >
              > Is there any trick method for comparing the record that I intend to
              > add against the records in the destination table. Basically I,
              > instead of blindly adding whatever I drop on the table, want to either
              > add a new record (if it doesn't already exist) or increment a column
              > value (if the record does already exist in the table). I imagine that
              > iterating through the table one record at a time might be rather slow
              > if the table were to grow to a large size.
              >
              > I think if I can figure this out, then tie it together with my
              > database, I'll have something really cool to share with you all.
              >
              >
              > -Mike
              >
              >
              > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
              >>
              >> The id property with '-table' appended is the same as the id
              > attribute you
              >> would get from the HTML table element. You could store a reference
              > to each
              >> DataTable, indexed by the id of each one (they are unique):
              >>
              >> myTableArray[myNthDataTable.id + '-table'] = myNthDataTable;
              >>
              >> Actually, the id is the prefix for most DOM element ids.
              >>
              >> Also:
              >>
              >> myTableArray[myNthDataTable.getTableEl().id] = myNthDataTable;
              >>
              >> Either should point you to the right table in no time at all.
              >>
              >> Satyam
              >>
              >>
              >>
              >>
              >>
              >>
              >>
              >> ----- Original Message -----
              >> From: "Mike M." <guiltyspark05@...>
              >> To: <ydn-javascript@yahoogroups.com>
              >> Sent: Wednesday, December 12, 2007 7:38 AM
              >> Subject: [ydn-javascript] Using DataTable with Drag and Drop: Part II
              >>
              >>
              >> > Hey everyone,
              >> >
              >> > So my experiment into adding drag and drop functionality to a YUI
              >> > DataTable continues... The ultimate goal of this experiment was to
              >> > see if I could create DataTables that would allow you to either
              >> > perform drag and drop sorting or more importantly, drag a row from one
              >> > table and drop it into another, thus updating the underlying database
              >> > and retaining sorting functionality within the destination table.
              >> >
              >> > My latest stumbling block is as follows... When you release the mouse
              >> > button over the destination table, I can read in the HTML Element ID
              >> > of that table. Is there a way to use that ID (or any other method) to
              >> > find out which of my DataTables that ID belongs to? I want to be able
              >> > to, within the event handling function, call the AddRow() function on
              >> > the table I'm dropping on and similarly call DeleteRow() on the source
              >> > table.
              >> >
              >> > Thank you all for your help with this so far and I really hope someone
              >> > out there has some ideas for me. I could I think maintain a global
              >> > array of the ID's of the tables that I make, and have the event
              >> > handler call out to a function that compares against the array and
              >> > then perform the task, but I'd prefer to do this a cleaner way if
              >> > there is one.
              >> >
              >> > Thanks,
              >> > Mike
              >> >
              >> >
              >> >
              >> >
              >> > Yahoo! Groups Links
              >> >
              >> >
              >> >
              >> >
              >> >
              >> > --
              >> > No virus found in this incoming message.
              >> > Checked by AVG Free Edition.
              >> > Version: 7.5.503 / Virus Database: 269.17.0/1180 - Release Date:
              >> > 10/12/2007 14:51
              >> >
              >> >
              >>
              >
              >
              >
              >
              >
              > Yahoo! Groups Links
              >
              >
              >
              >
              >
              > --
              > No virus found in this incoming message.
              > Checked by AVG Free Edition.
              > Version: 7.5.503 / Virus Database: 269.17.1/1182 - Release Date:
              > 12/12/2007 11:29
              >
              >
            • Mike M.
              I ve got a couple questions for you about your invoice example. First question: If I wanted to add my records to the associative array outside of the
              Message 6 of 14 , Dec 20, 2007
              • 0 Attachment
                I've got a couple questions for you about your invoice example.

                First question: If I wanted to add my records to the associative
                array outside of the formatter function, it seems to me that I should
                be able to add my record to the array in the onDragDrop event handler.
                I've tried to implement this but for some reason it seems that the
                record updates but the table does not reflect this visually. Any
                thoughts?

                Second question: In your example, once you have moved an item from
                the source table (or even just selected it) future selections do not
                cause the row to highlight any more. Is there a way to resolve this
                issue?
              • Satyam
                ... From: Mike M. To: Sent: Friday, December 21, 2007 7:09 AM Subject: [ydn-javascript] Re: Using
                Message 7 of 14 , Dec 21, 2007
                • 0 Attachment
                  ----- Original Message -----
                  From: "Mike M." <guiltyspark05@...>
                  To: <ydn-javascript@yahoogroups.com>
                  Sent: Friday, December 21, 2007 7:09 AM
                  Subject: [ydn-javascript] Re: Using DataTable with Drag and Drop: Part II


                  > I've got a couple questions for you about your invoice example.
                  >
                  > First question: If I wanted to add my records to the associative
                  > array outside of the formatter function, it seems to me that I should
                  > be able to add my record to the array in the onDragDrop event handler.

                  Yes, there should be no problem. In this example it could be done since the
                  table starts always empty and the only records in the array would be those
                  dragged into the destination. If the destination does not start empty, say
                  you resume an invoice you left pending, then it would not be enough.

                  > I've tried to implement this but for some reason it seems that the
                  > record updates but the table does not reflect this visually. Any
                  > thoughts?
                  >

                  DataTable's addRow and updateRow method make changes visible immediately.
                  If you are updating the Record object or adding to the Recordset, then that
                  does not get reflected in the DataTable until you call refreshView.

                  > Second question: In your example, once you have moved an item from
                  > the source table (or even just selected it) future selections do not
                  > cause the row to highlight any more. Is there a way to resolve this
                  > issue?

                  See why I could never be a graphics designer? This is the second message
                  I've got today about a visual clue going wrong and I've missed both.

                  It is now fixed. The problem is with the cancelDrag method which the
                  DragDrop component does not have and so I improvised one. The component has
                  no way to do a 'drag and drop a copy', it always moves the dragged element,
                  it does not drag and on the drop, leave the original and drop a copy.
                  That's what the cancelDrag helps me do. I take the drop target and use the
                  dragged element to drop a copy on that target, but I then cancel the drag.
                  I am just discovering all that the drag leaves behind.

                  I found that DD leaves a listener on the mouseDown event for the dragged
                  element. Since in this case it is left on the TR element of the table and
                  it is captured, it doesn't have a chance to bubble all the way up to the
                  TABLE element and so the DataTable could not do the selectRow. The row
                  could still be dragged since it was under the control of the
                  DragDropManager, but the DataTable never got a chance to pick mousedowns on
                  those rows.

                  Also, when I create the DDProxy for the source row, I didn't specify that
                  the source row is not a target for drops so, once you had dragged a row to
                  the invoice, the source row could become a drop target. This also showed as
                  a highlighting when further rows were dragged over other previously dragged
                  source rows. I simply set the isTarget property of each newly created
                  DDProxy to false.

                  Thanks for pointing this out, I wouldn't have noticed otherwise.

                  Satyam




                  >
                  >
                  >
                  >
                  > Yahoo! Groups Links
                  >
                  >
                  >
                  >
                  >
                  > --
                  > No virus found in this incoming message.
                  > Checked by AVG Free Edition.
                  > Version: 7.5.503 / Virus Database: 269.17.5/1190 - Release Date:
                  > 19/12/2007 19:37
                  >
                  >
                • Mike M.
                  The invoice example is better and I can see now that after you drag and drop an element you can select (with a highlight) the same element again.
                  Message 8 of 14 , Dec 22, 2007
                  • 0 Attachment
                    The invoice example is better and I can see now that after you drag
                    and drop an element you can select (with a highlight) the same element
                    again. Unfortunately what I now see is that if you simply click on
                    but do not drag a row in the source table, it doesn't highlight again
                    until after you drag and drop it.

                    To see this issue follow these simple steps:

                    1. Click on but do not drag row 1 of the source table.
                    2. Click on but do not drag row 2 of the source table.
                    3. Click on but do not drag row 1 of the source table.

                    Sorry, that was probably not necessary but I wanted to make sure that
                    I was clear. As you can see, row 1 will not highlight now until you
                    drag and drop it. At this point the above procedure is repeatable.


                    --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
                    >
                    >
                    > ----- Original Message -----
                    > From: "Mike M." <guiltyspark05@...>
                    > To: <ydn-javascript@yahoogroups.com>
                    > Sent: Friday, December 21, 2007 7:09 AM
                    > Subject: [ydn-javascript] Re: Using DataTable with Drag and Drop:
                    Part II
                    >
                    >
                    > > I've got a couple questions for you about your invoice example.
                    > >
                    > > First question: If I wanted to add my records to the associative
                    > > array outside of the formatter function, it seems to me that I should
                    > > be able to add my record to the array in the onDragDrop event handler.
                    >
                    > Yes, there should be no problem. In this example it could be done
                    since the
                    > table starts always empty and the only records in the array would be
                    those
                    > dragged into the destination. If the destination does not start
                    empty, say
                    > you resume an invoice you left pending, then it would not be enough.
                    >
                    > > I've tried to implement this but for some reason it seems that the
                    > > record updates but the table does not reflect this visually. Any
                    > > thoughts?
                    > >
                    >
                    > DataTable's addRow and updateRow method make changes visible
                    immediately.
                    > If you are updating the Record object or adding to the Recordset,
                    then that
                    > does not get reflected in the DataTable until you call refreshView.
                    >
                    > > Second question: In your example, once you have moved an item from
                    > > the source table (or even just selected it) future selections do not
                    > > cause the row to highlight any more. Is there a way to resolve this
                    > > issue?
                    >
                    > See why I could never be a graphics designer? This is the second
                    message
                    > I've got today about a visual clue going wrong and I've missed both.
                    >
                    > It is now fixed. The problem is with the cancelDrag method which the
                    > DragDrop component does not have and so I improvised one. The
                    component has
                    > no way to do a 'drag and drop a copy', it always moves the dragged
                    element,
                    > it does not drag and on the drop, leave the original and drop a copy.
                    > That's what the cancelDrag helps me do. I take the drop target and
                    use the
                    > dragged element to drop a copy on that target, but I then cancel the
                    drag.
                    > I am just discovering all that the drag leaves behind.
                    >
                    > I found that DD leaves a listener on the mouseDown event for the
                    dragged
                    > element. Since in this case it is left on the TR element of the
                    table and
                    > it is captured, it doesn't have a chance to bubble all the way up to
                    the
                    > TABLE element and so the DataTable could not do the selectRow. The row
                    > could still be dragged since it was under the control of the
                    > DragDropManager, but the DataTable never got a chance to pick
                    mousedowns on
                    > those rows.
                    >
                    > Also, when I create the DDProxy for the source row, I didn't specify
                    that
                    > the source row is not a target for drops so, once you had dragged a
                    row to
                    > the invoice, the source row could become a drop target. This also
                    showed as
                    > a highlighting when further rows were dragged over other previously
                    dragged
                    > source rows. I simply set the isTarget property of each newly created
                    > DDProxy to false.
                    >
                    > Thanks for pointing this out, I wouldn't have noticed otherwise.
                    >
                    > Satyam
                    >
                    >
                    >
                    >
                    > >
                    > >
                    > >
                    > >
                    > > Yahoo! Groups Links
                    > >
                    > >
                    > >
                    > >
                    > >
                    > > --
                    > > No virus found in this incoming message.
                    > > Checked by AVG Free Edition.
                    > > Version: 7.5.503 / Virus Database: 269.17.5/1190 - Release Date:
                    > > 19/12/2007 19:37
                    > >
                    > >
                    >
                  • Mike M.
                    The invoice example is better and I can see now that after you drag and drop an element you can select (with a highlight) the same element again. Unfortunately
                    Message 9 of 14 , Dec 26, 2007
                    • 0 Attachment
                      The invoice example is better and I can see now that after you drag
                      and drop an element you can select (with a highlight) the same element
                      again. Unfortunately what I now see is that if you simply click on
                      but do not drag a row in the source table, it doesn't highlight again
                      until after you drag and drop it.

                      To see this issue follow these simple steps:

                      1. Click on but do not drag row 1 of the source table.
                      2. Click on but do not drag row 2 of the source table.
                      3. Click on but do not drag row 1 of the source table.

                      Sorry, that was probably not necessary but I wanted to make sure that
                      I was clear. As you can see, row 1 will not highlight now until you
                      drag and drop it. At this point the above procedure is repeatable.
                    • Satyam
                      Hi Mike Sorry I didn t reply to your first message, initially I thought it would be easy to find a solution and reply when done. Unfortunately D&D is not
                      Message 10 of 14 , Dec 27, 2007
                      • 0 Attachment
                        Hi Mike

                        Sorry I didn't reply to your first message, initially I thought it would be
                        easy to find a solution and reply when done. Unfortunately D&D is not
                        something I really know about that much and I'm still trying to figure that
                        out. I know what's wrong, but don't know how to fix it. I know I could set
                        up a DDProxy on each and every row in the source datatable, that would be
                        easy and for the example quite enough because there are only 4 rows. In a
                        real-life example, though, that would be too onerous, it is better to listen
                        for mousedowns on the whole datatable and then set up the row to actually
                        move so there is a single listener for the table instead of one per row.
                        There is also the problem that once the DDProxy object is set on the row, it
                        catches the events on that row before they get to bubble up to the table and
                        disable some of the functionality of the table itself. And then, there was
                        Xmas

                        Satyam

                        ----- Original Message -----
                        From: "Mike M." <guiltyspark05@...>
                        To: <ydn-javascript@yahoogroups.com>
                        Sent: Thursday, December 27, 2007 1:03 AM
                        Subject: [ydn-javascript] Re: Using DataTable with Drag and Drop: Part II


                        > The invoice example is better and I can see now that after you drag
                        > and drop an element you can select (with a highlight) the same element
                        > again. Unfortunately what I now see is that if you simply click on
                        > but do not drag a row in the source table, it doesn't highlight again
                        > until after you drag and drop it.
                        >
                        > To see this issue follow these simple steps:
                        >
                        > 1. Click on but do not drag row 1 of the source table.
                        > 2. Click on but do not drag row 2 of the source table.
                        > 3. Click on but do not drag row 1 of the source table.
                        >
                        > Sorry, that was probably not necessary but I wanted to make sure that
                        > I was clear. As you can see, row 1 will not highlight now until you
                        > drag and drop it. At this point the above procedure is repeatable.
                        >
                        >
                        >
                        >
                        > Yahoo! Groups Links
                        >
                        >
                        >
                        >
                        >
                        > --
                        > No virus found in this incoming message.
                        > Checked by AVG Free Edition.
                        > Version: 7.5.516 / Virus Database: 269.17.9/1197 - Release Date:
                        > 25/12/2007 20:04
                        >
                        >
                      • Satyam
                        I almost have it now. I changed the code for the drag and drop, set up a listener for the whole source table and draw my own DD proxy element to fit the size
                        Message 11 of 14 , Dec 27, 2007
                        • 0 Attachment
                          I almost have it now. I changed the code for the drag and drop, set up a
                          listener for the whole source table and draw my own DD proxy element to fit
                          the size of a row instead of the whole table as it would do by default. I
                          also had to adjust its position, otherwise it would show up aligned with the
                          first element of the table.

                          I used method highlightRow for the source table rows, which is less sticky
                          so it doesn't leave much behind.

                          I guess that I should do something similar for the destination. Just as I
                          have a single DD source for all the items in the first table, so I should
                          for the destination table. I didn't do it because usually you would have
                          many more source articles than what a customer carries so it is to be
                          expected that there won't be that many D&D targets as sources.

                          I also fixed something anoying it had. The source element was left with
                          position:relative and, don't ask me why, that made the borders dissappear.
                          Since that setting is made after the last overridable function is called, I
                          set a timer to call a function to set it back to relative. This makes the
                          source table flash for a little while, but it is the only solution I found.
                          I don't like the Drag and Drop component.

                          Satyam

                          ----- Original Message -----
                          From: "Satyam" <satyam@...>
                          To: <ydn-javascript@yahoogroups.com>
                          Sent: Thursday, December 27, 2007 9:46 AM
                          Subject: Re: [ydn-javascript] Re: Using DataTable with Drag and Drop: Part
                          II


                          > Hi Mike
                          >
                          > Sorry I didn't reply to your first message, initially I thought it would
                          > be
                          > easy to find a solution and reply when done. Unfortunately D&D is not
                          > something I really know about that much and I'm still trying to figure
                          > that
                          > out. I know what's wrong, but don't know how to fix it. I know I could
                          > set
                          > up a DDProxy on each and every row in the source datatable, that would be
                          > easy and for the example quite enough because there are only 4 rows. In a
                          > real-life example, though, that would be too onerous, it is better to
                          > listen
                          > for mousedowns on the whole datatable and then set up the row to actually
                          > move so there is a single listener for the table instead of one per row.
                          > There is also the problem that once the DDProxy object is set on the row,
                          > it
                          > catches the events on that row before they get to bubble up to the table
                          > and
                          > disable some of the functionality of the table itself. And then, there
                          > was
                          > Xmas
                          >
                          > Satyam
                          >
                          > ----- Original Message -----
                          > From: "Mike M." <guiltyspark05@...>
                          > To: <ydn-javascript@yahoogroups.com>
                          > Sent: Thursday, December 27, 2007 1:03 AM
                          > Subject: [ydn-javascript] Re: Using DataTable with Drag and Drop: Part II
                          >
                          >
                          >> The invoice example is better and I can see now that after you drag
                          >> and drop an element you can select (with a highlight) the same element
                          >> again. Unfortunately what I now see is that if you simply click on
                          >> but do not drag a row in the source table, it doesn't highlight again
                          >> until after you drag and drop it.
                          >>
                          >> To see this issue follow these simple steps:
                          >>
                          >> 1. Click on but do not drag row 1 of the source table.
                          >> 2. Click on but do not drag row 2 of the source table.
                          >> 3. Click on but do not drag row 1 of the source table.
                          >>
                          >> Sorry, that was probably not necessary but I wanted to make sure that
                          >> I was clear. As you can see, row 1 will not highlight now until you
                          >> drag and drop it. At this point the above procedure is repeatable.
                          >>
                          >>
                          >>
                          >>
                          >> Yahoo! Groups Links
                          >>
                          >>
                          >>
                          >>
                          >>
                          >> --
                          >> No virus found in this incoming message.
                          >> Checked by AVG Free Edition.
                          >> Version: 7.5.516 / Virus Database: 269.17.9/1197 - Release Date:
                          >> 25/12/2007 20:04
                          >>
                          >>
                          >
                          >
                          >
                          >
                          > Yahoo! Groups Links
                          >
                          >
                          >
                          >
                          >
                          > --
                          > No virus found in this incoming message.
                          > Checked by AVG Free Edition.
                          > Version: 7.5.516 / Virus Database: 269.17.9/1198 - Release Date:
                          > 26/12/2007 17:26
                          >
                          >
                        • Mike M.
                          Hey Satyam, Thank you for all your help so far and you needn t apologize for the delayed response. The holiday kept everyone busy and I didn t even get back
                          Message 12 of 14 , Dec 30, 2007
                          • 0 Attachment
                            Hey Satyam,

                            Thank you for all your help so far and you needn't apologize for the
                            delayed response. The holiday kept everyone busy and I didn't even
                            get back to check for a response until the other day. I just figured
                            the bump was called for to prevent the message from getting lost in
                            the pile.

                            I understand the highlighting problem as you have described it I have
                            also failed so far to come up with a good solution to it.

                            I am looking at a slightly different scenario than has been presented
                            so far. I'm going to have about four of these source/destination
                            table pairings on a single page. Each source table will be tied
                            directly to a specific destination table. As a result I am struggling
                            to try and consolidate this drag drop code into something more reusable.

                            I had a thought about extending DataTable so that I could provide a
                            reference to the destination table as an additional parameter (for use
                            with the necessary Drag and Drop logic) but I haven't had any luck
                            getting that to work for me. Any advice would be welcome.

                            Sorry if I sound too much like I'm asking you to hold my hand but I'm
                            new to javascript, let alone YUI, so this project is kind of beating
                            me up and unfortunately I'm on a short time frame.

                            Thanks again,

                            -Mike
                          • Mike M.
                            Hey Satyam, I ve got a couple of breakthroughs on my end of things. After working with your example and some of my own code I was able to solve a couple
                            Message 13 of 14 , Jan 2, 2008
                            • 0 Attachment
                              Hey Satyam,

                              I've got a couple of breakthroughs on my end of things. After working
                              with your example and some of my own code I was able to solve a couple
                              issues.

                              To begin with I, for now, opted not to switch over to your new method
                              of only having one drag and drop listener on the table. Most of what
                              I have done is based on your previous version.

                              I was able to solve the disappearing borders problem by providing an
                              empty event handler override for the DDProxy row element as follows:

                              var ddRow = new YAHOO.util.DDProxy(sourceDT.getTrEl(i));

                              ddRow.onDragDrop = function(e, id)
                              {
                              ..... previously discussed code .....
                              };

                              ddRow.endDrag = function(e)
                              {
                              };

                              Doing this prevents some of the style changes that the default DDProxy
                              endDrag method would make, namely hiding the element. It also
                              prevents the DDM from moving the element to its destination location.
                              I can't see that this causes any harm anywhere so it seems like a
                              clean solution to me. Also, for my application I did not define any
                              of the other DDProxy overrides, only the two above.

                              As for the selection bug, I have yet to come up with a better
                              solution. What I have done in testing is turn every tr in the source
                              table into a DDProxy upon build (which I know is not a good solution
                              once the table grows to any large size). I still added:

                              sourceDT.subscribe("rowClickEvent",sourceDT.onEventSelectRow);

                              With this setup the selection seems to work normally in the manner
                              that we would want. I don't really understand how this fixed the
                              situation. The reason I did the pre-DDProxy creation was simply
                              because I found it irritating to have to click on a row once before
                              clicking and dragging could take place.

                              I hope this is of some interest to you since you've been so helpful to me.

                              At this point I've got my DataTables dragging and dropping how I want
                              for my application so I'm moving on to my next big problem which I
                              will be creating a new post about shortly.
                            • Mike M.
                              One more thing! I implimented this code in my application. You ll recognize the parts that I carried over from your example. I figured that the invoice
                              Message 14 of 14 , Jan 2, 2008
                              • 0 Attachment
                                One more thing! I implimented this code in my application. You'll
                                recognize the parts that I carried over from your example. I figured
                                that the invoice example on your site could, like my application,
                                benefit from an extra step which would check the see if you've
                                modified to quantity to 0 and, if so, delete that row from the invoice.

                                I was proud of myself for coming up with this (don't laugh) so I
                                thought I'd share it with you.


                                function SaveQuantity(oArgs)
                                {
                                if (oArgs.editor.cell.innerHTML == 0)
                                {
                                row = this.getTrEl(oArgs.editor.cell);
                                record = this.getRecord(row);

                                this.deleteRow(row);
                                delete recordRefs[record.getData().id];
                                }
                                else
                                this.refreshRow(oArgs);
                                };

                                destDT.subscribe("editorSaveEvent", SaveQuantity);
                              Your message has been successfully submitted and would be delivered to recipients shortly.