Grid Column Menu...can it be invoked via code?

1 Answer 22 Views
Grid
Jeffrey
Top achievements
Rank 2
Iron
Veteran
Iron
Jeffrey asked on 30 Apr 2021, 02:55 PM
I'd like to have my own button invoke the GridColumnMenu... can this be done?

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 30 Apr 2021, 03:31 PM

Hi Jeffrey,

You could use JS Interop to click the appropriate element.

Here's an example I made for you:

@inject IJSRuntime _js

<TelerikButton OnClick="@ShowMenuForColumn2">show the menu for the second column</TelerikButton>

@* Move this script to its proper location in your project
    It is here with the suppress-error hack to make the sample easy to copy*@
<script suppress-error="BL9992">
        function clickColumnMenu(gridSelector, colIndex) {
            let colMenuElems = document.querySelectorAll(gridSelector + " .k-grid-column-menu");
            let desiredElem = (colMenuElems != null && colMenuElems.length >= colIndex) ? colMenuElems[colIndex] : null;
            debugger;
            if (desiredElem) {
                desiredElem.click();
            }
        }
</script>

<TelerikGrid Data="@MyData"
             Class="target-grid"
             Pageable="true"
             PageSize="5"
             FilterMode="@GridFilterMode.FilterMenu"
             Sortable="true"
             ShowColumnMenu="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" />
        <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" />
    </GridColumns>
</TelerikGrid>

@code {
    async Task ShowMenuForColumn2()
    {
        await _js.InvokeVoidAsync("clickColumnMenu", ".target-grid", 1);
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).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; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Jeffrey
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 30 Apr 2021, 06:49 PM

Thanks Marin.. is an actual API in the works?
Marin Bratanov
Telerik team
commented on 30 Apr 2021, 06:57 PM

I don't think it will be considered anytime soon. Looking into that would weigh down the entire API of the component a lot, and is likely to make a lot of things cumbersome - if nothing else, the columns would have to start exposing references or other form of unique identification, and such a method would likely boil down to similar code to the js interop anyway.

Using this js approach is perfectly valid.

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