This is a migrated thread and some comments may be shown as answers.

Auto-Size 1st/Template Column

1 Answer 16 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 12 Apr 2019, 04:11 PM

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; }
 
<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>

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 17 Apr 2019, 03:04 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Boyan Dimitrov
Telerik team
Share this question
or