Drag drop event is not firing in the radgrid

[Rajesh]

Hi Team,

 Please find the below code, the drag and drop event is not firing in the radgrid.

Please give provide me the solutions.

Thanks,

Rajesh

 

<telerik:RadGrid ID="Parts" ClientIDMode="Static" runat="server" AllowPaging="True" AllowSorting="True" ClientSettings-AllowAutoScrollOnDragDrop="true"
AutoGenerateColumns="False" GridLines="None" ShowStatusBar="True" CssClass="Parts" ClientSettings-AllowDragToGroup="true" ClientSettings-AllowRowsDragDrop="true">
<ClientSettings AllowRowsDragDrop="true">
<Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
</ClientSettings>
<MasterTableView Name="PartsTableView" DataKeyNames="InventoryID" AllowSorting="True" NoDetailRecordsText="No Items" HierarchyLoadMode="ServerBind"
NoMasterRecordsText="No Items Added" CommandItemDisplay="Bottom" EditMode="Batch">
<CommandItemSettings ShowAddNewRecordButton="false" />
<BatchEditingSettings EditType="Cell" />
<DetailTables>
<telerik:GridTableView Name="ComponentDetails" Caption="Component Details" DataKeyNames="InventoryID"
runat="server">
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="ParentID" MasterKeyField="InventoryID" />
</ParentTableRelation>
<Columns>
<telerik:GridBoundColumn DataField="ParentID" Display="false" UniqueName="ParentID" />
<telerik:GridBoundColumn DataField="InventoryID" HeaderText="InventoryID" ReadOnly="true"
UniqueName="InventoryID" />
<telerik:GridBoundColumn DataField="FormNumber" HeaderText="Form #" UniqueName="FormNumber" />
<telerik:GridBoundColumn DataField="Description" HeaderText="Description" ReadOnly="true"
UniqueName="Description" Display="True" />
</Columns>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridTemplateColumn UniqueName="ThumbNail">
<ItemTemplate>
<asp:Image ID="imgThumbNail" runat="server" ImageUrl='<%#Eval("ImageUrl")%>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="InventoryID" UniqueName="FormNumber" Display="false" />
<telerik:GridBoundColumn DataField="Text" HeaderText="Product Code" />
<telerik:GridBoundColumn DataField="Description" Display="false" />
<telerik:GridTemplateColumn UniqueName="Description" HeaderText="Title">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server" Text='<%#Eval("Description") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtDescription" runat="server" Text='<%#Eval("Description") %>'>
</asp:TextBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="Type" Display="false" />
<telerik:GridEditCommandColumn ButtonType="ImageButton" EditText="Edit" UniqueName="EditCommandColumn">
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ButtonType="ImageButton"
CommandName="DeleteInventory" Text="Remove" UniqueName="Delete">
<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
<HeaderStyle Width="20px"></HeaderStyle>
</telerik:GridButtonColumn>
<telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false">
</telerik:GridDragDropColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
<Selecting AllowRowSelect="True" EnableDragToSelectRows="false"></Selecting>
<ClientEvents OnRowDropping="demo.onRowDropping"></ClientEvents>
<Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
</ClientSettings>
</telerik:RadGrid>
<asp:XmlDataSource ID="XMLBookBuilderSource" runat="server" EnableCaching="false">
</asp:XmlDataSource>
<telerik:GridTextBoxColumnEditor ID="GridTextBoxEditor" runat="server" TextBoxStyle-Width="230px"></telerik:GridTextBoxColumnEditor>

 

DragDrop.js:

 

(function ($, undefined) {
var grdPendingOrders;
var grdShippedOrders;

var demo = window.demo = {};

demo.onGridCreated = function (sender, args) {
grdPendingOrders = $telerik.findControl(document, "Parts");
grdShippedOrders = sender;
}
demo.onRowDropping = function (sender, args) {
if (sender.get_id() == Parts.get_id()) {
var node = args.get_destinationHtmlElement();
if (!isChildOf(grdShippedOrders.get_id(), node) && !isChildOf(Parts.get_id(), node)) {
args.set_cancel(true);
}
}
else {
var node = args.get_destinationHtmlElement();
if (!isChildOf('trashCan', node)) {
args.set_cancel(true);
}
else {
if (confirm("Are you sure you want to delete this order?"))
args.set_destinationHtmlElement($get('trashCan'));
else
args.set_cancel(true);
}
}
};


function isChildOf(parentId, element) {
while (element) {
if (element.id && element.id.indexOf(parentId) > -1) {
return true;
}
element = element.parentNode;
}
return false;
};
})($telerik.$);

 

code behind:

-----------------

 

Protected Sub Parts_ItemCommand(sender As Object, e As GridCommandEventArgs) Handles Parts.ItemCommand
If e.CommandName = "DeleteInventory" Then
Dim filename As String = _uploadSystemPath & "tree.xml"
Dim XMLDoc As XDocument = XDocument.Load(_uploadSystemPath & "tree.xml")
XMLDoc.Root.Elements("Node")(e.Item.ItemIndex).Remove()
XMLDoc.Save(filename)
'Parts.DataSource = Nothing
Parts.Rebind()
End If
End Sub
Protected Sub Parts_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs) Handles Parts.NeedDataSource
If File.Exists(_uploadSystemPath & "tree.xml") Then
XMLBookBuilderSource.DataFile = _uploadSystemPath & "tree.xml"
Parts.DataSource = Nothing
Parts.DataSource = XMLBookBuilderSource
End If
End Sub
Protected Sub Parts_UpdateCommand(sender As Object, e As GridCommandEventArgs) Handles Parts.UpdateCommand
If e.CommandName = "Update" Then
Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)
Dim strTitle As String = DirectCast(editedItem.FindControl("txtDescription"), TextBox).Text
Dim XMLDoc As XDocument = XDocument.Load(_uploadSystemPath & "tree.xml")
XMLDoc.Root.Elements("Node")(e.Item.ItemIndex).SetAttributeValue("Description", strTitle)
XMLDoc.Save(filename)
Parts.Rebind()
End If
End Sub
Protected Sub Parts_RowDrop(sender As Object, e As GridDragDropEventArgs) Handles Parts.RowDrop
Dim i As Integer = e.DropPosition
End Sub

[Viktor Tachev]

Hi Rajesh,

If the JavaScript code is not executed this is likely due to an error. Would you open the browser console by pressing F12 and see if there are any errors listed? Try to resolve the errors and the code should work as expected.


Regards,
Viktor Tachev
Telerik