Drag and Drop IE7 error

[Nicholette Piecuch]

Hello,

We have a treeview enabled with client events of: EnableDragAndDrop="true" OnClientNodeDragStart="ClientNodeDragStart" EnableDragAndDropBetweenNodes="true" OnClientNodeDropping="onNodeDropping_Active".  For IE7, we are having issues where the Drag and Drop is pushing the node completely outside of the treeview DIV and a retaining table. I could not having any answers through IE Developer toolbar or stripping skin styles.

This event works correctly in Firefox.
Our RadControls are from 2008 Q2.

Has anyone else ran into this issue or was this an issue that was later resolved in another later release?

[Yana]

Hi Nicholette,

The provided information is not enough for us to reproduce this issue. Could you please paste the code of the used client event here? Thanks

All the best,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Nicholette Piecuch]

<telerik:RadScriptBlock ID="radScriptBlock" runat="server">

            <script language="javascript" type="text/javascript">
            var handleDropDownAction = '';

            function onNodeDropping_Active (sender, args)
            {
                handleDropDownAction = 'Remove';
                var destinationNode = args.get_destNode();
                if(destinationNode != null)
                {
                    clientSideEdit(sender, args);
                    args.set_cancel(true);
                    return;
                }
            }

            function onNodeDropping_InActive (sender, args)
            {
                handleDropDownAction = 'Add';
                var destinationNode = args.get_destNode();
                if(destinationNode != null)
                {
                    clientSideEdit(sender, args);
                    args.set_cancel(true);
                    return;
                }
            }

            function clientSideEdit(sender, args)
            {
                var destinationNode = args.get_destNode();
                if(destinationNode != null)
                {
                    var teamMembersTreeView = $find('<%=teamMemberTreeView.ClientID%>');
                    var inActiveTeamMembersTreeView = $find('<%=inActiveTeamMemberTreeView.ClientID%>');
                    teamMembersTreeView.trackChanges();
                    inActiveTeamMembersTreeView.trackChanges();

                    var sourceNodes = args.get_sourceNodes();
                    for(var index=0; index<sourceNodes.length; index++)
                    {
                        var sourceNode = sourceNodes[index];
                        if(sourceNode.get_nodes().get_count() == 0 && sourceNode.get_level() > 0)
                        {
                            sourceNode.get_parent().get_nodes().remove(sourceNode);

                            if(args.get_dropPosition() == "over")
                            {
                                destinationNode.get_nodes().add(sourceNode);
                            }
                            if(args.get_dropPosition() == "above")
                            {
                                insertNodeBefore(destinationNode, sourceNode);
                            }
                            if(args.get_dropPosition() == "below")
                            {
                                insertNodeAfter(destinationNode, sourceNode);
                            }

                            if((inActiveTeamMembersTreeView.findNodeByAttribute('oeid', sourceNode.get_attributes().getAttribute('oeid'))==null && handleDropDownAction=="Add") ||
                                (inActiveTeamMembersTreeView.findNodeByAttribute('oeid', sourceNode.get_attributes().getAttribute('oeid'))!=null && handleDropDownAction=="Remove"))
                            {
                                handleDropDowns(sourceNode.get_text(), sourceNode.get_attributes().getAttribute('oeid'));
                            }
                        }
                        else
                        {
                            if(sourceNode.get_nodes().get_count() != 0)
                            {
                                alert("You may not move a Project Lead with assigned contributors.");
                            }
                        }
                    }

                    destinationNode.set_expanded(true);
                    teamMembersTreeView.commitChanges();
                    inActiveTeamMembersTreeView.commitChanges();
                }
            }

            function insertNodeBefore (destinationNode, sourceNode)
            {
                var destinationParent = destinationNode.get_parent();
                var index = destinationParent.get_nodes().indexOf(destinationNode);
                destinationParent.get_nodes().insert(index, sourceNode);
            }

            function insertNodeAfter (destinationNode, sourceNode)
            {
                var destinationParent = destinationNode.get_parent();
                var index = destinationParent.get_nodes().indexOf(destinationNode);
                destinationParent.get_nodes().insert(index+1, sourceNode);
            }

            function handleDropDowns(employeeName, organizationEmployeeId)
            {
                var elements = window.document.getElementsByTagName('select');
                for(var index=0; index<elements.length; index++)
                {
                    var dropDown = elements[index];
                    //If the drop down is one of the select Member drop downs
                    if(dropDown.id.indexOf('selSelectMember') > 0)
                    {
                        if(handleDropDownAction == 'Remove')
                        {
                            for(var optionIndex=dropDown.length-1; optionIndex>=0; optionIndex--)
                            {
                                if(dropDown.options[optionIndex].text == employeeName)
                                {
                                    dropDown.remove(optionIndex);
                                }
                            }
                        }

                        if(handleDropDownAction == 'Add')
                        {
                            var option = document.createElement('option');
                            option.text = employeeName;
                            option.value = organizationEmployeeId;
                            dropDown.add(option);
                        }
                    }
                }
            }

            function goBackLinkButton_Click(hiddenClientID)
            {
                if(confirm('Do you want to save your changes?'))
                {
                    window.document.getElementById(hiddenClientID).value = 'save';
                }
            }

            </script>
        </telerik:RadScriptBlock>



    <table cellpadding="2px" cellspacing="2px">
            <tr>
                <td colspan="2" class="MP_activeM">
                    <asp:Label ID="noProjectManagerLabel" runat="server" CssClass="requiredfield" Text="No Project Manager has been setup."
                        Visible="false" />
                    <telerik:RadTreeView ID="teamMemberTreeView" runat="server" EnableDragAndDrop="true"
                        EnableDragAndDropBetweenNodes="true" OnClientNodeDropping="onNodeDropping_Active" Skin="MTMv1"  />
                </td>
            </tr>
            <tr>
                <td colspan="2"class="MP_inactiveM">
                    <telerik:RadTreeView ID="inActiveTeamMemberTreeView" runat="server" EnableDragAndDrop="true"
                        EnableDragAndDropBetweenNodes="true" OnClientNodeDropping="onNodeDropping_InActive" Skin="MTMv1" />
                </td>
            </tr>
        </table>

[Nicholette Piecuch]

I found the answer: the drag and drop node alignment is being pulled from the <BODY> tag. Unforunately, we had to adjust a lot of CSS in order for the node to be "text-align:left". Even applying an alignment to the .RadTreeView overall class does not work or being recognized in IE.

[Yana]

Hi Nicholette,

Please send us also the used css styles so we to be able to reproduce this issue and try to find the solution.

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.