1. Home
  2. Forum
  3. Blazor
  4. Access context data in GridCommandColumns

Access context data in GridCommandColumns

I want to conditionally render a icon in a button inside the <GridCommandColumns> , here is an example of what I want to achieve:


<GridColumn HeaderText="Gerenciar" AutoFit="true">
    <GridCommandColumns>
    @{
        var ctx = (context as CidadesViewModel);
        if (ctx.IsLocked) 
        {
           // Button with an locked lock icon
        }
        else
        {
            // Button with an unlocked lock icon
        }
    }
    <GridCommandColumn Type="CommandButtonType.Edit" ID="EditarCidade" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat" })"></GridCommandColumn>
    <GridCommandColumn Type="CommandButtonType.Save" ID="SalvarCidade" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-save", CssClass="e-flat" })"></GridCommandColumn>
    <GridCommandColumn Type="CommandButtonType.Cancel" ID="Cancelar" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-cancel-icon", CssClass="e-flat" })"></GridCommandColumn>
    </GridCommandColumns>
</GridColumn>


Is it possible?

OBS: I saw this example but it is not sufficient for me since I need to access the context and specific button when rendering and not only the "Args.Row" property.

In Addition, I dont want to rewrite it to use the column


3 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team November 4, 2021 05:07 AM UTC

Hi Ewerton,  
 
Greetings from Syncfusion support.  
 
Query: “I want to conditionally render a icon in a button inside the <GridCommandColumns> Is it possible? I need to access the context and specific button when renderingIn Addition, I dont want to rewrite it to use the column” 
 
We have analyzed your query requirement and we would like to inform you that it is not possible to access the context (row details) variable inside the GridCommandColumn. But we can achieve your requirement by rendering a custom SfButton component similar to GridCommandButton using the Column Template feature. So kindly confirm whether it is fine for you to achieve your requirement using SfButton component and Column Template feature of Grid.  
 
Based on your confirmation, we will prepare and update you the solution.       
 
Regards, 
Vignesh Natarajan 


Marked as answer
EL Ewerton Luis de Mattos replied to Vignesh Natarajan November 4, 2021 12:32 PM UTC

Thanks Vignesh.


I tried it by my self and ended up rewriting my application to use sfButtons and Column Template as you suggested, so, no needing to write an solution example.

Although, I think it would be very useful to access context data inside <GridCommandColumns>. It is possible to consider it to an future update of the Grid component?


RS Renjith Singh Rajendran Syncfusion Team November 8, 2021 03:28 PM UTC

Hi Ewerton,  
 
Based on your requirement, we suggest you to bind the RowDataBound event to Grid and assign custom class to Grid’s row based on the IsLocked value. Now based on this added row class assign icon for the custom command button. We have prepared a sample based on this scenario, please download and refer the sample from the link below,  
 
Please refer the codes below, 
 
 
    <GridEvents RowDataBound="RowDataBoundHandler" TValue="Order"></GridEvents> 
    ... 
     <GridCommandColumns> 
         <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { CssClass = "e-icons e-lockunlock" })"></GridCommandColumn> 
         ... 
     </GridCommandColumns> 
 
<style> 
    .e-lockiconset .e-rowcell.e-unboundcell .e-unboundcelldiv .e-lockunlock::before { 
        content: '\e735'; 
    } 
    .e-unlockiconset .e-rowcell.e-unboundcell .e-unboundcelldiv .e-lockunlock::before { 
        content: '\e197'; 
    } 
</style> 
 
    public void RowDataBoundHandler(RowDataBoundEventArgs<Order> Args) 
    { 
        if (Args.Data.IsLocked) 
        { 
            Args.Row.AddClass(new string[] { "e-lockiconset" }); 
        } 
        else if (!Args.Data.IsLocked) 
        { 
            Args.Row.AddClass(new string[] { "e-unlockiconset" });            
        } 
    } 

 
References :  
 
Please get back to us if you have further queries.   
 
Regards, 
Renjith R 
 


Loader.
Up arrow icon