Is there a grid setting to not show the expander column completely?

1 Answer 39 Views
Grid
John
Top achievements
Rank 1
John asked on 14 May 2021, 05:04 AM | edited on 14 May 2021, 05:05 AM
I figured out a way to hide the expander icon during the onRowRender. I've tried different css routes using style which does no consistently hide the column .k-grid k-hierarchy-col (etc.). Is there a setting / way to onRowRender hide this column completely? I am using a context menu to expand and feel it is taking up space on screen.

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 18 May 2021, 10:39 AM

Hello John,

You can use CSS to hide those elements from the grid, like so:

<style>
    .no-expand-column .k-grid-content colgroup col:first-of-type,
    .no-expand-column .k-grid-header thead th:first-of-type,
    .no-expand-column .k-grid-header colgroup col:first-of-type {
        width: 0px;
    }

    .no-expand-column .k-grid-content td.k-hierarchy-cell * {
        display: none;
    }
</style>
<TelerikGrid Class="no-expand-column" Data="salesTeamMembers">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    List<MainModel> salesTeamMembers { get; set; }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

John
Top achievements
Rank 1
commented on 18 May 2021, 05:38 PM

Thank you. This worked for me 100%. Previously, I was able to hide a lot of things, but not the column itself.
Marin Bratanov
Telerik team
commented on 18 May 2021, 05:39 PM

Glad I could help!
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or