Multiselect Tree issues

[Lee]

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.

[Neli]

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

[Lee]

Thank you. ON the issue of the border radius, I needed to add this CSS: 

.k-popup {

2. border-radius: 0;

}

[Neli]

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