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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Command Button

Thread ID:

Created:

Updated:

Platform:

Replies:

148668 Oct 29,2019 08:32 PM UTC Oct 31,2019 09:25 AM UTC Blazor 3
loading
Tags: Grid
Michael Lambert
Asked On October 29, 2019 08:32 PM UTC

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

Vignesh Natarajan [Syncfusion]
Replied On 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. 


Michael Lambert
Replied On 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

Vignesh Natarajan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon