CRUD example

3 posts, 1 answers
  1. Radoslav
    Radoslav avatar
    3 posts
    Member since:
    Apr 2013

    Posted 10 Nov 2015 Link to this post

    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

     

  2. Answer
    Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 12 Nov 2015 Link to this post

    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
    <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
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Radoslav
    Radoslav avatar
    3 posts
    Member since:
    Apr 2013

    Posted 13 Nov 2015 in reply to Hristo Valyavicharski Link to this post

    Thank you a lot for hint.
Back to Top