We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Radio button selected by default

Hello. I have a question regarding sfradio buttons.

So the scenario is where i have 4 (all, received,ongoing,finished)radio buttons on form load and by default theres no selected radio button. I want that when the form loads, the received radio button is always selected. how can i achieve such functionality.


3 Replies

YA YuvanShankar Arunagiri Syncfusion Team October 20, 2022 06:31 AM UTC

Hi Jimmuel,


We have checked your reported query and prepared the sample based on your requirement. Please refer the below code snippet and UG link. we can achieve your requirement by setting the value to bind-Checked property of the radio button.

UG link: https://blazor.syncfusion.com/documentation/common/input-validation#sfradiobutton


@using System.ComponentModel.DataAnnotations;

@using Syncfusion.Blazor.Buttons

 

<EditForm Model="@myModel">

    <DataAnnotationsValidator />

    <div class="form-group">

        <SfRadioButton Label="All" Name="product" Value="all" @bind-Checked="@myModel.Value"></SfRadioButton>

        <SfRadioButton Label="Received" Name="product" Value="received" @bind-Checked="@myModel.Value"></SfRadioButton>

        <SfRadioButton Label="Ongoing" Name="product" Value="ongoing" @bind-Checked="@myModel.Value"></SfRadioButton>

        <SfRadioButton Label="Finished" Name="product" Value="finished" @bind-Checked="@myModel.Value"></SfRadioButton>

        <ValidationMessage For="@(() => myModel.Value)"></ValidationMessage>

    </div>

    <SfButton>Submit</SfButton>

</EditForm>

 

@code {

    private MyModel myModel = new MyModel();

 

    public class MyModel

    {

        [Required]

        public string Value { get; set; } = "all";

    }

}


Could you please check the sample and get back to us, if you need any further assistance on this.


Regards, 

YuvanShankar A



JI jimmuel replied to YuvanShankar Arunagiri October 20, 2022 09:00 AM UTC

Im sorry for the first problem i posted. It is incomplete. So heres my full inquiry.


I have a four radio buttons which specifies below:

<SfRadioButton Label="For-release" Name="status" Value="forrelease" Checked="@checkedValue" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

 <SfRadioButton Label="Received" Name="status" Value="received" Checked="@checkedValue" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

<SfRadioButton Label="Ongoing" Name="status" Value="ongoing" Checked="@checkedValue" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>

 <SfRadioButton Label="All Records" Name="status" Value="allRecords" Checked="@checkedValue" TChecked="string" ValueChange="OnValueChange"></SfRadioButton>


Each radio button when clicked will filter a datasource on a grid specified below:

 <SfGrid DataSource="@wos" @ref="WoGrid" AllowPaging="true" AllowFiltering="true" AllowResizing="true" AllowSelection="true" EnableHover="true" Toolbar="@toolbar" RowHeight="30">

                            <GridPageSettings PageSize="50"></GridPageSettings>

                            <GridFilterSettings Type="FilterType.Menu"></GridFilterSettings>


                            <GridColumns>

                                <GridColumn HeaderText="Date Requested" Field="@nameof(WO.DateRequested)"></GridColumn>

                                <GridColumn HeaderText="Property No." TextAlign="TextAlign.Left" Field="@nameof(WO.PropertyNo)"></GridColumn>

                                <GridColumn HeaderText="Description" Field="@nameof(WO.Description)"></GridColumn>

                                <GridColumn HeaderText="Requested By" Field="@nameof(WO.RequestedBy)"></GridColumn>


                                <GridColumn HeaderText="Status" Field="@nameof(WO.Status)" TextAlign="TextAlign.Center">

                                    <Template>

                                        @{

                                            var works = (context as WO);

                                            @if (works.Status == "Received")

                                            {

                                                <span class="badge rounded-pill bg-primary">@works.Status</span>


                                            }

                                            else if (works.Status == "Ongoing")

                                            {

                                                <span class="badge rounded-pill bg-secondary">@works.Status</span>

                                            }

                                            else if (works.Status == "Released")

                                            {

                                                <span class="badge rounded-pill bg-success">@works.Status</span>

                                            }

                                            else if (works.Status == "For-Release")

                                            {

                                                <span class="badge rounded-pill bg-warning text-dark">@works.Status</span>

                                            }

                                            else if (works.Status == "ForTechRep")

                                            {

                                                <span class="badge rounded-pill bg-info text-dark">@works.Status</span>

                                            }

                                            else

                                            {

                                                <span class="badge rounded-pill bg-light text-dark">@works.Status</span>

                                            }

                                        }

                                    </Template>

                                </GridColumn>

                                <GridColumn HeaderText="Details" Width="110">

                                    <GridCommandColumns>

                                        <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { Content = "View", CssClass = "e-flat" })"></GridCommandColumn>

                                    </GridCommandColumns>


                                </GridColumn>

                            </GridColumns>

                        </SfGrid>


The program works fine but what i want to achieve is that when the form loads, i want the radiobutton with a value of 'Allrecords' to be clicked and load all the filtered data. 


My full code is below:



YA YuvanShankar Arunagiri Syncfusion Team October 21, 2022 07:50 AM UTC

Hi Jimmuel,


We have validated your reported query and unable to replicate the sample (with your provided code) based on your requirement. So please share the below details,


  • Share the issue reproducible sample or replicate the issue in our sample.

  • Share the video demonstration of issue replicable.

Please provide the above requested information, based on that we will check and provide you a better solution quickly.


Regards,

YuvanShankar A


Attachment: DataGridSample_52432fed.zip

Loader.
Live Chat Icon For mobile
Up arrow icon