Auto-Size 1st/Template Column

[Joel]

Can you tell me how to auto-size my first "icon-template" column's Width?  I have it set to a hard 125 but if I have a deeper hierarchy I'd like it to accommodate.  Also, I've found when I have no other columns that even the 125 width doesn't seem to stick.

I've posted my TreeList definition many times in this forum but here it is again:

@using GsiPortal.Configuration
@{ Layout = null; }

@*Syntax Help here:  https://docs.telerik.com/kendo-ui/framework/templates/overview*@
<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>

@(Html.Kendo().TreeList<GsiPortal.Models.Group>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(125);
        columns.Add().Field(e => e.Description).Hidden(Model.GetBoolValue(Glossary.Keys.Group.IsHideMeta));
        columns.Add().Field(p => p.PersonCount).Hidden(Model.GetBoolValue(Glossary.Keys.Group.IsHideMeta));

        if (!Model.GetBoolValue(Glossary.Keys.Group.IsHideDetails))
        {
            columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").ClassName("detailButton").Click("toDetails"); }).Width(Glossary.ButtonWidth);
        }

        if (!Model.GetBoolValue(Glossary.Keys.Group.IsHideCreate))
        {
            columns.Add().Command(c => { c.Custom().Text("Create").Name("createButton").ClassName("createButton").Click("toCreate"); }).Width(Glossary.ButtonWidth);
        }

        if (!Model.GetBoolValue(Glossary.Keys.Group.IsHideFilter))
        {
            columns.Add().Command(c => { c.Custom().Text("Filter").Name("filterButton").ClassName("filterButton").Click("toFilter"); }).Width(Glossary.ButtonWidth);
        }
    })
    .DataSource(dataSource => dataSource
    .ServerOperation(false)
    .Read(read => read.Action("IndexJson", "Groups").Data("getData"))
    .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"))
    ).Events(evt => evt.DataBound("treeListBound"))
)

<script>
    function treeListBound(e) {
        var treeList = e.sender;
        var items = treeList.items();

        for (i = 0; i < items.length; i++) {
            var dataItem = treeList.dataItem(items[i]);

            if (dataItem.IsHideCreate) {
                $(items[i]).find(".createButton").hide();
            }

            if (dataItem.IsHideDetails) {
                $(items[i]).find(".detailButton").hide();
            }

            if (dataItem.IsHideFilter) {
                $(items[i]).find(".filterButton").hide();
            }
        }
    }
</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>

[Boyan Dimitrov]

Hello,

I would suggest to set initially a width for the column that will be wide enough to wrap even the deepest level of hierarchy to avoid such problem. Also an option is to reduce the width of the .k-icon k-i-none element. It is the hidden element to make the indentation for every level in the hierarchy. 

.k-icon.k-i-none {
    width: .5em;
}

Regards,
Boyan Dimitrov
Progress Telerik