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

[James Radke]

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

 

[MSFT]

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]

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]

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]

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]

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]

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]

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.)