Custom Command Button

[Michael Lambert]

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]

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  

Sample: https://www.syncfusion.com/downloads/support/forum/148668/ze/CustomCommand1971883533  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[Michael Lambert]

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]

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.  

Sample: https://www.syncfusion.com/downloads/support/forum/148668/ze/CustomCommand-676230006  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/columns/#column-template  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.