Toggle button in Grid?

[Michael Lambert]

I need a toggle button in a grid, though I not sure how to get the toggle part working.  I've tried this, it works on the initial Grid load though of course the button does not change from 'Sign Up' to 'Cancel' when pressed because they are only render on rowbound.  

        <GridColumn Width="40" TextAlign="TextAlign.Left">

            <Template>

                @{

                            if (SignedUpSessions.Contains(Sid))  //If Sid is in SignedUpSession, person is already Signed Up

                            {

                                <SfButton OnClick="@(()=>btnCancelClick(Sid))">Cancel</SfButton>

                            }

                            else

                            {

                                <SfButton OnClick="@(()=>btnSignUpClick(Sid))">Sign Up</SfButton>

                            }           

                     }

            </Template>

        </GridColumn>

I think I should be using IsToggle, but not sure how I'd changed the Text.  I also need to be able to send the Sid to the Event.

Thanks,

Mike

[Renjith Singh Rajendran]

Hi Michael, 

Greetings from Syncfusion support. 

We are not clear about your exact scenario or requirement. We could see that you would like to make a toggle button. If so then we suggest you to use the same handler for those button clicks as like the below code. We have also prepared a sample based on this scenario for your convenience. Please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample1776417906 

Reference : https://blazor.syncfusion.com/documentation/datagrid/columns/#using-conditions-inside-template 

 

<GridColumn Width="40" TextAlign="TextAlign.Left"> 

    <Template> 

        @{ 

 

            if (SignedUpSessions.Contains(Sid))  //If Sid is in SignedUpSession, person is already Signed Up 

            { 

                <SfButton OnClick="@(()=>btnClick(Sid))">Cancel</SfButton> 

            } 

            else 

            { 

                <SfButton OnClick="@(()=>btnClick(Sid))">Sign Up</SfButton> 

            } 

        } 

    </Template> 

</GridColumn> 

public int Sid = 0;public List<int> SignedUpSessions = new List<int>() { 0 };public void btnClick(int BtnSid){    if (BtnSid == 0)    {        Sid = 1;    }    else        Sid = 0;}

If we have misunderstood your query or if you still face difficulties, then the following details would be helpful for us to proceed further. 

1. Share the sample which you have tried from your side. Or if possible, reproduce the problem you are facing in the above attached sample and share with us for further analysis.
2. Share the detailed explanation of the complete requirement or the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith Singh Rajendran 

[Michael Lambert]

Sorry for the late response,

This issue with your example is that the buttons in every row act as one.  When you changed the text all buttons change in all the rows. I need independent toggle button specific to each row.  To keep things simple, say I have a button in each row and all I want to do is when pushed it calls a function that changes it's text from say 'Signup' to 'Cancel Signup', but it ONLY changes the text for that button in that row, all the other buttons in other rows stay the same.  Also when it calls the function it should be able to pass the row data to it.

Thanks,

Mike

[Renjith Singh Rajendran]

Hi Michael, 

Thanks for your update. 

Based on this scenario, we suggest you to maintain an unique value primarykey column and generate a Dictionary object based on this unique value primarykey column. Now we suggest you to use this Dictionary value based on primarykey value to display the Button Text based on the particular button click. We have prepared a sample for your convenience, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample268289898 

 

Please refer the code below, 

 

<GridColumn Width="40" TextAlign="TextAlign.Left"> 

    <Template> 

        @{ 

            var a = context as Order; 

            <SfButton OnClick="@(()=>btnClick(Sid, a.OrderID))">@RowButton[a.OrderID]</SfButton> 

        } 

    </Template> 

</GridColumn> 

 

public void btnClick(int BtnSid, int PrimaryKey){    //Change the button text values     if (BtnSid == 0)    {        RowButton[PrimaryKey] = "Cancel";        Sid = 1;    }    else    {        RowButton[PrimaryKey] = "Sign Up";        Sid = 0;    }}protected override void OnInitialized(){    Orders = Enumerable.Range(1, 75).Select(x => new Order()    {        OrderID = 1000 + x,           //OrderID has unique primarykey value          CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],        Freight = 2.1 * x,        OrderDate = DateTime.Now.AddDays(-x),    }).ToList();     foreach (var a in Orders)               //generate the dictionary value based on primary key    {        RowButton[a.OrderID] = "Sign Up";    }}

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran