jQWidgets Forums

Tagged: drag, drop, help, knockoutjs, Tree

This topic contains 4 replies, has 3 voices, and was last updated by bboyle1234 11 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

allowDrag and allowDrop with knockoutjs binding Posts

April 15, 2013 at 1:19 pm allowDrag and allowDrop with knockoutjs binding #19256

Member

Is this supported? If yes, can you provide a quick example of how to enable the drag/drop functionality when using knockoutjs binding?

I’ve tried setting the properties to true before applying the bindings as well as after but it doesn’t seem to work.

Thanks,
Brian Wendt

April 15, 2013 at 1:59 pm allowDrag and allowDrop with knockoutjs binding #19265

support

Participant

Hi brianwendt,

We support the drag and drop functionality using knockoutjs binding. In order to do it you should add the jqxdragdrop.js. Please take a look a the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script> 
    <script type="text/javascript" src="../../scripts/knockout-2.1.0.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tree").jqxTree({ allowDrag: true ,allowDrop:true});
            // Define a "Person" class that tracks its own name and children, and has a method to add a new child
            var Person = function (name, items) {
                this.label = name;
                this.items = ko.observableArray(items);
                this.enabled = ko.observable(true);
                this.addItem = function () {
                    if (this.items().length < 4) {
                        this.items.push("New Item");
                    }
                    else if (this.items().length == 4) {
                        this.items.push("Last Item");
                        this.enabled(false);
                    }
                }
            }
            // The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
            var viewModel = {
                people: [
                    new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
                    new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
                    new Person("Charles", ["Cayenne", "Cleopatra"])
                ],
                disabled: ko.observable(false)
            };
            ko.applyBindings(viewModel);
            $("#tree").jqxTree('expandAll');
        });
    </script>
</head>
<body style='font-size: 13px; font-family: Verdana;' class='default'>
    <div>
        <div style="float: left;">
            <ul data-bind="foreach: people">
                <li>
                    <div>
                        <span data-bind="text: label"></span><a href='#' data-bind='click: addItem, visible: enabled'>  Add Item</a>
                    </div>
                    <ul data-bind="foreach: items">
                        <li><span data-bind="text: $data"></span></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div style="float: left; margin-left: 50px;">
            <div data-bind="jqxTree: {source: people, disabled: disabled, theme: getDemoTheme()}" id="tree">
            </div>
             <div data-bind="jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>    
        </div>
    </div>
</body>
</html>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

April 15, 2013 at 3:30 pm allowDrag and allowDrop with knockoutjs binding #19275

brianwendt

Member

Ah, I had forgotten the jqxdragdrop. Thanks!

April 15, 2013 at 5:51 pm allowDrag and allowDrop with knockoutjs binding #19292

brianwendt

Member

Mariya,

How do I update the source upon drag end? I’m finding that when I perform the drag and drop the jqxTree displays the data properly but the dragged node’s position is not updated within the binded data. When I try to interact with dragItem or dropItem in the ‘dragEnd’ event, I cannot seem to update any of the knockoutjs bindings without locking up the UI.

Suggestions?

Thanks,

Brian Wendt

June 10, 2013 at 1:40 pm allowDrag and allowDrop with knockoutjs binding #22888

bboyle1234

Member

Hi, I’m trying to solve exactly the same problem!
Is there any feedback? Thank you!

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.