@bind-Value to bool property in Model

[Alvaro]

Hi, I have some issues with this control and hopefully you can assist me with them :)

1. Setting the 'Mode'    will stop the CssClass from working.

        Mon

If I remove the Mode attribute will work fine.

2. Is it possible to bind the ButtonGroupButton to a bool property in my model like so?

 

                    Mon

                    Tues

                 ...

               

       My Model:

         public bool Monday { get; set; } = false;

        public bool Tuesday { get; set; } = false;

        public bool Wednesday { get; set; } = false;

        public bool Thursday { get; set; } = false;

        public bool Friday { get; set; } = false;

        public bool Saturday { get; set; } = false;

        public bool Sunday { get; set; } = false;

3. If two-way binding to a bool is not possible, how can I get the selected values of the buttons?

I'm trying this but they always return false ignoring the selection.

@code {

    private ButtonGroupButton buttonMonday { get; set; }

    private ButtonGroupButton buttonTuesday { get; set; }

    private ButtonGroupButton buttonWednesday { get; set; }

    private ButtonGroupButton buttonThursday { get; set; }

    private ButtonGroupButton buttonFriday { get; set; }

    private ButtonGroupButton buttonSaturday { get; set; }

    private ButtonGroupButton buttonSunday { get; set; }

 private async Task OnSubmit()

    {

       

        var isValid = editContext.Validate();

        if (isValid)

        {

             // ALWAYS FALSE. Tried both, the IsToggle and Selected properties.

           bool Mon = buttonMonday.Selected;

            bool Tue = buttonTuesday.IsToggle;

            bool Wed = buttonWednesday.IsToggle;

            bool Thu = buttonThursday.IsToggle;

            bool Fri = buttonFriday.IsToggle;

            bool Sat = buttonSaturday.IsToggle;

            bool Sun = buttonSunday.IsToggle;

          

        }

...

        }

    }

}

Many thanks!

 

[Aravinthan Seetharaman]

Hi Alvaro, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. 

 

Query 1: Setting the 'Mode'    will stop the CssClass from working. 

 

Ans: We have already fixed this issue in our last patch release. For your reference we have prepared sample in our latest version 19.1.0.65. Please refer the below code snippet and sample. 

 

 

<div class="buttongroup-top-margin"> 

    <h4>SelectionMode is set to Single - CssClasses specified</h4> 

    <SfButtonGroup Mode="ButtonSelectionMode.Single"> 

        <ButtonGroupButton Selected="@ThirdGroup_Both" CssClass="buttongroup-button-width e-primary">Both E &amp; F</ButtonGroupButton> 

        <ButtonGroupButton Selected="@ThirdGroup_OptionE" CssClass="buttongroup-button-width e-link">Option E</ButtonGroupButton> 

        <ButtonGroupButton Selected="@ThirdGroup_OptionF" CssClass="buttongroup-button-width e-warning">Option F</ButtonGroupButton> 

    </SfButtonGroup> 

</div> 

 

<div class="buttongroup-top-margin"> 

    <h4>SelectionMode is set to Multiple - CssClass specified</h4> 

    <SfButtonGroup Mode="ButtonSelectionMode.Multiple"> 

        <ButtonGroupButton Selected="@FifthGroup_Both" CssClass="buttongroup-button-width">Both I &amp; J</ButtonGroupButton> 

        <ButtonGroupButton Selected="@FifthGroup_OptionI" CssClass="buttongroup-button-width">Option I</ButtonGroupButton> 

        <ButtonGroupButton Selected="@FifthGroup_OptionJ" CssClass="buttongroup-button-width">Option J</ButtonGroupButton> 

    </SfButtonGroup> 

</div> 

 

 

 

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

 

Query 2: Is it possible to bind the ButtonGroupButton to a bool property in my model like so? 

 

Ans: We have checked this query. We can be able to bind bool value in ButtonGroup. Please refer the below code snippet. 

 

 

<SfButtonGroup Mode="SelectionMode.Multiple"> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Monday">Monday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Tuesday">Tuesday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Wednesday">Wednesday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Thursday">Thursday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Friday">Friday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Saturday">Saturday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Sunday">Sunday</ButtonGroupButton> 

        </SfButtonGroup> 

 

 

Query 3: If two-way binding to a bool is not possible, how can I get the selected values of the buttons? 

 

Ans: We have checked this query. We can be able to get the selected values of the buttons in -_editContext. Please refer the below code snippet and sample. 

 

 

@using Syncfusion.Blazor.SplitButtons 

@using Syncfusion.Blazor.Buttons 

@using System.ComponentModel.DataAnnotations 

<EditForm EditContext="@_editContext"> 

    <DataAnnotationsValidator /> 

    <ValidationSummary Model="@ModelValue" /> 

    <div class="col-md-12 maring15"> 

        <SfButtonGroup Mode="SelectionMode.Multiple"> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Monday">Monday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Tuesday">Tuesday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Wednesday">Wednesday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Thursday">Thursday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Friday">Friday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Saturday">Saturday</ButtonGroupButton> 

            <ButtonGroupButton @bind-Selected="@ModelValue.Sunday">Sunday</ButtonGroupButton> 

        </SfButtonGroup> 

        <ValidationMessage For="@(() => ModelValue.Monday)" /> 

    </div> 

    <br /> 

    <SfButton OnClick="OnSubmit">Submit</SfButton> 

</EditForm> 

 

@code { 

    private EditContext _editContext; 

    private ModelClass ModelValue = new ModelClass(); 

 

    protected override void OnInitialized() 

    { 

        _editContext = new EditContext(ModelValue); 

    } 

    public class ModelClass 

    { 

        [Range(typeof(bool), "true", "true", ErrorMessage = "You need to Select Monday to Continue")] 

        public bool Monday { get; set; } = false; 

        public bool Tuesday { get; set; } = true; 

        public bool Wednesday { get; set; } = false; 

        public bool Thursday { get; set; } = false; 

        public bool Friday { get; set; } = true; 

        public bool Saturday { get; set; } = false; 

        public bool Sunday { get; set; } = false; 

    } 

    public void OnSubmit() 

    { 

        bool isValid = _editContext.Validate(); 

    } 

} 

 

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

 

Could you please check the above details, and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S

[Alvaro]

Brilliant support as always! 

Thanks, works great!

[Aravinthan Seetharaman]

Hi Alvaro, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Aravinthan S