Selecting values from client side

[Jon]

Hi,

I've not got the data in my embedded tree via an ajax call and the tree is fully populated and expanded.  I have made it so that if teh drop down is a checkbox enabled on that the relevant nodes are ticked and if it isn't checkbox enabled that the relevant node is selected.

I now have a further 2 issues

1) I need to be able to make the unopened box show the checked/selected nodes.  On the server side there is a sync method but there seems to be nothing of the sort on the client side.  I have mucked around with beginUpdate and repaint etc but nothing seems to trigger a sync of the selection from the embedded tree back to the dropdown control.

2) I have the drop down set to autowidth but it doesn't work, it sticks on the width of the opening control box and as such I end up with both horizontal and vertical scrollbars.  This might be related to the issue in 1 if the box hasn't worked out that things are different.

Any suggestions?

By the way this is another area where there is significant improvement needed in the documentation.

Regards

Jon

[Veselin Tsvetanov]

Hi Jon,

1. To select or check properly a Node and populate it to the entries box of the RadDropDownTree, I would suggest you to simply click on that node. If you have a Tree with checkboxes, the call would be:

$telerik.$(node.get_element()).find('.rtUnchecked').click();

in case the tree does not have checkboxes:

$telerik.$(node.get_element()).find('.rtIn').click();

Do not use the check() or select() functions of the node, when you select it using jQuery.

2. To refresh / adjust the width of the drop-down according to the newly populated nodes, you will have to call the repaint() method of the RadDropDownTree object.

Attached you will find a simple implementation of the discussed scenario.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Jon]

Hi Veselin

That's very helpful thank you.  The autowidth repaint doesn't seem to fix the width issue though, could that be affected by any parent css classes perhaps?

As to the drop down the selection works although not quite as I'd like.  Is there a way (proper or hack) to make it work without showing the drop down element?  I am creating this as a generic field for use on forms with potentially many many fields and don't really want the drop downs to all appear on page load!

Regards

Jon

[Veselin Tsvetanov]

Hi Jon,

If you want the drop-down to be initially closed on your page, you could close it immediately after you have clicked on the checkbox / node. You could do that in the following way:

tree.openDropDown();
$telerik.$(node.get_element()).find('.rtUnchecked').click();
tree.closeDropDown();

Keep in mind that with the above you will see for a moment the drop-down that is being opened, but it will be closed immediately after that.

The autowidth issue could be caused by custom CSS rules. I would suggest you to review carefully your custom implementation, as when having DropDownSettings-AutoWidth property enabled, the drop-down width should be changed accordingly to the nodes within the tree.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Jon]

Hi Veselin

Thanks for that.  I'll have to live with the flashing.  I am trying to deselect the drop down from being focused using dropDown.get_element().blur();  but that doesn't seem to work as the drop down seems to stay focused after it closes.  Any idea on that one?

I'll look into the CSS issue.  Fingers crossed :)

Regards

Jon

[Jon]

Hi again Veselin

I now have three issues with this.

1) The checkbox code doesn't crash but doesn't check any of the boxes. The node is found but click doesn't work.

2) The resize doesn't work still - I am looking at the css for that

3) At the bottom the blur doesn't deselect the drop down, the drop down remains with the hover type box.

Code is attached for you to have a look.  In the code the args has a clientId flag with the client ID of the drop down, it also has a selectedValues variable with any values to select - comma delimited.

/* Loads a pre selected value into a drop down tree */
function amDropDownTreeOnClientTreePopulated(sender, args) {
    console.log('amDropDownTreeOnClientTreePopulated')
    var dropDown = $find(args.clientId);
    var tree = dropDown.get_embeddedTree();
    // If any values need to be processed in the selectedValues variable
    if (args !== undefined && args.selectedValues !== undefined && args.selectedValues !== '') {
        // If the tree shows checkboxes then handle them - fails at the moment
        if (tree._checkBoxes) {
            dropDown.openDropDown();
            tree.trackChanges();
            args.selectedValues.split(',').forEach(function (myString) {
                var node = tree.findNodeByValue(myString);
                if (node !== null) {
                    $telerik.$(node.get_element()).find('.rtUnchecked').click();
                }
            });
            tree.commitChanges();
            dropDown.closeDropDown();
        } else {
            // Select the node IF there are no checkboxes - this works
            var node = tree.findNodeByValue(args.selectedValues);
            if (node !== null) {
                dropDown.openDropDown();
                tree.trackChanges();
                $telerik.$(node.get_element()).find('.rtIn').click();
                tree.commitChanges();
                dropDown.closeDropDown();
            }
        }

        // Attempt to resize the content of the tree to fit the available space - fails at the moment
        dropDown.openDropDown();
        dropDown.repaint();
        dropDown.closeDropDown();

        // Deselect the drop down - fails at the moment
        dropDown.get_element().blur();
    }
}

[Veselin Tsvetanov]

Hi Jon,

Attached you will find a simple page, based on the code snippet that you have posted. On our side the RadDropdownTree is being populated accordingly and the pre-selected values are checked. Note that the width issue also cannot be observed.

To resolve the blur() issue, I would suggest you to simply remove the  "rddtFocused" class from the control (as implemented in the example attached).

Regards,
Veselin Tsvetanov
Telerik by Progress

[Jon]

Hi Veselin

Thanks for creating that demo.  I've compared the files also implemented the rddtFocused class.  It didn't solve the issue however while composing a reply I thought that I'd look at the structure,  in my test page I am using a single check rather than the tri state option.  I found that the options cause different rendering so I came up with the code below. 

if ($telerik.$(node.get_element()).find('.rtUnchecked').length > 0) {
    $telerik.$(node.get_element()).find('.rtUnchecked').click();
} else {
    $telerik.$(node.get_element()).find('.rtChk').click();
}

Sadly the $telerik.$('.rddtFocused') code gives me nothing so more digging there I think.

Regards

Jon

[Veselin Tsvetanov]

Hello Jon,

The rddtFocused class is applied on the <span> element with class rddtInner, which holds the top 'input' field of the DropDownTree. This class is applied each time the tree is focused. I would suggest you to compare carefully the example that I have sent you with your test page and check if there are other configuration differences between them.

Regards,
Veselin Tsvetanov
Telerik by Progress