How to determine which button is clicked in a group

[Jon]

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?

[Jon]

I should add that the buttons are dynamically created.  

[Attila Antal]

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