Selecting values from client side

9 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 17 Aug Link to this post

    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

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 22 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 22 Aug in reply to Veselin Tsvetanov Link to this post

    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

  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 24 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 26 Aug in reply to Veselin Tsvetanov Link to this post

    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

  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 26 Aug in reply to Jon Link to this post

    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();
        }
    }

  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 31 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  9. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 01 Sep in reply to Veselin Tsvetanov Link to this post

    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

  10. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 06 Sep Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017