Still no way to hide a GridCommandButton based on row data for a Grid?

[Rob]

Going back to 2020 threads I researched and there is still no way I can tell for easily hiding a GridCommandButton (even when using context)?

What is odd, the "ShowInEdit" will indeed hide the GridCommandButton if row selected and in edit mode ... so it seems  you folks have a way to control visibility but no property for it?

So I'm assuming after 4 years of Blazor UI support, a "visibility" property will NOT happen?

Currently this is what I use to "Enable" a GridCommandButton but that's not really what I want to do, I don't want to show it.

                            <GridCommandColumn Context="bookingEquipmentDeleteCommandContext" Width="8rem">
                                @{
                                    var equipment = bookingEquipmentDeleteCommandContext as BookingEquipmentModel;
                                }
                                <GridCommandButton Command="Delete" OnClick="@EquipmentDeleteCommandHandler" Class="btn-red" Icon="@FontIcon.Trash" Enabled="@(string.IsNullOrEmpty(equipment?.EquipmentCode))" ShowInEdit="false">Delete</GridCommandButton>
                            </GridCommandColumn>

I would think something as simple as "Visible" would be easy to implement, especially now that we're on version 7 on the control suite?

Rob.

[Hristian Stefanov]

Hi Rob,

I'm pasting here the answer I gave you in the other forum thread so the community that finds this can benefit from it.

==

I confirm that a Visible parameter is unnecessary, as you can easily show or hide a specific command button by using the context of the command column and conditionally rendering the button.

@CustomCommandResult

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" OnUpdate="@MyOnUpdateHandler"
             Pageable="true" PageSize="15" Height="500px">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="Employee ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
        <GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
        <GridCommandColumn Context="dataItem">
            @{
                var item = (SampleData)dataItem;
            }
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@CustomSaveOnClickHandler">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
            @if (item.ID % 2 == 0)
            {
                <GridCommandButton Command="MyOwnCommand" Icon="@SvgIcon.InfoCircle" ShowInEdit="false" OnClick="@MyCustomCommandOnClickHandler">My Command</GridCommandButton>
            }
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private List<SampleData> GridData { get; set; }
    private MarkupString CustomCommandResult;
    
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    private async Task CustomSaveOnClickHandler(GridCommandEventArgs args)
    {
        SampleData theUpdatedItem = args.Item as SampleData;
    }

    private async Task MyCustomCommandOnClickHandler(GridCommandEventArgs args)
    {
        CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("<br />Custom command triggered for item {0}", (args.Item as SampleData).ID));
    }

    private async Task MyOnUpdateHandler(GridCommandEventArgs args)
    {
        SampleData theUpdatedItem = args.Item as SampleData;

        await MyService.Update(theUpdatedItem);

        await GetGridData();
    }

    private async Task GetGridData()
    {
        GridData = await MyService.Read();
    }

    protected override async Task OnInitializedAsync()
    {
        await GetGridData();
    }

    public static class MyService
    {
        private static List<SampleData> _data { get; set; } = new List<SampleData>();

        public static async Task<List<SampleData>> Read()
        {
            if (_data.Count < 1)
            {
                for (int i = 1; i < 50; i++)
                {
                    _data.Add(new SampleData()
                        {
                            ID = i,
                            Name = "name " + i,
                            HireDate = DateTime.Now.AddDays(-i)
                        });
                }
            }

            return await Task.FromResult(_data);
        }

        public static async Task Update(SampleData itemToUpdate)
        {
            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }
    }
}

If you prefer not to remove the button from the DOM entirely but simply hide it, you can conditionally set the Class parameter of the GridCommandButton tag and use a single line of CSS to hide the button.

==

Regards,
Hristian Stefanov
Progress Telerik

[Petr]

Hi,

Unfortunately it doesn't work that well because the buttons stick together :( probably some bug, please fix it.

Best regards,

PD

[Hristian Stefanov]

Hi Petr,

Could you send me a runnable reproduction of the issue you’re experiencing? I tested the sample from my last message, and it seems to work correctly on my end—the buttons don’t stick together. Sharing the theme you’re using would also help with the investigation.

You can send me the code easily in a runnable variant through the REPL platform.

Kind Regards,

Hristian