Disabling editing at a certain level of the tree list

[Mario]

Hi Team,

Is it possible to deactivate the editing buttons (create, edit, delete) from a certain level of the node tree, e.g. deactivating the Create button in case of an ending node (leave) where child elements are not allowed.

Here's the code:

        @(Html.Kendo().TreeList<Node>()
            .Name("treelist")
             .Toolbar(toolbar => toolbar.Create().Text("Add new Node"))
            .Toolbar(toolbar =>
            {
                toolbar.Search();
            })
            .Toolbar(tools => tools.Excel())
                .Excel(excel => excel.FileName("Export.xlsx").ProxyURL(Url.Action("ExportToExcel")))
            .Columns(columns =>
            {
                columns.Add().Field(f => f.ElementId).Width(250);
                columns.Add().Field(e => e.Name);
                columns.Add().Width(400).Command(c =>
                {
                    c.CreateChild().Text("Add child");
                    c.Edit().Text("Edit");
                    c.Destroy().Text("Deactivate");
                })
                    .HtmlAttributes(new
                    {
                        style = "text-align: center;"
                    });
            })
            .Filterable()
            .Sortable()
            .DataSource(dataSource => dataSource
                .Create(create => create.Action("Create", "TreeHandler"))
                .Read(read => read.Action("GetData", "TreeHandler"))
                .Update(update => update.Action("Update", "TreeHandler"))
                .Destroy(delete => delete.Action("Destroy", "TreeHandler"))
                .ServerOperation(true)
                .Model(m =>
                {
                    m.Id(f => f.ElementId);
                    m.ParentId(f => f.ParentId);
                    m.Expanded(true);
                    m.Field(f => f.Name);
                    m.Field(f => f.ElementType);
                    m.Field(f => f.ParentId);
                })
            ).Height(540).Pageable(p=>p.PageSize(15).PageSizes(true))
            )

Code is taken from Tutorial: Editing in ASP.NET Core TreeList Component Demo | Telerik UI for ASP.NET Core

Kind regards,

Mario

[Ivaylo]

Hi Mario,

Feel free to correct me if I misunderstood the requirements, but you would like to disable the buttons for rows where the node does not have any children. To accomplish this, you can use the "DataBound" event to locate the rows and check if the "dataItem" of each row has a property "hasChildren" set to true.

.Ehttps://netcorerepl.telerik.com/ceusupFR29OEg3E844vents(e => e.DataBound("onDataBound"))

function onDataBound(e) {
    e.sender.tbody.find('tr').each(function(index, row) {
        var dataItem = e.sender.dataItem(row);

        if (!dataItem.hasChildren) {
            $(row).find('.k-command-cell').children().prop('disabled', 'disabled');
        }
    })
}

Furthermore, I prepared a sample REPL where you can test the code and observe how it works. 

• https://netcorerepl.telerik.com/ceusupFR29OEg3E844 

I hope this information was helpful.

Regards,
Ivaylo
Progress Telerik

[Mario]

Hi Ivaylo,

thanks!

I've got an additional question: In your example the hole field/cell is disabled. Is it possible, that certain buttons in the command-cell are disabled and others not? For example, it should be possible to delete (Delete Button enable) or edit (Edit Button enable) the row but not to add any child (Add child Button disabled).

Kind regards,

Mario

[Ivan Danchev]

Mario,

You can use jQuery in the DataBound event handler, to target only the desired button. For example: https://netcorerepl.telerik.com/wykMuCFT50RKwcRl47

<script type="text/javascript">
    function onDataBound(e) {
        e.sender.tbody.find('tr').each(function(index, row) {
            var dataItem = e.sender.dataItem(row);

            if (!dataItem.hasChildren) {
                $(row).find('.k-command-cell').children().first().prop('disabled', 'disabled');
            }
        })
    }
</script>