This is a migrated thread and some comments may be shown as answers.

How to determine which button is clicked in a group

2 Answers 39 Views
Button
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 19 Feb 2021, 09:58 AM
We've set up a group of buttons with the toggle type set to radio and the button type set to standard.  Basically, one and only one button can be activated at a time.  We can't figure out how to determine which button was actually pressed though.  When we we cycle through the button controls, there is no setting we can test to see if it's currently the one pressed.  We tried to wire up an event but we lose context on postback.  How can we do this?

2 Answers, 1 is accepted

Sort by
0
Jon
Top achievements
Rank 1
answered on 19 Feb 2021, 09:59 AM
I should add that the buttons are dynamically created.  
0
Attila Antal
Telerik team
answered on 24 Feb 2021, 09:27 AM

Hi Jon,

You can visit our online Demo to see how the Radio and the Checkbox are configured for the Buttons at Radios and Checkboxes.

Once all buttons are set, you can choose one of the following:

Handling the Button Click on Client-Side

In order to understand what Button is pressed on the client-side, you must prevent PostBacks on click and wire up the client-side Click event.

Important that you turn the PostBack off if you want to work on the Client-Side as the PostBack will interrupt any JavaScript logic and will proceed to refresh the page.

You can attach the same event handler to all buttons like so:

protected void Page_Init(object sender, EventArgs e)
{
    for (int i = 0; i < 3; i++)
    {
        var rButton = new RadButton()
        {
            ID = "RadButton" + (i + 1),
            ToggleType = ButtonToggleType.Radio,
            ButtonType = RadButtonType.StandardButton,
            AutoPostBack = false,
            OnClientClicked = "OnClientClicked",
            GroupName = "MyRadioGroup"
        };

        rButton.ToggleStates.Add(new RadButtonToggleState() { Text = "Checked", PrimaryIconCssClass = "p-i-radio-checked" });
        rButton.ToggleStates.Add(new RadButtonToggleState() { Text = "UnChecked", PrimaryIconCssClass = "p-i-radio" });

        PlaceHolder1.Controls.Add(rButton);
    }
}

 

In the Click event handler you can then differentiate the Buttons by their ID:

<script>
    function OnClientClicked(sender, args) {
        var button = sender;
        var buttonId = button.get_id();

        alert("Button: " + buttonId + ", Checked: " + sender.get_checked());
    }
</script>

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

 

Handling the Button Click on Server-Side

In this case, the Buttons will be set to make PostBacks. Wire up the same Click server-side event to them like so:

protected void Page_Init(object sender, EventArgs e)
{
    for (int i = 0; i < 3; i++)
    {
        var rButton = new RadButton()
        {
            ID = "RadButton" + (i + 1),
            ToggleType = ButtonToggleType.Radio,
            ButtonType = RadButtonType.StandardButton,
            AutoPostBack = true,
            GroupName = "MyRadioGroup"
        };

        rButton.Click += RadButton_Click;

        rButton.ToggleStates.Add(new RadButtonToggleState() { Text = "Checked", PrimaryIconCssClass = "p-i-radio-checked" });
        rButton.ToggleStates.Add(new RadButtonToggleState() { Text = "UnChecked", PrimaryIconCssClass = "p-i-radio" });

        PlaceHolder1.Controls.Add(rButton);
    }
}

 

Similar to the client-side event handler, you can use the same technique to differentiate the clicked buttons by referring to their ID inside the server-side Click event handler:

protected void RadButton_Click(object sender, EventArgs e)
{
    var btn = (RadButton)sender;

    var bntId = btn.ID;
    var isChecked = btn.Checked;
}

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Button
Asked by
Jon
Top achievements
Rank 1
Answers by
Jon
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or