[Solved] Delete and Edit TreeView on client side

[Evgenuy]

How i can delete and edit Treeview on client side,
for example using JQuery.
Controller Action call javascript on clientside:

       public JavaScriptResult ObjectType_Delete(Int64? Id)
        {
            var script = string.Empty;
            if (Id.HasValue)
            {
                Models.ObjectType dbObjectType = _dataManager.ObjectTypeRepository.GetObjectType(objTypeId.Value);
                if (dbObjectType != null)
                {
                    _dataManager.ObjectTypeRepository.DeleteObjectType(dbObjectType.ObjectType_Id);

                    script = string.Format("onItemDelete({0},{1})", objTypeId.Value, JavaScriptEncode(dbObjectType.Name));
                    return JavaScript(script);
                }
            }
            return null;
        }

Java script on client side

                    <script type="text/javascript">
                         function onItemDelete(id, name) {

                         }
                    </script>

How i can delete or edit node in treeview?
this is a declared TreeView:

                    <%=Html.Telerik().TreeView()
                            .Name("objecttypetree")
                            .BindTo(Model.ObjectTypeList, (item, objType) =>
                                {
                                    // bind initial data - can be omitted if there is none
                                    item.Text = objType.Name;
                                    item.Value = objType.ObjectType_Id.ToString();
                                    item.LoadOnDemand = (from i in Model.DataManager.ObjectTypeRepository.GetObjectTypes(objType.ObjectType_Id)
                                                         select i).Count() > 0;
                                    item.ImageHtmlAttributes.Add("style", "margin-right: 10px");
                                })
                         .DataBinding(dataBinding => dataBinding.Ajax().Enabled(true).Select("ObjectTypeTree_AjaxLoading", "ObjectType")
                         )  %>

Fanks.

[Atanas Korchev]

Hello Evgenuy,

I am sending you a complete example showing how to perform CRUD with the TreeView. It is using a newer build than the official one which is attached in this forum thread.

I hope this helps,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Evgenuy]

Fank you very match!

[Nick]

Hi,

Thanks for posting the CRUD example, I found it very useful...
I have one question though .. ? the context menu does not rewind after a right click in IE..
Any suggestions to make this work ?

Cheers,

Nick

[Mathias]

I would like to point out that the example you attach is not a complete CRUD example. There is no Create/Add functionality in it.

[Carson]

This is some excellent JavaScript. I think this functionality should be part of the TreeView by default.
But anyway, a slight improvement: in function onLoad(), I strongly suggest adding the following after e.preventDefault()

$('div#contextMenu').each(function (index) {
    $(this).remove();
});

... to get rid of old context menus that may be laying around... for instance, after multiple consecutive 'contextmenu' events.

EDIT
Or better yet, for some animated goodness do this:

// 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 = ...

[lbartroli]

Atanas Korchev Very good example, I would need to create nodes as well as edit and delete. Could you give me an example of this?
Obviously I need to create them dynamically as you edit them.

Thanks .-

[lbartroli]

Please, I need to create nodes too...

[wandelson]

Please ;;  function "create"