CRUD example

[Radoslav]

Hello,

I have hierarchical data in DB implemented as closure table. Imagine hundreds of nodes with parent-child relationship. Now I would like to display data, edit nodes, create new nodes, change hierarchy with drag&drop, filter nodes (show only nodes which starts with given word).

TreeList has this CRUD operations ready for use, but I was not able to detect drag&drop event for persisting the change in DB. Yes, its possible to add the button for "save", but I would like to do the change automatically.

So I tried TreeView. TreeView with popup-menu for adding root node, child node, etc. But I have problem with "editing". When I use demo for edit node in separate form, loading child's node stops working.

So, I would like to ask for hint or complex example of CRUD operations in TreeView or maybe to say me, that TreeView is not intended for this operations :)

Thank you

 

[Hristo Valyavicharski]

Hi Radoslav,

There are many different ways to implement this functionality. If you prefer to use an InlineEditForm please look here: Edit nodes via form

Another good looking solution is suggested here: http://www.telerik.com/forums/renaming-tree-nodes#Z8N0itt8nEaszC0dtR0ymQ
It uses jQuery.Editable plugin. In MVC it will be almost the same:

@using Kendo.Mvc.UI.Fluent
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
<style type="text/css">
    .treeInlineEdit > input {
        font-size: 1.5em;
        min-width: 10em;
        min-height: 2em;
        border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        border: 0px solid #ffffff;
    }
</style>

@(Html.Kendo().TreeView()
    .Name("treeview")
    .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.inlineDefault)
)

<script type="text/javascript">
    $(document).ready(function () {
        $("#treeview")
            .on('dblclick', '.k-in', function (event) {
                //
                // NOTE: The editable control will take over the dblclick event
                //   attached to this tree control and it will prevent bubbling of the
                //   doubleclick events...  This means that we don't need to worry about
                //   this item getting the editable plugin invoked on it twice.
                //   It also means that if we need to handle a double click, at
                //   this point we will need to add the logic in the function call
                //   passed into the editable plugin.
                //
                //   Also, replace .k-in with whatever selector you need to filter
                //   on.  For example, all my tree nodes in production applications
                //   are anchor, so my filter selector is 'a' rather than '.k-in'.
                //
                $target = $(event.target);

                $target.editable(function (value, settings) {
                    // if you were using something like knockout for your databinding,
                    // this is how you could update your model :)
                    //var model = ko.dataFor(this);
                    //model.name(value);

                    return value;
                },
                {
                    event: 'dblclick',
                    cssclass: 'treeInlineEdit'
                });

                $target.trigger('dblclick', [event]);

            })
            .on('keypress', 'input', function (event) {
                if (event.keyCode === 13) {
                    var text = this.value;
                    // call controller method to update the database
                }
            });
    });
</script>

For all CRUD operations you may attach a Context Menu.

I hope this helps.

Regards,
Hristo Valyavicharski
Telerik

[Radoslav]

Thank you a lot for hint.