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

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 12:31 AM

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 { 
        displaynone; 
    } 
</style> 
  
@code{ 
    public List<Order> Orders { getset; } 
    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 08:59 AM

That's exactly what I needed

Thank you very much.


VN Vignesh Natarajan Syncfusion Team June 30, 2020 07:43 PM

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 15, 2020 09:51 PM

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 18, 2020 11:22 PM

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 { 
        displaynone; 
    } 
</style> 
  
@code{ 
    public List<Order> Orders { getset; } 
    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 04:11 AM

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


VN Vignesh Natarajan Syncfusion Team March 28, 2021 10:05 PM

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 { 
        displaynone; 
    } 
  
    /*to remove the delete button alone*/ 
    .e-removeDeletecommand .e-unboundcell .e-unboundcelldiv button.e-Deletebutton { 
        displaynone; 
    } 
</style> 
  
@code{ 
    public List<Order> Orders { getset; } 
    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 01:50 PM

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 1, 2021 09:03 PM

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 09:28 AM

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 7, 2021 06:59 PM

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 { 
        displaynone; 
    } 
  
    /*to remove the specific content button alone*/ 
    .e-removeDeletecommand .e-unboundcell .e-unboundcelldiv button.e-btn-content { 
        displaynone; 
    } 
</style> 
  
@code{ 
    public List<Order> Orders { getset; } 
  
  
    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 08:11 AM

Thank you!



VN Vignesh Natarajan Syncfusion Team December 8, 2021 08:33 PM

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 03:45 AM

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 07:34 AM

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 12, 2022 10:49 PM

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

Regards

Stefan



RN Rahul Narayanasamy Syncfusion Team April 14, 2022 07:50 PM

Hi Stefan,


Thanks for the update.


Please get back to us if you need further assistance.


Regards,

Rahul


Loader.
Live Chat Icon For mobile
Up arrow icon