1. Home
  2. Forum
  3. Blazor
  4. Custom Command Button

Custom Command Button

In my grid I want to have one custom button that chances depending on each rows state.  For instance, if the user is signed up for the session, the button content is 'Cancel', if the user is not signed up for the session the button content is "Signup".

I was planning on using RowBound Event: 

public void SessionRowBound(RowDataBoundEventArgs<EventsSessions> args)
{
     if (...signedup)
     {
           CommandButton.content = "Cancel"
     }
      if (…!signedup)
     {
           CommandButton.content = "Signup"
     }
But how do I get access to the command button from the RowBound event or what is the best way to accomplish this?

Then:
I was planning on using the CommandClick event:
public void OnCommandClicked(CommandClickEventArgs<EventsSessions> args)
    {
          if (args.CommandColumn.ButtonOption.Content == "Cancel")
          {
               (Do this)
               args.CommandColumn.ButtonOption.Content="Signup"
           }
          else
           {
               (Do this)
               args.CommandColumn.ButtonOption.Content="Cancel"
            }
Though the if statements work, setting args.CommandColumn.ButtonOption.Content="xxx", has no effect.  How would I change the content of the button?
     }

}
Thanks

3 Replies
VN Vignesh Natarajan Syncfusion Team October 30, 2019 11:50 AM UTC

Hi Michael,  

Greetings from Syncfusion support.  

Query: “In my grid I want to have one custom button that chances depending on each rows state.” 

Instead of RowDataBound event, we suggest you to render the custom button with content based on the User (Boolean value) during the initial rendering itself. Refer the below code example. 

<EjsGrid DataSource="@Orders" AllowPaging="true" Height="315"> 
    <GridEvents CommandClicked="OnCommandClicked" TValue="Order"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
……………………………… 
        <GridColumn HeaderText="Manage Records" Width="150"> 
            <GridCommandColumns> 
                @if (User == "Admin") 
                { 
                    <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { Content = "Cancel", CssClass = "e-flat" })"></GridCommandColumn> 
 
                } 
                else if(User == "NewUser") 
                { 
                    <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { Content = "SignUp", CssClass = "e-flat" })"></GridCommandColumn> 
                } 
            </GridCommandColumns> 
        </GridColumn> 
    </GridColumns> 
</EjsGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
    public string User = (new string[] { "Admin", "NewUser" })[new Random().Next(2)]; 
  
For your convenience we have prepared a sample which can be downloaded from below  


Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


ML Michael Lambert October 30, 2019 10:19 PM UTC

Hi Vignesh,
Your sample won't work as the determining factor of the button content will need to come from each row in the Datasource of the Grid (ie. Orders in your example).  I will also need to toggle the content value each time the user presses it.

Thanks,
Mike

VN Vignesh Natarajan Syncfusion Team October 31, 2019 09:25 AM UTC

Hi Michael,  

Sorry for the inconvenience caused.  

Query: “I will also need to toggle the content value each time the user presses it” 

We suggest you to achieve your requirement using Column template feature of Grid. Using column template feature, you can render EjsButton inside Grid column based on the row details (i.e.) we have rendered the EjsButton based on User property. In the OnClick event of Button we have modified the value of User column to modify the button content.  

Refer the below code example.  

<EjsGrid DataSource="@Orders" ModelType="@Model" AllowPaging="true" Height="315"> 
    <GridEvents TValue="Order"></GridEvents> 
…………………………………………….. 
    <GridColumns> 
……………………………….. 
<GridColumn HeaderText="Manage Records" TextAlign="TextAlign.Center" Width="120"> 
            <Template> 
                @{ 
                    var employee = (context as Order); 
                    if (employee.User == "Admin") 
                    { 
                        Btn = "Cancel"; 
                    } 
                    else 
                    { 
                        Btn = "SignUp"; 
                    } 
                    <div class="image"> 
                        <EjsButton IsToggle="true" Content="@Btn" OnClick="@(()=>Clicked(employee))"></EjsButton> 
                    </div> 
                } 
            </Template> 
        </GridColumn>    </GridColumns> 
</EjsGrid> 
 
@code{ 
    public string Btn { get; set; } 
    public Order Model = new Order(); 
    public List<Order> Orders { get; set; } 
public void Clicked(Order Value) 
    { 
        // here you can get the clicked row details. \ 
        //now you can update the value of user again here and refresh the Grid to change the button content. 
        Order Data = Orders.Find(X => X.OrderID == Value.OrderID); 
        if (Data.User == "Admin") { 
            Data.User = "NewUser"; 
        } 
        else 
        { 
            Data.User = "Admin"; 
        } 
    } 

Kindly download the sample from below which we have prepared using above code example.  


Refer our UG documentation for your reference 


Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


Loader.
Up arrow icon