Button group selection and binding

[David Brenchley]

Don't see any examples on how to use button group with selection and binding.  Doesn't appear to work the same way as radio button.  Don't see any selectedItem or selectedItems properties.

[Aravinthan Seetharaman]

Hi David, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your reported query, and we can select an Item using Selected property as like in the below code snippet. 

 

@using Syncfusion.Blazor.SplitButtons 

 

 

<SfButtonGroup Mode="SelectionMode.Multiple"> 

    <ButtonGroupButton Selected="true">Bold</ButtonGroupButton> 

    <ButtonGroupButton Selected="true" >Italic</ButtonGroupButton> 

    <ButtonGroupButton >Underline</ButtonGroupButton> 

</SfButtonGroup> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161453/ze/ButtonGroup_Selection-1461486886 

 

And we have logged feature request for binding support, and it will be available on this month(January 2021) end, until then we appreciate your patience. 

 

You can track the status of this feature using below link: 

Feedback: https://www.syncfusion.com/feedback/21437/two-way-binding-support-for-button-group 

 

 

Regards, 

Aravinthan S. 

[David Brenchley]

He w do we programtically set it?  How do we bind that to a value on the backend?

[Aravinthan Seetharaman]

Hi David, 

 

We have checked your reported issue, and we can able to select a button programmatically, by getting reference of the ButtonGroupButton and setting the Selected property as true. Please refer below code snippet. 

 

 

@using Syncfusion.Blazor.SplitButtons 

 

<SfButtonGroup Mode="SelectionMode.Multiple" Created="created"> 

    <ButtonGroupButton>Left</ButtonGroupButton> 

    <ButtonGroupButton @ref="CenterBtn">Center</ButtonGroupButton> 

    <ButtonGroupButton>Right</ButtonGroupButton> 

</SfButtonGroup> 

 

@code{ 

    public ButtonGroupButton CenterBtn { get; set; } 

    public void created() 

    { 

        CenterBtn.Selected = true; 

    } 

} 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161453/ze/BlazorApp20-1219500554 

 

And two-way binding support will be available on this January 2021, and you can track the status of this feature by using below link. 

Link: https://www.syncfusion.com/feedback/21437/two-way-binding-support-for-button-group 

 

Regards, 

Aravinthan S 

[HappyCamper]

The above is not a real world scenario.  You do not hardcode everything in real life.  Please provide us an example for a real world scenario.  

Scenario 1:  Button group uses a property in a model called Priority (int).  The priority property can be 1, 2 or 3.  The buttons use these ints as its value, and the text is "Low", "Medium" and High in the button group buttons.

reading from the database, if the value is 2, Medium will be selected in the UI.  If the user clicks on "High" the bound priority field is updated to int "3".

Scenario 2:
You have a list of values that comes from a model (Database driven, NOT hardcoded).  For each of those values, you need to create a button in the button group.  The button group is bound to another property value, which is set when that respective button is clicked.  

Thanks.

[Aravinthan Seetharaman]

Hi HappyCamper, 

 

We have checked your query. We need to validate more on this and need to ensure more cases on this. So, we will update further details on 12^th November 2021. We appreciate your patience until then. 

 

Regards, 

Aravinthan S 

[Aravinthan Seetharaman]

Hi Rudi,

Thanks for the patience.

We have checked your query. We have prepared sample for your requirement. Please refer the below code snippet and sample.

<EditForm Model="_model">

<InputRadioGroup @bind-Value="@_model.SelectedManufacturer">

Manufacturer:

<br>

<div class='e-btn-group'>

@foreach (var manufacturer in Manufacturers)

{

string id_name = "id";

<InputRadio Value="manufacturer" @attributes="new Dictionary<string, object> { { id_name, manufacturer }}"/>

<label for="@manufacturer" class="e-btn">@manufacturerlabel>

}

div>

InputRadioGroup>

EditForm>

<p> Selected Item: @_model.SelectedManufacturerp>

@code {

List Manufacturers = new List<string> { "Ford", "Toyota", "Tesla" };

FormClass _model = new FormClass();

class FormClass

{

public String SelectedManufacturer { get; set; } = "Tesla";

}

}

<style>

.e-btn-group {

margin: 25px 5px 20px 20px;

}

style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Server5.0-20760755021994139732

However, we have logged this(Radio Button like Two-way Binding support in ButtonGroup ) as an improvement, and it will be available in any of our upcoming release. We appreciate your patience until then. Please track the status using, below feedback link.

Feedback: https://www.syncfusion.com/feedback/30315/improvement-on-two-way-binding-support-for-buttongroup-as-like-radiobutton

Could you please check the above details, and let us know if you need assistance on this.

Regards,

Aravinthan S

[Alex]

So the suggested way to use the ButtonGroup control is use standard HTML?  Even for Syncfusion this seems crazy?!

[Janakiraman Sakthivel]

Hi Alex,

Currently, we don't have support for customer-requested requirements. That's why we suggested InputRadio in the previous update. However, we have already considered this an improvement. And we have planned to include this in any of our upcoming releases. 

Regards,

Janakiraman S.

[Judi Smith]

Hi All!

I still don't see this feature in the ButtonGoup. Am I missing something??

Kind regards,

Judi Smith

[Keerthikaran Venkatachalam]

Hi Judi,

We do not have immediate plan to implement this feature and it will be included in any of our upcoming releases. Please cast your vote to make it count. So that we will prioritize the features for every release based on demands. Please track the status using, below feedback link.

Feedback: https://www.syncfusion.com/feedback/30315/improvement-on-two-way-binding-support-for-buttongroup-as-like-radiobutton

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[YuvanShankar Arunagiri]

Hi All,

We can achieve your requirement the two-way binding support by using the Selected property of the button group button tag in button group components. Refer to the below code snippet and sample link.

<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

    <ButtonGroupButton @bind-Selected="@FirstSelected">First</ButtonGroupButton>

    <ButtonGroupButton @bind-Selected="@SecondSelected">Second</ButtonGroupButton>

    <ButtonGroupButton @bind-Selected="@ThirdSelected">Third</ButtonGroupButton>

</SfButtonGroup>

 

Sample link: https://blazorplayground.syncfusion.com/LZrpsDVrhBMCWKKX

Kindly check with above solution and get back to us if you need any further assistance.

Regards,

YuvanShankar A