Set TreeListCheckboxColumn Visible Property based on the Data

[Joel]

I have a Group Hierarchy.  How do I set the TreeListCheckboxColumn's Visible Property based on the Data it is bound to?  Eg.  Allow the checkbox only when Group.IsAuthorized is True:

                <TelerikTreeList @ref=@TreeListTargetRef
                                 Data="@TargetGroups"
                                 SelectedItems="@SelectedTargetGroups"
                                 IdField="@nameof(Group.Id)"
                                 ParentIdField="@nameof(Group.ParentId)"
                                 Pageable="true"
                                 PageSize="10"
                                 Sortable="false"
                                 SelectionMode="TreeListSelectionMode.Single"
                                 FilterMode="@TreeListFilterMode.FilterMenu"
                                 OnStateInit="((TreeListStateEventArgs<Group> args) => OnStateInitHandlerTarget(args))"
                                 SelectedItemsChanged="((IEnumerable<Group> x) => OnTargetGroupSelected(x))">
                    <TreeListSettings>
                        <TreeListPagerSettings InputType="PagerInputType.Input"
                                               Adaptive="true">
                        </TreeListPagerSettings>
                    </TreeListSettings>

                    <TreeListColumns>
                        <TreeListCheckboxColumn SelectAll="false"
                                                SelectChildren="false"
                                                CheckBoxOnlySelection="true"
                                                Width="64px" />

                        <TreeListColumn Field="Name" Title="Name" Expandable="true">
                            <Template>
                                @{
                                    var item = context as Gsi.Customer.Models.Group;
                                    <img height="32" width="32" src="@item.ImageUrl" />
                                    @item.Name
                                }
                            </Template>
                        </TreeListColumn>
                    </TreeListColumns>
                </TelerikTreeList>

[Joel]

Example

[Hristian Stefanov]

Hi Joel,

To hide the checkboxes for specific rows based on a given property, use the OnRowRender event to apply a custom CSS class conditionally. Then, use that class in your CSS to hide the desired checkboxes. Here’s an example I prepared for you:

<style>
    .disable-check input {
        display: none;
    }
</style>

<TelerikTreeList @ref="@TreeListRef"
                 Data="@TreeListData"
                 IdField="Id" ParentIdField="ParentId"
                 SelectionMode="TreeListSelectionMode.Multiple"
                 @bind-SelectedItems="SelectedItems"
                 OnRowRender="@OnRowRenderHandler">
    <TreeListColumns>
        <TreeListCheckboxColumn Width="140px" HeaderClass="header-select-all" />
        <TreeListColumn Field="@(nameof(Employee.Name))" Title="Employee Name" Expandable="true" />
    </TreeListColumns>
</TelerikTreeList>

<style>
    .k-grid .header-select-all .k-checkbox {
        vertical-align: middle;
    }

    .k-grid .header-select-all,
    .k-grid td:first-child {
        text-align: center;
    }
</style>

@code {
    private List<Employee> TreeListData { get; set; }
    private TelerikTreeList<Employee> TreeListRef { get; set; }
    private IEnumerable<Employee> SelectedItems { get; set; } = Enumerable.Empty<Employee>();

    private void OnRowRenderHandler(TreeListRowRenderEventArgs args)
    {
        var item = args.Item as Employee;

        if (item.IsAuthorized)
        {
            args.Class = "disable-check";
        }
    }

    protected override void OnInitialized()
    {
        TreeListData = Enumerable.Range(1, 5).Select(x => new Employee
        {
            Id = x,
            ParentId = x > 2 ? 2 : null,
            Name = "Employee name " + x,
            IsAuthorized = x % 2 == 0 ? true : false
        }).ToList();
    }

    public class Employee
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Name { get; set; }
        public bool IsAuthorized { get; set; }
    }
}

Regards,
Hristian Stefanov
Progress Telerik