[Solved] IE7 strange behaviour

[Nohinn]

Hello, I'm trying to do a crud + drag and drop treeview following the code in the demos and another thread from here in the forums.
The code is working ok on IE8, IE9, Firefox and Chrome. But if I set my compatibility mode to IE7, the treeview stops working (it does not even highlight on mouseover).
I have narrowed the issue to the ClientEvents part, as if I just set it but without defining any event it works, but as soon as I define an event it stops working.

Here is the code:

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable(Of TestClass))" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
   Home Page
</asp:Content>
<asp:Content ID="indexHeader" ContentPlaceHolderID="HeaderContent" runat="server">
   <style type="text/css">
      #TreeView, .drop-container
      {
         border-width: 1px;
         border-style: solid;
         width: 24em;
         float: left;
      }

      #TreeView
      {
         height: 24em;
         padding: .5em;
      }

      .drop-container
      {
         height: 8em;
         overflow: auto;
         margin-bottom: 1em;
         padding: .70em;
      }
      .pane
      {
         float: left;
         margin: -2em 6em 2em 0;
      }
   </style>
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
   <%: Html.Telerik().TreeView().Name("TreeView") _
                                 .BindTo(Model, Sub(item, element)
                                                   item.Text = element.Text
                                                   item.Value = element.Text
                                                End Sub) _
                                 .DragAndDrop(Sub(settings)
                                                 settings.DropTargets(".drop-container")
                                              End Sub) _
                                 .ClientEvents(Sub(ev)
                                                  ev.OnLoad("onLoad")
                                                  ev.OnNodeDrop("onNodeDrop")
                                               End Sub) _
                                 .HtmlAttributes(New With {.class = "t-group", .style = "width:100%;"})%>
   <script type="text/javascript">

      function onNodeDrop(e) {
         var dropContainer = $(e.dropTarget).closest('.drop-container');
         var treeview = $('#TreeView').data('tTreeView');
         var nodeText = treeview.getItemText(e.item);
         if (dropContainer.length > 0 && dropContainer[0].innerHTML.indexOf(nodeText) == -1) {
               $('<div><strong>' + nodeText + '</strong></div>')
                  .hide().appendTo(dropContainer).slideDown('fast');
               e.preventDefault();
         }
      }


      function onLoad() {
         // subscribe to the contextmenu event to show a contet menu
         $('.t-in', this).live('contextmenu', function (e) {
            // prevent the browser context menu from opening
            e.preventDefault();

            // the node for which the 'contextmenu' event has fired
            var $node = $(this).closest('.t-item');

            // default "slide" effect settings
            var fx = $.telerik.fx.slide.defaults();

            $('div#contextMenu').each(function (index) {
               $.telerik.fx.rewind(fx, $(this).find('.t-group'), { direction: 'bottom' }, function () {
                  $(this).remove();
               });
            });

            // context menu definition - markup and event handling
            var $contextMenu =
                $('<div class="t-animation-container" id="contextMenu">' +
                    '<ul class="t-widget t-group t-menu t-menu-vertical">' +
                        '<li class="t-item"><a href="#" class="t-link">Edit</a></li>' +
                        '<li class="t-item"><a href="#" class="t-link">Delete</a></li>' +
                    '</ul>' +
                '</div>')
                .css( //positioning of the menu
                {
                position: 'absolute',
                left: e.pageX, // x coordinate of the mouse
                top: e.pageY   // y coordinate of the mouse
             })
                .appendTo(document.body)
                .find('.t-item') // select the menu items
                .mouseenter(function () {
                   // hover effect
                   $(this).addClass('t-state-hover');
                })
                .mouseleave(function () {
                   // remove the hover effect
                   $(this).removeClass('t-state-hover');
                })
                .click(function (e) {
                   e.preventDefault();
                   // dispatch the click
                   onItemClick($(this), $node);
                })
                .end();

            // show the menu with animation
            $.telerik.fx.play(fx, $contextMenu.find('.t-group'), { direction: 'bottom' });

            // handle globally the click event in order to hide the context menu
            $(document).click(function (e) {

               // if clicked inside the editing textbox - discard
               if ($(e.target).is('#TreeView :text'))
                  return;

               // remove any textboxes from the treeview and update the node if needed
               $('#TreeView :text').each(function () {
                  var $textBox = $(this);
                  var newText = $textBox.val();
                  var oldText = $textBox.data('text');

                  // the node to which the textbox belongs to
                  var $node = $textBox.closest('.t-item');

                  // remove the textbox from the node
                  $textBox.replaceWith($('<span class="t-in" />').html(newText));

                  // if the text changed update the node
                  if (newText != oldText) {
                     onEdit($node);
                  }
               });

               // hide the context menu and remove it from DOM
               $.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function () {
                  $contextMenu.remove();
               });
            });
         });
      }

      function onItemClick($item, $node) {
        var treeView = $('#TreeView').data('tTreeView');
        var nodeText = treeView.getItemText($node);
        var menuItemText = $item.text();

        if (menuItemText == "Edit") {
            // replace the node contents with a textbox
            setTimeout(function() {
                $node.find('.t-in:first')
                     .replaceWith($('<input type="text" />')
                        .val(nodeText)
                        .data('text', nodeText)
                        .keydown(function(e) {
                            if (e.keyCode == 13) {
                                // handle enter key - edit the node

                                var newText = $(this).val();
                                // remove the textbox from the node
                                $(this).replaceWith($('<span class="t-in"/>').html(newText));

                                if (newText != nodeText) {
                                    // if the text changed update the node
                                    onEdit($node);
                                }

                            } else if (e.keyCode == 27) {
                                // handle escape key - cancel editing

                                // remove the textbox from the node
                                $(this).replaceWith($('<span class="t-in"/>').html(nodeText));
                            }
                        }))
            }, 0);
        } else if (menuItemText == "Delete") {
            //delete the node
            onDelete($node);
        }
    }

    function onEdit($node) {
        var treeView = $('#TreeView').data('tTreeView');

        // post to HomeController.EditNode using jQuery
        $.post('<%= Url.Action("EditNode", "Home") %>',
            {
                level: $node.parents('.t-item').length, // node level required to determine whether this is a Category or a Product
                id: treeView.getItemValue($node),
                text: treeView.getItemText($node)
            }
        );
    }

    function onDelete($node) {
        var treeView = $('#TreeView').data('tTreeView');

        if (confirm('Are you sure you want to delete this node?')) {

            // post to HomeController.DeleteNode using jQuery
            $.post('<%= Url.Action("DeleteNode", "Home") %>',
            {
                level: $node.parents('.t-item').length,
                id: treeView.getItemValue($node),
            });

            $node.remove();
        }
    }
   </script>
</asp:Content>

[Nohinn]

Ok, the problem is within the javascript code itself.

In the delete function the parameters of the $.post method, the comma at the end of the id parameter should not be there.