webform DataGrid - row drag-n-drop to reorganize - is it possible?

Discussion in 'ASP .Net Web Controls' started by James Radke, Nov 26, 2003.

  1. James Radke

    James Radke Guest

    Hello,

    I am writing a vb.net webform application, and was curious if it was
    possible to somehow code it so that the user can select a row by clicking
    it, and then using the mouse to drag it up to a different position within
    the grid (i.e. move the tenth row to between the first and second, etc.)?

    If it is possible, does anyone have an example they would be willing to
    share?

    And, if I can't do it with a datagrid, is there a different web control that
    I CAN do it with that would allow me to present a similar display of a list
    of items?

    Thanks!

    Jim
     
    James Radke, Nov 26, 2003
    #1
    1. Advertising

  2. James Radke

    MSFT Guest

    Hi James,

    The .NET Datagrid web control doesn't have some event like dragstart or
    dragenter, so that it doesn't support to drag a row in/out. Besides
    datagrid, we can use datalist or repeater to list data, however, they also
    didn't support drag.

    Luke
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)
     
    MSFT, Nov 27, 2003
    #2
    1. Advertising

  3. James Radke

    James Radke Guest

    Luke,

    I am aware of that, but can't we somehow use Style: Behaviors and javascript
    to do something like that? I have seen where they can dynamically drag and
    drop various column headers to switch the order of the columns dynamically
    client-side; and click on the header to dynamically sort the data
    client-side. Examples are:

    http://www.Planet-Source-Code.com/vb/scripts/ShowCode.asp?txtCodeId=1545&lngWId=10

    or

    the test_repeater at
    http://www.v4cnet.com/articles/aspdotnet/aspdotnet_004.xml

    So why can't we use a similar method to move the row within the table, and
    then call a web-service to update the records behind the scenes so that the
    next time you need to do a full page refresh the table will build correctly?

    My issue is that I don't understand the behaviors / javascript well enough
    to figure out the modifications to do that!

    Can you point me in the right direction?

    Jim

    "MSFT" <> wrote in message
    news:...
    > Hi James,
    >
    > The .NET Datagrid web control doesn't have some event like dragstart or
    > dragenter, so that it doesn't support to drag a row in/out. Besides
    > datagrid, we can use datalist or repeater to list data, however, they also
    > didn't support drag.
    >
    > Luke
    > Microsoft Online Support
    >
    > Get Secure! www.microsoft.com/security
    > (This posting is provided "AS IS", with no warranties, and confers no
    > rights.)
    >
     
    James Radke, Nov 27, 2003
    #3
  4. James Radke

    MSFT Guest

    Hi Jim,

    I studied the first sample and I found he implement the drag-drop with
    these thicks:

    The dataGrid implement a clas define in a htc file, with this file, the
    datagrid will have enhanced functions with client script. As we know the
    datagrid will be render a Table in client browser. In the sample, when user
    click a cell in the table, a movable <DIV> will be add to the document,
    simulate the draged object. in mouse up event, he check if it is dragmode
    and implement the function. You can check the file "xptable.htc" for
    detail.

    This may enlighten us to do in the same way: In mouse down event of first
    table, get the row ID and create a DIV as draged object; In the mouse up
    event of second table, add a row and delete the row from first table.

    Luke
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)
     
    MSFT, Nov 28, 2003
    #4
  5. James Radke

    James Radke Guest

    Luke,

    Two questions:

    1.) Why are you talking about multiple tables (i.e. first and second)? I
    though we were only working on one table here to reorganize, not add/delete
    rows?

    and

    2.) Is there a way to have a sortable/moveable table like the one in the
    sample, AND have the table header row be fixed so that it doesn't scroll off
    the screen? When I define my repeater (or could be a datagrid) which
    displays my data (as shown in the following) the column re-org works, and
    the header row click to sort works, but when I use the scroll bars from the
    DIV, the headers move out of sight as you scroll down, and I would like to
    always keep them visible; and I cannot figure out how to do that:

    <DIV id="divOrderDetail" style="OVERFLOW-Y: scroll; LEFT: 7px;
    OVERFLOW-X: hidden; WIDTH: 1027px; POSITION: absolute; TOP: 130px; HEIGHT:
    432px">
    <asp:Repeater id="RepeaterSort" runat="server" EnableViewState="False">
    <ItemTemplate>
    <tr valign="Top" class="SalesOrderData">
    <td width="65px"><%# DataBinder.Eval(Container.DataItem, "ORDNUM")
    %></td>
    <td width="75px"><%# DataBinder.Eval(Container.DataItem, "CUSTID")
    %></td>
    <td width="250px"><%# DataBinder.Eval(Container.DataItem, "Name")
    %></td>
    <td width="225px"><%# DataBinder.Eval(Container.DataItem, "CUSTPO")
    %></td>
    <td width="60px"><%# Format(DataBinder.Eval(Container.DataItem,
    "ORDDTE"),"MM/dd/yy") %></td>
    <td width="60px"><%# DataBinder.Eval(Container.DataItem, "STATUS")
    %></td>
    <td width="50px"><%# DataBinder.Eval(Container.DataItem, "OrderType")
    %></td>
    <td width="230px"><%# DataBinder.Eval(Container.DataItem,
    "ShipToName") %></td>
    </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
    <tr valign="Top" class="SalesOrderDataShaded">
    <td width="65px"><%# DataBinder.Eval(Container.DataItem, "ORDNUM")
    %></td>
    <td width="75px"><%# DataBinder.Eval(Container.DataItem, "CUSTID")
    %></td>
    <td width="250px"><%# DataBinder.Eval(Container.DataItem, "Name")
    %></td>
    <td width="225px"><%# DataBinder.Eval(Container.DataItem, "CUSTPO")
    %></td>
    <td width="60px"><%# Format(DataBinder.Eval(Container.DataItem,
    "ORDDTE"),"MM/dd/yy") %></td>
    <td width="60px"><%# DataBinder.Eval(Container.DataItem, "STATUS")
    %></td>
    <td width="50px"><%# DataBinder.Eval(Container.DataItem, "OrderType")
    %></td>
    <td width="230px"><%# DataBinder.Eval(Container.DataItem,
    "ShipToName") %></td>
    </tr>
    </AlternatingItemTemplate>
    <HeaderTemplate>
    <table id="mytable" class="xpTable" width="1015"
    cellSpacing="0" cellPadding="0" border="0" dragcolor='gray'
    slcolor="#ffffcc" hlcolor="#BEC5DE">
    <thead>
    <tr Class="SalesOrderHeadingSmall" valign="Bottom">
    <td width="65px">Order #</td>
    <td width="75px">Customer</td>
    <td width="250px">Customer Name</td>
    <td width="225px">Customer PO</td>
    <td width="60px">Date</td>
    <td width="60px">Status</td>
    <td width="50px">Type</td>
    <td width="230px">Ship To Name</td>
    </tr>
    </thead>
    <tbody>
    </HeaderTemplate>
    <FooterTemplate>
    </tbody>
    </table>
    </FooterTemplate>
    </asp:Repeater>
    </div>
    <DIV id="divOrderDetailFooter" style="LEFT: 7px; WIDTH: 1025px; POSITION:
    absolute; TOP: 562px; HEIGHT: 10px">
    <TABLE cellSpacing="0" cellPadding="0" width="985" border="0">
    <TR>
    <TD class="SalesOrderHeadingSmall" vAlign="bottom" align="left"
    width="442"><asp:label id="lblRecords" runat="server" Width="200px"
    CssClass="SalesOrderFooterLeft"></asp:label></TD>
    <TD class="SalesOrderHeadingSmall" vAlign="bottom" align="right"
    width="443"><asp:label id="lblSort" runat="server" Width="200px"
    CssClass="SalesOrderFooterRight"></asp:label></TD>
    </TR>
    </TABLE>
    </DIV>

    "MSFT" <> wrote in message
    news:...
    > Hi Jim,
    >
    > I studied the first sample and I found he implement the drag-drop with
    > these thicks:
    >
    > The dataGrid implement a clas define in a htc file, with this file, the
    > datagrid will have enhanced functions with client script. As we know the
    > datagrid will be render a Table in client browser. In the sample, when

    user
    > click a cell in the table, a movable <DIV> will be add to the document,
    > simulate the draged object. in mouse up event, he check if it is dragmode
    > and implement the function. You can check the file "xptable.htc" for
    > detail.
    >
    > This may enlighten us to do in the same way: In mouse down event of first
    > table, get the row ID and create a DIV as draged object; In the mouse up
    > event of second table, add a row and delete the row from first table.
    >
    > Luke
    > Microsoft Online Support
    >
    > Get Secure! www.microsoft.com/security
    > (This posting is provided "AS IS", with no warranties, and confers no
    > rights.)
    >
     
    James Radke, Nov 28, 2003
    #5
  6. James Radke

    MSFT Guest

    HI James,

    To make the title not movable, you have to move it out of the DIV. The
    scroll of DIV will roll all content inside of it. For exmaple, you can use
    a <Table> to show the title bar and a datalist/datagrid to show the
    records.

    Luke
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)
     
    MSFT, Dec 1, 2003
    #6
  7. James Radke

    James Radke Guest

    Luke,

    I already knew that I would have use a separate table; but my question was,
    can I use the headers of the separate 'titles' table to control the sort /
    column drag of the 'dataonly' table? And if so, how could I do that? That
    is the part that I don't quite understand how to accomplish!

    Thanks!

    JIM

    "MSFT" <> wrote in message
    news:OkNh7d%...
    > HI James,
    >
    > To make the title not movable, you have to move it out of the DIV. The
    > scroll of DIV will roll all content inside of it. For exmaple, you can use
    > a <Table> to show the title bar and a datalist/datagrid to show the
    > records.
    >
    > Luke
    > Microsoft Online Support
    >
    > Get Secure! www.microsoft.com/security
    > (This posting is provided "AS IS", with no warranties, and confers no
    > rights.)
    >
     
    James Radke, Dec 1, 2003
    #7
  8. James Radke

    MSFT Guest

    Hi Jim,

    For sorting, here is my thoughts:

    We can bind the datagrid to a DataView which support Sort property. For
    title table, we can add some asp.net linkbutton or button as title bar. In
    their click event, we can change the DataRow's Sort property according to
    the sender, and rebind the DataView to DataGrid.

    For drag function, I think we have to implement with client side script and
    you may refer the first sample in your previous post.

    Luke
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)
     
    MSFT, Dec 2, 2003
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Oliver Klein
    Replies:
    0
    Views:
    714
    Oliver Klein
    Aug 24, 2003
  2. tiewknvc9

    jtable drag and drop a row

    tiewknvc9, Nov 15, 2005, in forum: Java
    Replies:
    1
    Views:
    13,015
  3. mark4asp
    Replies:
    1
    Views:
    407
    mark4asp
    Jan 21, 2005
  4. David Spencer
    Replies:
    0
    Views:
    421
    David Spencer
    Jan 28, 2005
  5. James Radke

    listbox drag-n-drop - is it possible on a webform?

    James Radke, Sep 16, 2003, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    273
    Alvin Bruney
    Sep 17, 2003
Loading...

Share This Page