Can't get drag and drop to work

[Suzan]

Please can someone look at my code and tell me where I've gone wrong.

Trying to use drag and drop to reorder grid rows.

 

 

<telerik:RadGrid ID="AssessmentGrid" runat="server" ShowHeader="True" ShowFooter="true"

 

 

 

BorderWidth="1" CellPadding="3" AutoGenerateColumns="false" Width="600px" Skin="WebBlue"

 

 

 

AllowPaging="true" PageSize="10" AllowCustomPaging="true" VirtualItemCount="50"

 

 

 

AllowMultiRowSelection="true" OnNeedDataSource="AssessmentGrid_NeedDataSource"

 

 

 

OnPreRender="AssessmentGrid_PreRender" OnUpdateCommand="AssessmentGrid_UpdateCommand"

 

 

 

EnableAJAX="true" ShowStatusBar="true" EnableEmbeddedSkins="false" OnRowDrop="AssessmentGrid_RowDrop">

 

 

 

<PagerStyle Mode="NumericPages" />

 

 

 

<MasterTableView ShowFooter="true" DataKeyNames="assessment_plan_reference" EditMode="PopUp"

 

 

 

EditFormSettings-PopUpSettings-Width="600px" EditFormSettings-PopUpSettings-Height="700px">

 

 

 

<RowIndicatorColumn Visible="true" UniqueName="RowIndicator">

 

 

 

<HeaderStyle Width="20px" BackColor="LightSkyBlue" />

 

 

 

</RowIndicatorColumn>

 

 

 

<Columns>

 

 

 

<telerik:GridEditCommandColumn HeaderText="Edit" HeaderStyle-Width="40px" ItemStyle-Width="40px">

 

 

 

</telerik:GridEditCommandColumn>

 

 

 

<telerik:GridBoundColumn UniqueName="assessment_plan_reference" DataField="assessment_plan_reference"

 

 

 

Visible="false" runat="server" ItemStyle-Width="50px" ReadOnly="true" />

 

 

 

<telerik:GridBoundColumn UniqueName="week_number" DataField="week_number" HeaderText="Week"

 

 

 

HeaderStyle-HorizontalAlign="left" HeaderStyle-Width="70px" ItemStyle-Width="70px"

 

 

 

runat="server" ReadOnly="true" />

 

 

 

<telerik:GridBoundColumn HeaderText="Content" UniqueName="content" DataField="content"

 

 

 

runat="server">

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn HeaderText="Activity" UniqueName="activity" DataField="activity"

 

 

 

runat="server">

 

 

 

</telerik:GridBoundColumn>

 

 

 

</Columns>

 

 

 

<EditFormSettings CaptionFormatString="Edit Plan: {0}" CaptionDataField="assessment_plan_reference"

 

 

 

EditFormType="Template">

 

 

 

<EditColumn UniqueName="EditCommandColumn1">

 

 

 

</EditColumn>

 

 

 

<FormTemplate>

 

 

 

<table id="Table1" cellspacing="1" cellpadding="10" width="400px" border="1" style="border-collapse: collapse;

 

 

 

 

border-width: 2px; background: white;">

 

 

 

<tr>

 

 

 

<td>

 

 

 

</td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<td>

 

Week

 

 

<asp:Label ID="lblWeekno" runat="server" Text='<%#Bind("week_number")%>' />

 

 

 

</td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<td>

 

Content

 

 

<br />

 

 

 

<telerik:RadEditor ID="RadEditor1" runat="server" Content='<%# Bind("content") %>'

 

 

 

ToolsFile="WebBlue/ToolsFile.xml" Height="200px" Width="350px" Skin="WebBlue" />

 

 

 

</td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<td>

 

Activity

 

 

<br />

 

 

 

<telerik:RadEditor ID="RadEditor2" runat="server" Content='<%# Bind("activity") %>'

 

 

 

ToolsFile="WebBlue/ToolsFile.xml" Height="200px" Width="350px" Skin="WebBlue" />

 

 

 

</td>

 

 

 

</tr>

 

 

 

<tr>

 

 

 

<tr>

 

 

 

<td align="right" colspan="2">

 

 

 

<asp:Button ID="btnUpdate" Text='Update' runat="server" CommandName='Update'></asp:Button>&nbsp;

 

 

 

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"

 

 

 

CommandName="Cancel"></asp:Button>

 

 

 

</td>

 

 

 

</tr>

 

 

 

</table>

 

 

 

</FormTemplate>

 

 

 

</EditFormSettings>

 

 

 

</MasterTableView>

 

 

 

<ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">

 

 

 

<Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />

 

 

 

<Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>

 

 

 

<ClientEvents OnRowDropping="onRowDropping" />

 

 

 

</ClientSettings>

 

 

 

</telerik:RadGrid>

 

[Suzan]

Drag and drop code

 

 

 

 

Protected Sub AssessmentGrid_RowDrop(ByVal sender As Object, ByVal e As GridDragDropEventArgs)
        If String.IsNullOrEmpty(e.HtmlElement) Then


            If e.DraggedItems(0).OwnerGridID = AssessmentGrid.ClientID Then
                If e.DestDataItem IsNot Nothing AndAlso e.DestDataItem.OwnerGridID = AssessmentGrid.ClientID Then


                    'reorder items in   grid
                    Dim AssessmentPlans__1 As IList(Of AssessmentPlan) = AssessmentPlans
                    Dim plan As AssessmentPlan = GetPlan(AssessmentPlans__1, e.DestDataItem.GetDataKeyValue("Qualcode"))
                    Dim destinationIndex As Integer = AssessmentPlans__1.IndexOf(plan)
                    If e.DropPosition = GridItemDropPosition.Above AndAlso e.DestDataItem.ItemIndex > e.DraggedItems(0).ItemIndex Then
                        destinationIndex = destinationIndex - 1
                    End If
                    If e.DropPosition = GridItemDropPosition.Below AndAlso e.DestDataItem.ItemIndex > e.DraggedItems(0).ItemIndex Then
                        destinationIndex += 1
                    End If
                    Dim plansToMove As New List(Of AssessmentPlan)()
                    For Each draggedItem As GridDataItem In e.DraggedItems
                        Dim tmpPlan As AssessmentPlan = GetPlan(AssessmentPlans__1, draggedItem.GetDataKeyValue("Qualcode"))
                        If tmpPlan IsNot Nothing Then
                            plansToMove.Add(tmpPlan)
                        End If
                    Next
                    For Each planToMove As AssessmentPlan In plansToMove
                        AssessmentPlans__1.Remove(planToMove)
                        AssessmentPlans__1.Insert(destinationIndex, planToMove)
                    Next
                    AssessmentPlans = AssessmentPlans__1
                    AssessmentGrid.Rebind()
                    Dim destinationItemIndex As Integer = destinationIndex - (AssessmentGrid.PageSize * AssessmentGrid.CurrentPageIndex)
                    e.DestinationTableView.Items(destinationItemIndex).Selected = True
                End If
            End If
        End If

    End Sub

[Eyup]

Hi Suzan,

Please check out the following demo and try to distinguish the crucial differences between your implementation and the demonstrated approach in the demo:
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx

I hope this will prove helpful.

Greetings,
Eyup
the Telerik team