Server side event calling issue

1 Answer 41 Views
TreeView
Mandar
Top achievements
Rank 1
Mandar asked on 14 Sep 2021, 11:26 AM

I have this telerik tree view control

 <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server"  Width="300px" Height="350px"
EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" EnableDragAndDropBetweenNodes="true">
                <DataBindings>
                    <telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
                </DataBindings>
            </telerik:RadTreeView>

I need to call the server side event after drop so I have added OnNodeDrop="RadTreeView1_HandleDrop"and on the cs file I have this event.

        protected void RadTreeView1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)
        {
            RadTreeNode sourceNode = e.SourceDragNode;
            RadTreeNode destNode = e.DestDragNode;
            RadTreeViewDropPosition dropPosition = e.DropPosition;
}

The Event is not hitting after the drop is there anything I am missing.

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 17 Sep 2021, 08:42 AM

Hi Mandar,

Please make sure there are no JavaScript errors on the page  - Troubleshooting JavaScript errors.

In case Ajax is enabled on the page, try to disable it temporarily and test the application that way while monitoring for JavaScript errors again - Get more descriptive errors by disabling AJAX.

Below is a sample code I used for testing the behavior. On my side the event fires as expected.

<asp:Label Text="Label: " ID="Label1" runat="server" />

<telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server" Width="300px" Height="350px"
    EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging"
    EnableDragAndDropBetweenNodes="true">
    <DataBindings>
        <telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
    </DataBindings>
    <Nodes>
        <telerik:RadTreeNode Text="Root 1" Expanded="true">
            <Nodes>
                <telerik:RadTreeNode Text="Child 1.1"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 1.2"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 1.3"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 1.4"></telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Root 2" Expanded="true">
            <Nodes>
                <telerik:RadTreeNode Text="Child 2.1"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 2.2"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 2.3"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 2.4"></telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

        
<script>
    function onNodeDropping(sender, args) {
        //do something
    }
    function onNodeDragging(sender, args) {
        //do something
    }
</script>

<script runat="server">
    protected void RadTreeView1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)
    {
        Label1.Text += "HandleDrop event Fired! ";
    }
</script>

I hope this will help.

Looking forward to your feedback.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Mandar
Top achievements
Rank 1
commented on 23 Sep 2021, 10:07 AM

I have tried the above Steps still It is not hitting

This is my complete aspx page


<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
   
</head>
<body>
<form id="form1" runat="server">
  <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
   <div class="demo-containers">
 <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">
 <script src="../../Scripts/LIBRARY/TreeNodeOrder.js" type="text/javascript">
    </script>
  <script type="text/javascript">
      /* <![CDATA[ */
      Sys.Application.add_load(function () {
         demo.secondTreeView = $find('<%= RadTreeView2.ClientID %>');
                    
      });
                /* ]]> */
  </script>
        </telerik:RadScriptBlock>
         <asp:Panel runat="server" ID="Panel1" >
<div class="demo-container size-thin">
            <h2>IEnumerable</h2>
                  <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server"  Width="300px" Height="350px"
EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" EnableDragAndDropBetweenNodes="true" AutoPostBack="true">
                <DataBindings>
                    <telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
                </DataBindings>
            </telerik:RadTreeView>
        </div>
 </div>  
    </asp:Panel>
    </form>
</body>
Doncho
Telerik team
commented on 28 Sep 2021, 09:12 AM

Mandar,

I have tested the provided declaration and it is also working fine on my side, see http://somup.com/crQuQfrPoc.

I have attached a runnable sample I used for testing. To run it, you will need to add the Telerik.Web.UI.dll in the bin folder.

To be able to help you with the troubleshooting, we would need a repro of the problem so it would be very helpful if you modify the attached sample so it replicates the problem and send it back to us for investigation.

Mandar
Top achievements
Rank 1
commented on 10 Nov 2021, 12:33 PM

Hi Doncho,

I have attached my aspx ,cs file and js file due to organisation privacy issue I have removed references and assemblies and sent it  separately ,   drag and drop is working but  server side event is not  triggering

 

I hope you will get some idea. Please let me know if it can be resolved it would be really helpful.

Doncho
Telerik team
commented on 10 Nov 2021, 01:01 PM

Thank you for the provided information, Mandar!

I have noticed that the client-side NodeDropping event is being canceled inside the event listener:

window.onNodeDropping = function(sender, args) {
    var dest = args.get_destNode();
    if (dest) {
            clientSideEdit(sender, args);
            args.set_cancel(true);
            return;
    }
    else {
        dropOnHtmlElement(args);
    }
};
Canceling the client-side event prevents the PostBack that is normally triggered after dropping, hence the server-side event is not triggered. To be able to reach the server-side NodeDrop event you should not cancel the OnClientNodeDropping.

I hope this helps. Let me know if any questions remain.

Mandar
Top achievements
Rank 1
commented on 11 Nov 2021, 01:20 PM | edited

Hi Doncho,

I removed that part and it was working,it was hitting I did some backend code change and ran it again I am getting this error while drag and drop,can you help me with this.

window.__TsmHiddenField = $get('RadScriptManager1_TSM');$('.rrbButton[data-show-leave-page!="1"]', $('#MainToolBar_upToolbar')).click(function (e) { if(typeof clearDirty === 'function') { clearDirty(e); } });Telerik.Web.UI.RadTreeView._preInitialize("RadTreeView2","1117");

 

after Removing

            args.set_cancel(true);
this line I am getting the error

Uncaught TypeError: $ is not a function

Doncho
Telerik team
commented on 16 Nov 2021, 09:04 AM

Hi Mandar<

Do you have AJAX enabled on the page? If yes, please try to disable it temporarily to see if you will get a more descriptive error - Get more descriptive errors by disabling AJAX

Is there a reference to an external jQuery on the page? A certain version of jQuery is distributed along with the Telerik Controls. I would suggest you make that there are no conflicting jQuery versions on the page. Details about jQuery with Telerik Ajax controls find here - Using jQuery. If jQuery is needed for some custom implementations I would suggest you use the one coming with the Telerik controls. You can set it as a default jQuery version with the following RadScriptManager declaration:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </scripts>
</telerik:RadScriptManager>

Mandar
Top achievements
Rank 1
commented on 23 Nov 2021, 11:18 AM

Hi Doncho,Thanks for the help everything is working fine as expected  one issue I am facing if I select one node I want  to drop if to the   top node the thing is due to limitation in screen size I am not able to see the top node ,Generally what should happen is if I select a node and move the curser upwards it should automatically scroll to the top but it is struct at the top of the screen can you please provide me the solution for that  
Doncho
Telerik team
commented on 23 Nov 2021, 02:47 PM

Mandar,

There are a couple of options here:

  • A code solution that programmatically moves the scroll - please find attached a sample for it.
    Check out the following forum threads on the topic:
  • You can also set the Height property of the RadTreeView and its own scrollbar will be moved while dragging.
    <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDropBetweenNodes="true" Height="200px" EnableDragAndDrop="true" ></telerik:RadTreeView>
    
  • Last but not least while the node is grabbed with the left mouse button, you can scroll down/up with the mouse wheel.
Mandar
Top achievements
Rank 1
commented on 24 Nov 2021, 10:47 AM

Hi Doncho , One last thing I want to ask our Requirement has changed now,Now We only need to perform drag and drop within a node for example the parent of source and destination should be same not different, do we have any property for that or I have to do it through js 
Doncho
Telerik team
commented on 24 Nov 2021, 12:02 PM

Mandar,

You will need to implement the desired functionality with custom code. You can use the OnClientNodeDropping event of the RadTreeView. There you can:

  1. Get the source and the destination node (get_sourceNode(), get_destNode())
  2. Get the needed parent nodes (Whether Node.get_parent Returns the Parent Node or the Parent Treeview)
  3. Implement the desired condition and cancel the event when needed - set_cancel().

I hope this helps.

Please if you have any further questions that are not directly related to the subject of this thread, feel free to open a new thread where we will be glad to assist again.

Tags
TreeView
Asked by
Mandar
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or