Unplanned
Last Updated: 30 Aug 2021 15:38 by ADMIN
NovaStor
Created on: 11 Aug 2021 14:57
Category: TreeView
Type: Bug Report
3
Checked items are not rendered correctly when loaded on demand
I would like to be able to programmatically check children that are loaded on demand and currently this is not possible.
2 comments
ADMIN
Nadezhda Tacheva
Posted on: 30 Aug 2021 15:38

Hi NovaStor team,

I am glad that you managed to find a workaround suitable for your scenario by the time the bug is fixed.

I also consider the approach you've chosen (adding a CheckBox in an ItemTemplate) very useful especially for the read-only functionality that you want to achieve for the whole TreeView (as you mentioned in your last post here). You can use the Class parameter of the CheckBox to define your custom CSS class and then use it as a selector to apply some custom CSS for blocking the pointer events of the CheckBoxes. Thus, the users will not be able to check/uncheck them. For example:

<style>
    .disabled-checkbox {
        pointer-events: none;
    }
</style>

<ItemTemplate>
    @{
        TreeViewObjectModel model = context as TreeViewObjectModel;

        <div style="padding-right: 4px;">
            <TelerikCheckBox Class="disabled-checkbox"
                             @bind-Value="@model.Checked"
                             Indeterminate="@(model.Checked == null)">
            </TelerikCheckBox>
        </div>

        <span class="k-icon k-i-@(model.Icon)"></span>
        @(model.Name)
    }
</ItemTemplate>

I hope you will find this information useful. If any further questions appear, please do not hesitate to contact us.

Regards,
Nadezhda Tacheva
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.

NovaStor
Posted on: 23 Aug 2021 16:50

Hi.

 

I was able to work-around the issue by adding a check box to the TreeView ItemTemplate and manage the checked state in my own code.

 

For example:
<ItemTemplate>
    @{
        TreeViewObjectModel model = context as TreeViewObjectModel;

        <div style="padding-right: 4px;">
            <TelerikCheckBox @bind-Value="@model.Checked"
                             Indeterminate="@(model.Checked == null)">
            </TelerikCheckBox>
        </div>

        <span class="k-icon k-i-@(model.Icon)"></span>
        @(model.Name)
    }
</ItemTemplate>