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

Regarding the Reorder Rows with Drag and Drop in a datatable

Expand Messages
  • nagaraj
    Hi, All     I have a requirement in such a way that I need to re-order the datatable rows,where the rows consists of textboxes where usercan enter the
    Message 1 of 3 , Oct 20, 2009
    • 0 Attachment

      Hi, All

       

        I have a requirement in such a way that I need to re-order the datatable rows,where the rows consists of textboxes where usercan enter the desired text…

       

      With the help of example mentioned in http://developer.yahoo.com/yui/examples/datatable/dt_ddrows.html  I am able to achieve the drag and drop feature successfully..but

      1.When I try to click on any of the text boxes I am unable to see the cursor in it..

       

      2.And I too have the sequence numbers to the rows of a datatable..when I try to drag and drop a particular row it need to change the sequence number according to the location..for this I have done some thing like this…

       

                    myDataTable.subscribe("rowAddEvent",function(e){

                        var id = e.record.getId();

                        myDTDrags[id] = new YAHOO.example.DDRows(id);

                        myDataTable.render();

                        var i, id,

                            allRows = this.getTbodyEl().rows;

                                    replacableArray=this.getTbodyEl().rows;

                        for(i=0; i<allRows.length; i++) {

                            id = allRows[i].id;

                            // Clean up any existing Drag instances

                            if (myDTDrags[id]) {

                                 myDTDrags[id].unreg();

                                 delete myDTDrags[id];

                            }

                            // Create a Drag instance for each row

                            myDTDrags[id] = new YAHOO.example.DDRows(id);

                        }

                       

                    })

       

      Where I am rendering the datatable once again…and again creating the drag instance for each row..is there a better way to handle this..

       

      Can any one help me out…

       

      Thanks in advance

       



      Keep up with people you care about with Yahoo! India Mail. Learn how.
    • nagaraj
      The problem where I am facing is when I drag first row over the other row its show that its swapping correctly but when I try to see the values they are not
      Message 2 of 3 , Oct 23, 2009
      • 0 Attachment

        The problem where I am facing is when I drag first row over the other row its show that its swapping correctly but when I try to see the values they are not getting changed.

         

        Some thing like this

         

        1. First row is some thing like this (the datatable's data is dynamic)

                                             (Datatable before swapping)

        Name0 TextField

        Address0 TextField

        Country0 TextField

        Name1 TextField

        Address1 TextField

        Country1 TextField

                     

        When I dragged Name0 TextField row to the Name1 TextField it swapped successfully

         

        Which in term looks like this on UI

         

        (Datatable after swapping)

         

        Name1 TextField

        Address1 TextField

        Country1 TextField

        Name0 TextField

        Address0 TextField

        Country0 TextField

         

         

        2. But when I try to send the datatable data to the server its not sending the second row information though UI shows two rows.

         

        Here I am sending the data by iterating through the datatable length as I have text fields in side my table. I can easily refer them by Dom.get(`Name'+i).value… when I try to view how the values are going on I noticed that first rows values are going as expected but when it comes to the sending of second row its sending the first row information only.

         

        Thanks in Advance!






        --- In ydn-javascript@yahoogroups.com, nagaraj <manne_swiss@...> wrote:
        >
        >
        >
        >
        >
        > Hi, All
        >
        >  
        >
        >   I have a requirement
        > in such a way that I need to re-order the datatable rows,where the rows
        > consists of textboxes where usercan enter the desired text…
        >
        >  
        >
        > With the help of example mentioned in http://developer.yahoo.com/yui/examples/datatable/dt_ddrows.html
        >  I am able to achieve the drag and drop
        > feature successfully..but
        >
        > 1.When I try to click on any of the text boxes I am unable
        > to see the cursor in it..
        >
        >  
        >
        > 2.And I too have the sequence numbers to the rows of a
        > datatable..when I try to drag and drop a particular row it need to change the
        > sequence number according to the location..for this I have done some thing like
        > this…
        >
        >  
        >
        >              
        > myDataTable.subscribe("rowAddEvent",function(e){
        >
        >                  
        > var id = e.record.getId();
        >
        >                  
        > myDTDrags[id] = new YAHOO.example.DDRows(id);
        >
        >                  
        > myDataTable.render();
        >
        >                  
        > var i, id,
        >
        >                       allRows = this.getTbodyEl().rows;
        >
        >                               replacableArray=this.getTbodyEl().rows;
        >
        >                  
        > for(i=0; i<allRows.length; i++) {
        >
        >                       id = allRows[i].id;
        >
        >                       // Clean up any existing Drag
        > instances
        >
        >                       if (myDTDrags[id]) {
        >
        >                            myDTDrags[id].unreg();
        >
        >                            delete myDTDrags[id];
        >
        >                       }
        >
        >                       // Create a Drag instance for
        > each row
        >
        >                       myDTDrags[id] = new YAHOO.example.DDRows(id);
        >
        >                  
        > }
        >
        >                  
        >
        >
        >              
        > })
        >
        >  
        >
        > Where I am rendering the datatable once again…and again
        > creating the drag instance for each row..is there a better way to handle this..
        >
        >  
        >
        > Can any one help me out…
        >
        >  
        >
        > Thanks in advance
        >
        >  
        >
        >
        >
        > Keep up with people you care about with Yahoo! India Mail. Learn how. http://in.overview.mail.yahoo.com/connectmore
        >
      • nagaraj
        Here is the link of the code that i am writing for drag and drop of rows with in a datatable (which is same as per
        Message 3 of 3 , Oct 25, 2009
        • 0 Attachment
          Here is the link of the code that i am writing for drag and drop of rows
          with in a datatable (which is same as per
          "http://developer.yahoo.com/yui/examples/datatable/dt_ddrows.html" ):

          http://pastebin.com/m38f55db7

          Version of YUI : 2.7
          Browsers : Firefox - 3.0.10 and IE 6.0
          Operating System: Microsoft Windows XP Professional version 2002,
          Service Pack 2




          --- In ydn-javascript@yahoogroups.com, "nagaraj" <manne_swiss@...>
          wrote:
          >
          >
          > The problem where I am facing is when I drag first row over the other
          > row its show that its swapping correctly but when I try to see the
          > values they are not getting changed.
          >
          >
          >
          > Some thing like this
          >
          >
          >
          > 1. First row is some thing like this (the datatable's data is
          > dynamic)
          >
          > (Datatable before swapping)
          >
          > Name0 TextField
          >
          > Address0 TextField
          >
          > Country0 TextField
          >
          > Name1 TextField
          >
          > Address1 TextField
          >
          > Country1 TextField
          >
          >
          >
          > When I dragged Name0 TextField row to the Name1 TextField it swapped
          > successfully
          >
          >
          >
          > Which in term looks like this on UI
          >
          >
          >
          > (Datatable after swapping)
          >
          >
          >
          > Name1 TextField
          >
          > Address1 TextField
          >
          > Country1 TextField
          >
          > Name0 TextField
          >
          > Address0 TextField
          >
          > Country0 TextField
          >
          >
          >
          >
          >
          > 2. But when I try to send the datatable data to the server its not
          > sending the second row information though UI shows two rows.
          >
          >
          >
          > Here I am sending the data by iterating through the datatable length
          as
          > I have text fields in side my table. I can easily refer them by
          > Dom.get(`Name'+i).value… when I try to view how the values
          > are going on I noticed that first rows values are going as expected
          but
          > when it comes to the sending of second row its sending the first row
          > information only.
          >
          >
          >
          > Thanks in Advance!
          >
          >
          >
          >
          >
          > --- In ydn-javascript@yahoogroups.com, nagaraj manne_swiss@ wrote:
          > >
          > >
          > >
          > >
          > >
          > > Hi, All
          > >
          > > Â
          > >
          > > Â I have a requirement
          > > in such a way that I need to re-order the datatable rows,where the
          > rows
          > > consists of textboxes where usercan enter the desired text…
          > >
          > > Â
          > >
          > > With the help of example mentioned in
          > http://developer.yahoo.com/yui/examples/datatable/dt_ddrows.html
          > > Â I am able to achieve the drag and drop
          > > feature successfully..but
          > >
          > > 1.When I try to click on any of the text boxes I am unable
          > > to see the cursor in it..
          > >
          > > Â
          > >
          > > 2.And I too have the sequence numbers to the rows of a
          > > datatable..when I try to drag and drop a particular row it need to
          > change the
          > > sequence number according to the location..for this I have done some
          > thing like
          > > this…
          > >
          > > Â
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â
          > > myDataTable.subscribe("rowAddEvent",function(e){
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â
          > > var id = e.record.getId();
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â
          > > myDTDrags[id] = new YAHOO.example.DDRows(id);
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â
          > > myDataTable.render();
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â
          > > var i, id,
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â allRows = this.getTbodyEl().rows;
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â Â Â Â Â Â Â Â Â
          > Â replacableArray=this.getTbodyEl().rows;
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â
          > > for(i=0; i<allRows.length; i++) {
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â id = allRows[i].id;
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â // Clean up any existing Drag
          > > instances
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â if (myDTDrags[id]) {
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â Â Â Â Â Â
          > myDTDrags[id].unreg();
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â Â Â Â Â Â delete
          > myDTDrags[id];
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â }
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â // Create a Drag instance for
          > > each row
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â Â Â Â Â myDTDrags[id] = new
          > YAHOO.example.DDRows(id);
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â
          > > }
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â Â
          Â
          > Â Â
          > >
          > >
          > > Â Â Â Â Â Â Â Â Â Â Â Â
          > > })
          > >
          > > Â
          > >
          > > Where I am rendering the datatable once again…and again
          > > creating the drag instance for each row..is there a better way to
          > handle this..
          > >
          > > Â
          > >
          > > Can any one help me out…
          > >
          > > Â
          > >
          > > Thanks in advance
          > >
          > > Â
          > >
          > >
          > >
          > > Keep up with people you care about with Yahoo! India Mail.
          Learn
          > how. http://in.overview.mail.yahoo.com/connectmore
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.