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

Need help with custom column's template

1 Answer 17 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ivan
Top achievements
Rank 2
Veteran
Iron
Ivan asked on 04 Jan 2021, 09:48 PM

Hello!
I'm trying to implement some user's menu in column's template like this:

<TelerikGrid Data="@MyData" Height="100%"
             Pageable="true" Sortable="true" Groupable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
             Resizable="true" Reorderable="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
        <GridColumn Filterable="false" Title="Menu" Lockable="false" Sortable="false"
                    ShowColumnChooser="false" VisibleInColumnChooser="false" ShowColumnMenu="false">
            <Template>
                @{
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Menu
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" style="cursor: pointer">Edit</a>
                        <a class="dropdown-item" style="cursor: pointer">Delete</a>
                    </div>
                }
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>
 
@code {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 1).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });
 
    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

 

But menu is not fully showing and hide by grid's footer
setting z-index for dropdown doesnt help
Please help....

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 05 Jan 2021, 07:39 PM

Hello Ivan,

This type of behavior is why we render our popups not in the place of declaration, but as high in the content as possible. Parent elements can have rules like overflow:hidden or other rules that can affect popups in a similar fashion.

Thus, what I can suggest is that you consider using the ContextMenu component we offer for this task, you can see how to integrate it with the grid (or any other custom content) in its documentation and demos.

 

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/.

Tags
Grid
Asked by
Ivan
Top achievements
Rank 2
Veteran
Iron
Answers by
Marin Bratanov
Telerik team
Share this question
or