We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Black Friday Offer The Black Friday Deal for 2024 is now live! Get 25% OFF on 5 or 10-member team licenses now! Get the deal now
close icon
  1. Home
  2. Forum
  3. Blazor
  4. I would like to show/hide GridCommandColumn base on the row data

I would like to show/hide GridCommandColumn base on the row data

I would like to show/hide GridCommandColumn base on the row data. This is part of my razor code:




I need something like this:

         public void QueryCellInfoHandler(QueryCellInfoEventArgs args)
        {
            if (args.Data.Verified && args.Column.HeaderText == "Actions")
            {
               //Hide all the command buttons
            }
        }
}

Could you please help me with this.

Thanks.

17 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team June 29, 2020 08:31 AM UTC

Hi Zeun,  
 
Greetings from Syncfusion support.  
 
Query: “I would like to show/hide GridCommandColumn base on the row data.” 
 
We suggest you to achieve your requirement using RowDataBound event of Grid. In the RowDataBound, based on the row data we have added the below style to row to hide the CommandColumn. Refer the below code example  
 
<SfGrid DataSource="@Orders" AllowPaging="true" Height="315"> 
    <GridEvents RowDataBound="RowBound" TValue="Order"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
. . . . . .  
        <GridColumn HeaderText="Manage Records" Width="150"> 
. . . . . . . . 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
  
<style> 
    .e-removecommand .e-unboundcell .e-unboundcelldiv button { 
        display: none; 
    } 
</style> 
  
@code{ 
    public List<Order> Orders { get; set; } 
    public void RowBound(RowDataBoundEventArgs<Order> Args) 
    { 
        if (Args.Data.Verified) 
        { 
            Args.Row.AddClass(new string[] { "e-removecommand" }); 
        } 
    } 
 
 
Refer the below screenshot for your reference 
 
 
 
Refer our UG documentation for your reference 
 
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


Marked as answer
ZE Zeun June 30, 2020 04:59 PM UTC

That's exactly what I needed

Thank you very much.

VN Vignesh Natarajan Syncfusion Team July 1, 2020 03:43 AM UTC

Hi Zeun,  

Thanks for the update.  

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan  



AM Amrutha October 16, 2020 05:51 AM UTC

I am facing a similar scenario , but instead of GridCommandColumn I need to change visibility of Check box based on data. What style should I give for this case?

https://blazor.syncfusion.com/demos/datagrid/checkbox-selection?theme=material&_ga=2.142250994.1197306011.1602770609-2131748035.1602770609


VN Vignesh Natarajan Syncfusion Team October 19, 2020 07:22 AM UTC

Hi Amrutha,  
 
Greetings from Syncfusion support.  
 
Query: “I need to change visibility of Check box based on data. What style should I give for this case?” 
 
We have analyzed your query and we suggest you to achieve your requirement by using the below CSS style to hide the particular row checkbox using RowDatabound event of Grid. Refer the below code example.  
 
<SfGrid DataSource="@Orders" AllowPaging="true" Height="315"> 
    <GridEvents RowDataBound="RowBound" TValue="Order"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    </GridColumns> 
</SfGrid> 
  
<style> 
    .e-removecheck .e-gridchkbox .e-checkbox-wrapper { 
        display: none; 
    } 
</style> 
  
@code{ 
    public List<Order> Orders { get; set; } 
    public void RowBound(RowDataBoundEventArgs<Order> Args) 
    { 
        if (Args.Data.Verified) 
        { 
            Args.Row.AddClass(new string[] { "e-removecheck" }); 
        } 
    } 
 
 
Refer our UG documentation for your reference  
  
  
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


MI Michele March 26, 2021 12:11 PM UTC

Is it possible to remove only some command depending on the type of the row?

VN Vignesh Natarajan Syncfusion Team March 29, 2021 06:05 AM UTC

Hi Michele,  
 
Thanks for contacting Syncfusion support.  
 
Query: “Is it possible to remove only some command depending on the type of the row?” 
 
Yes, we suggest you to achieve your requirement by using the below style to hide the specific command button based on row. Refer the below code example.  
 
<SfGrid DataSource="@Orders" AllowPaging="true" Height="315"> 
    <GridEvents RowDataBound="RowBound" TValue="Order"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn HeaderText="Manage Records" Width="150"> 
            <GridCommandColumns> 
                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn> 
                <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn> 
                <GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-update", CssClass = "e-flat" })"></GridCommandColumn> 
                <GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn> 
            </GridCommandColumns> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
  
<style> 
    /*to remove the edit button alone*/ 
    .e-removeEditcommand .e-unboundcell .e-unboundcelldiv button.e-Editbutton { 
        display: none; 
    } 
  
    /*to remove the delete button alone*/ 
    .e-removeDeletecommand .e-unboundcell .e-unboundcelldiv button.e-Deletebutton { 
        display: none; 
    } 
</style> 
  
@code{ 
    public List<Order> Orders { get; set; } 
    public void RowBound(RowDataBoundEventArgs<Order> Args) 
    { 
        if (Args.Data.Verified) 
        { 
            Args.Row.AddClass(new string[] { "e-removeEditcommand" }); 
        } 
        else 
        { 
            Args.Row.AddClass(new string[] { "e-removeDeletecommand" }); 
        } 
    } 
 
 
   
Kindly download the sample from below which we have prepared using above solution.  
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan  


LT Luca T September 1, 2021 09:50 PM UTC

This only hides the command buttons but the buttons are still there for anyone to mess with.

Is there a way to actually remove a button depending on the data of the row?


VN Vignesh Natarajan Syncfusion Team September 2, 2021 05:03 AM UTC

Hi Luca,  
 
Thanks for contacting Syncfusion support.  
 
Query: “Is there a way to actually remove a button depending on the data of the row?” 
 
We have analyzed your query and we would like to inform you that we do not have direct support to remove Blazor html element using ccode section (using row data). But we can achieve your requirement using JavaScript method & JSInterop. So kindly confirm whether it is fine for you to achieve your requirement using JavaScript method and JSInterop.  
 
Based on your confirmation, we will prepare and update you the solution.   
 
Regards, 
Vignesh Natarajan  


ND Nikki Dao replied to Vignesh Natarajan December 7, 2021 05:28 PM UTC

How do we do this (hide the command button) for custom command action? (aka CommandButtonType.None)

I have a  Manage Record column with a few custom command buttons (CommandButtonType.None). I'm not sure how I can attach the class to the correct one. I review the html and see there's a e-none but that won't work.


VN Vignesh Natarajan Syncfusion Team December 8, 2021 02:59 AM UTC

Hi Nikki,  
 
Thanks for contacting Syncfusion support.  
 
Query: “How do we do this (hide the command button) for custom command action? (aka CommandButtonType.None)” 
 
We have analyzed your query and we understand that you want to hide the custom command button based on condition. We suggest you to add default specific class name to Custom command buttons using CssClass property. And in the RowDataBound we suggest you add another class name to button using AddClass method.  
 
Then we suggest you to traverse through the specific class name and hide the element using CSS. Refer the below code example.  
 
<SfGrid DataSource="@Orders" AllowPaging="true" Height="315"> 
    <GridEvents RowDataBound="RowBound" TValue="Order"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn HeaderText="Manage Records" Width="150"> 
            <GridCommandColumns> 
                <GridCommandColumn Type="CommandButtonType.None" ButtonOption="@(new CommandButtonOptions() { Content = "Details", CssClass = "e-flat e-details" })"></GridCommandColumn> 
                <GridCommandColumn Type="CommandButtonType.None" ButtonOption="@(new CommandButtonOptions() { Content = "Content", CssClass = "e-flat e-btn-content" })"></GridCommandColumn> 
            </GridCommandColumns> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
  
<style> 
    /*to remove the specific edit button alone*/ 
    .e-removeEditcommand .e-unboundcell .e-unboundcelldiv button.e-details { 
        display: none; 
    } 
  
    /*to remove the specific content button alone*/ 
    .e-removeDeletecommand .e-unboundcell .e-unboundcelldiv button.e-btn-content { 
        display: none; 
    } 
</style> 
  
@code{ 
    public List<Order> Orders { get; set; } 
  
  
    public void RowBound(RowDataBoundEventArgs<Order> Args) 
    { 
        //based on your requirement you can add the class to specific records. 
        if (Args.Data.Verified) 
        { 
            Args.Row.AddClass(new string[] { "e-removeEditcommand" }); 
        } 
        else 
        { 
            Args.Row.AddClass(new string[] { "e-removeDeletecommand" }); 
        } 
    } 
 
 
Kindly refer the below sample for your reference 
 
 
Please get back to us if you have further queries.    
 
Regards, 
Vignesh Natarajan  


ND Nikki Dao replied to Vignesh Natarajan December 8, 2021 04:11 PM UTC

Thank you!


VN Vignesh Natarajan Syncfusion Team December 9, 2021 04:33 AM UTC

Hi Nikki,  

Thanks for the update.  

We are glad that our solution helps to achieve your requirement.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan 


SL Stefan Limpert April 9, 2022 11:45 AM UTC

Hi Vignesh,

your examples above for removing buttons with css works fine, but there is Backdoor for the standard Edit Button. Because of the GridEditSettings AllowEditOnDblClick Parameter you can edit the row, even you removed the edit button with css.

So the question is how can i prevent editing the row by DblClick?

Simple Answer: Just set AllowEditOnDblClick=false, yeah i know, but it's a nice feature and i don't wanna miss it.

Maybe it's also a way with css? sort of e-row-readonly?

Regards

S


RN Rahul Narayanasamy Syncfusion Team April 11, 2022 03:34 PM UTC

Hi Stefan,


Greetings from Syncfusion.


Query: So the question is how can i prevent editing the row by DblClick?


We suggest you to use the AllowEditOnDblClick property of the GridEditSettings. Find the below code snippets for your reference.


<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowEditOnDblClick="false"></GridEditSettings>


Since we already have an option to disable this behavior(Edit on double click), we suggest you to use this way to achieve your requirement.


Please let us know if you have any concerns.


Regards,

Rahul


SL Stefan Limpert April 13, 2022 06:49 AM UTC

Thanks Rahul, i was afraid you saying that. I think i'll can live with it.

Regards

Stefan


RN Rahul Narayanasamy Syncfusion Team April 15, 2022 03:50 AM UTC

Hi Stefan,


Thanks for the update.


Please get back to us if you need further assistance.


Regards,

Rahul


Loader.
Up arrow icon