[PropKittyParticipant]

That worked beautifully. I wish there was a span or div around the label or some way to affect the label directly as negative margins generally aren’t the best, but this will definitely work for now.

[PropKittyParticipant]

Manage to actually solve this myself, many hours later:

<div class="dropdownDark" data-ddb="styleguide2">
                <div data-ddt="styleguide2">
                    <ul>
                        <li item-selected='true'>Test DARK</li>
                        <li>test1</li>
                        <li>test2</li>
                        <li>needed some kind of <br>longer test so here it is</li>
                        <li>this is a much longer li item without a break tag in it</li>
                        <li>test3</li>
                    </ul>
                </div>
            </div>

$("[data-ddb]").each(function () {
        var currentButton = $(this);
        $(this).jqxDropDownButton({ width: '25%', height: 25 });
        var tree = $('[data-ddt="'+$(this).data("ddb")+'"]');
        $(tree).on('select', function (event) {
            var item = $(tree).jqxTree('getItem', event.args.element);
            var dropDownContent = '<div class="currentLabel" style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
            $(currentButton).jqxDropDownButton('setContent', dropDownContent);
        });
        $(tree).jqxTree({ width: 200 });
    });

[PropKittyParticipant]

As a follow up: this is the code I was attempting to make work:

$("[data-ddb]").each(function () {
        console.log(this);
        $(this).jqxDropDownButton({ width: '25%', height: 25 });
        var attribute = $(this).data("ddb");
        var tree = $(this).next(".dropDownTree");
            $(this).jqxDropDownButton({ width: '25%', height: 25 });
            $(tree).on('select', function (event) {
                console.log((tree));
                var args = event.args;
                var item = $(tree).jqxTree('getItem', args.element);
                var dropDownContent = '<div class="currentLabel" style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                $(this).jqxDropDownButton('setContent', dropDownContent);
            });
            $(tree).jqxTree({ width: 200 });

    });

[PropKittyParticipant]

Hristo,

I think that’s definitely in the right direction! However, I’m not certain what we would do if we need more than just the one ‘extra’ thing. Is there no way for more than just the four items to be pulled in for use?

[PropKittyParticipant]

P.S. – I went to add this but the edit vanished so…

var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);

Also assuming this has something to do with it.

[PropKittyParticipant]

So I discovered the .clone(true) trick after two days of frustration (I swear it’s jinxed that I posted this and 30 minutes later I figure it out) but it still has an issue. The draggable ‘works’ and it looks like you can drag the new thing around, but it in fact, when clicked upon to drag, drags the ORIGINAL around instead of the clone you clicked on. The clone has the same exact id (jqwidgetLETTERANDNUMBERS) so it thinks I’m clicking on the original.

How do you get it to add a new ID to the clone? Is that even possible?

[Author]

Posts