How to hide a GridCommandColumn based on a bound field.

[Andrew Fraser]

I have followed the instructions here: Hide command column button in specific records

However, my usage is slightly different, I have four command buttons View, Edit, Delete and Website where the Website command button should only be shown if the record has a valid URL.

My command button code looks like:

<GridCommandColumns>
                        <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-search", CssClass = "e-flat" })" Title="View"></GridCommandColumn>
                        <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-changes-track", CssClass = "e-flat" })" Title="Edit"></GridCommandColumn>
                        <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })" Title="Delete"></GridCommandColumn>
                        <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-web-layout", CssClass = "e-flat" })" Title="Website"></GridCommandColumn>
                    </GridCommandColumns>

I have added a style to the bottom of the page:

<style>
        .e-removeWebsitecommand .e-unboundcell .e-unboundcelldiv button.e-Editbutton {
            display: none;
        }
    </style>

And my RowBound method looks like:

    public void RowBound( RowDataBoundEventArgs<Dto> Args )
    {
        if ( Args.Data.HaveWebsite == false )
        {
            Args.Row.AddClass( new string[] { "e-removeWebsitecommand" } );
        }
    }

I think the issue is with button.e-EditButton but I am not sure what to put in here for my Website command button.

Any help would be appreciated.

Andy

[Sanjay Kumar Suresh]

Hi Andrew Fraser,

Based on your query, we understand that you would like to hide the Website Command Column icon button for specific rows based on the row data. To address this requirement, we have prepared a simple sample that demonstrates the suggested approach. In the provided sample, the Website Command Column icon button is hidden only for the rows where the ShipCountry value is set to "Germany". This approach allows you to control the visibility of the command column buttons dynamically based on the row data. we suggest you to set the CSS for the class as like in the below mentioned code snippet.

Code Snippet:

 

<style>

.e-removeWebsitecommand .e-unboundcell button.e-Nonebutton[title="Website"] {

    display: none;

}</style>

 

Snip:

Sample: https://blazorplayground.syncfusion.com/embed/VZBnXoWWotPcOMHf?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2

Feel free to get back to us if you have any concerns.

Regards,

Sanjay Kumar Suresh

[Andrew Fraser]

Sanjay,

That worked perfectly - many thanks :-)

The bit I was missing is that you can specify the button title in the style 👍

Best Regards

Andy

[Sanjay Kumar Suresh]

Hi Andrew Fraser,

Thanks for the update,

We are happy to hear that the provided solution was helpful. Feel free to reach out to us if you need any further assistance.

Regards,

Sanjay Kumar Suresh