Multiselect Tree issues

1 Answer 10 Views
DropDownList DropDownTree MultiSelect TreeView
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 05 Jun 2025, 09:00 PM | edited on 05 Jun 2025, 09:43 PM

When I select initialize a kendoDropDownTree with checkboxes set to true, I experience all kinds of odd behavior visually. Inspecting the code shows that it is now a MultiSelectTree and not a DropDownTree yet there is no documentation and little support for this somewhat hidden component. I would actually prefer to have a MultiSelectTree without the checkboxes similar to a multiselect but with the grouping. 

One issue, is that it does not respect the global settings for the corner radius of the box. 

kendo.ui["DropDownTree"].fn.options["rounded"] = "none";

kendo.ui["MultiSelect"].fn.options["rounded"] = "none";

These seem to do nothing. When I guessed at "MultiSelectTree", I got a console error. 

Another issue is that the UI looks very different from the regular multiselect and it doesn't seem to apply the .k-selected class as expected. When I check a box, the aria-checked is true but the k-selected class is not applied, this makes the item remain white rather than getting the blue background like it does in a regular multi-select. Can we get some consistency there?

Expanding an element does not change the height of the k-child-animation-container. It does show on the screen, but any styling targeting the container will not work because the container does not expand to fit the content. 

 

I made my dropdown arrows 7px wider (k-treeview-toggle). Now the autoWidth makes the list 7px wider than the input element.

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 10 Jun 2025, 10:30 AM

Hi Lee,

Please find below suggestions for resolving the issues:

 MultiSelectTree and DropDownTree

  • The MultiSelectTree is part of the DropDownTree rendering starting with the Kendo UI R2 2023 (version 2023.2.606) and is due to the unified rendering initiative. The MultiSelectTree is part of the implementation that is used internally, thus, it is not publicly documented. 

However, regarding the rounded Issue:

  • I tested the approach by applying a global border-radius using the 'kendo.ui["DropDownTree"].fn.options["rounded"] = "full"'. As you will see in the Dojo linked here, the DropDownTrees are correctly rounded. Could you please review the example and let me know if I am missing something?

  • If this does not work, consider using custom CSS to enforce the desired styles: 

.k-dropdowntree.k-picker, .k-multiselecttree {
    border-radius: 20px !important;
}

UI Consistency and .k-selected Class

  • You can manually apply the class using JavaScript when an item is checked. Here’s a snippet to assist you:

    $(".k-treeview").on("change", ".k-checkbox", function () {
              var item = $(this)
                .closest(".k-treeview-item")
                .find(".k-treeview-leaf");
              if ($(this).is(":checked")) {
                item.addClass("k-selected");
              } else {
                item.removeClass("k-selected");
              }
    });

Here is such Dojo exammple - https://dojo.telerik.com/wezTSbrZ 

Container Height Issue

  • Expanding an element does not change the height of the k-child-animation-container. It does show on the screen, but any styling targeting the container will not work because the container does not expand to fit the content. - Could you please provide more details about that. Please confirm if the issue can be replicated in the Dojo examples linked above.

Looking forward to your reply.

Regards,


Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 10 Jun 2025, 06:44 PM

Thank you. ON the issue of the border radius, I needed to add this CSS: 
.k-popup {
  1. border-radius: 0;
Neli
Telerik team
commented on 13 Jun 2025, 07:35 AM

Hi Lee,

Thank you for sharing the approach that resolves the issue on your side. I am sure it will be helpful to the other users in the forum as well.

Regards,

Neli

Tags
DropDownList DropDownTree MultiSelect TreeView
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Answers by
Neli
Telerik team
Share this question
or