Command in first Column

[Joel]

In my ASP.NET Core 2.2 MVC project have the following TreeList control.  This works.  However, I prefer that the "Details" command go in the first column.  However, when I do that... the hierarchy no longer works.  It lists the items in the datasource but it doesn't indent anything.  So 2 questions:

• How do I put the Details command in the first column and keep the hierarchy working?
• How do I change how far the hierarchy indents each child node?  To me, what I have right now is too close.

Thanks in advance for your help,

Joel

<div class="container">
    <div class="col-sm-8">
        <h2>@Model.Title</h2>
        <h3>@Model.Subtitle</h3>
        <h4>@Model.Message</h4>
        <hr />
    </div>

    <div class="col-sm-4 section">

        @(Html.Kendo().PanelBar()
                      .Name("panelbar-customer")
                      .Items(panelbar =>
                      {
                          panelbar.Add().Text(@Model.Subtitle)
                              .ImageUrl(Url.Content("~/images/32/Customer.png"))
                              .Action("ToCustomer", "Groups", new { id = @Model.GetValue(Glossary.Keys.Group.Id) });
                      }))
    </div>
</div>

<div>

    <h4>@ViewBag.Subtitle</h4>

    <script id="icon-template" type="text/x-kendo-template">
        <div class='group-icon'
             style='background-image: url(@Url.Content("~/images/32/Group.png"));'></div>
        <div class='group-name'>#: Name #</div>
    </script>

    @(Html.Kendo().TreeList<Group>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");
            columns.Add().Field(e => e.RootPath);
            columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").Click("toDetails"); }).Width(120);

            columns.Add().Command(c => { c.Custom().Text("Create").Name("createButton").Click("toCreate"); }).Width(120);
        })
        .DataSource(dataSource => dataSource
            .ServerOperation(false)
            .Read(read => read.Action("IndexJson", "Groups"))
            .Model(m =>
            {
                m.Id(f => f.Id);
                m.ParentId(f => f.ParentId);
                m.Expanded(true);
                m.Field(f => f.Name);
            }
            )
            .Events(events =>
            {
                events.Error("onError");
            })
        ))

    <script>
        var groupId = Number(@(ViewBag.GroupId));

        function readParams() {
            return { id: groupId };
        }

        function toDetails(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

            if (dataItem != null) {
                window.location.href = '@Url.Action("Details", "Groups")/' + dataItem.Id;
            }
        }

        function toCreate(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

            if (dataItem != null) {
                window.location.href = '@Url.Action("Create", "Groups")/?parentId=' + dataItem.Id;
            }
        }

        function onError(e) {
            alert(e.toString());
        }


    </script>

    <style>
        .group-icon {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-size: 40px 44px;
            background-position: center center;
            vertical-align: middle;
            line-height: 41px;
            box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        }

        .group-name {
            display: inline-block;
            vertical-align: middle;
            line-height: 41px;
            padding-left: 10px;
        }
    </style>
</div>

[Preslav]

Hi Joel,

Straight to the answers:

1) This is a bug, and I logged it here:

• https://github.com/telerik/kendo-ui-core/issues/4898

Generally speaking, there should not be any indenting on the identical buttons of the command column, however, there should be one for the next non-command column.
 
2) Changing the default indent is not available out of the box. What I could suggest is adding some custom CSS. For example:

#myTreeListID .k-icon.k-i-none {
    width: 2em;
}

Finally, as a small token of gratitude for pointing us to the above bug, I updated your Telerik points.


Regards,
Preslav
Progress Telerik