i am using ejs radio button when page loads first time one radio button i want selected by default

[sunil]

i used ejs radio button in my project.when page loads fist time then one of radio button  must be selected by default. here i am attaching code.

  <div class="card">

    <div class="card-body">

      

      <!-- Checkbox Row-->

      <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px"

        fxLayoutAlign="start" [style.margin-bottom]="'20px'">

        <div fxFlex class="child-1">

          <ejs-radiobutton name="check" value="normal" label="Normal Check"  [(ngModel)]="checktype"

            (change)="yesnoCheck($event)"  checked="true" ></ejs-radiobutton>

          &nbsp;<ejs-radiobutton name="check" value="dependency" label="Dependency Check" [(ngModel)]="checktype"

            (change)="yesnoCheck($event)" checked="false"></ejs-radiobutton>

          </div>

      </div>

 

[Gayathri KarunaiAnandam]

Hi Sunil, 

We have checked your reported query. We can select the RadioButton when default rendering by using checked property. We have achieved your requirement. Please check the code snippet. 

Code: 

 <div class="radiobutton-control"> 

        <h4>Select a payment method</h4> 

        <div class="row"> 

            <ejs-radiobutton label="Credit/Debit card" name="payment" value="credit/debit" checked="true"></ejs-radiobutton> 

        </div> 

        <div class="row"> 

            <ejs-radiobutton label="Net Banking" name="payment" value="netbanking"></ejs-radiobutton> 

        </div> 

        <div class="row"> 

            <ejs-radiobutton label="Cash on Delivery" name="payment" value="cashondelivery"></ejs-radiobutton> 

        </div> 

        <div class="row"> 

            <ejs-radiobutton label="Other Wallets" name="payment" value="others"></ejs-radiobutton> 

        </div> 

    </div> 

 

 

For your reference, we have prepared a sample based on this. Please check the sample link. 

Sample: https://stackblitz.com/edit/angular-hm13sf?file=app.component.html 

Documentation: https://ej2.syncfusion.com/angular/documentation/radio-button/getting-started/#change-the-radiobutton-state  

API Link: https://ej2.syncfusion.com/angular/documentation/api/radio-button/#checked  

Please check the above links and get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[sunil]

Hi  Gayathri ,

Thank you for your valuable reply, But after implemented checked='true'  ​property in ejs-radio button ​code is not working as per our requirement.

Kindly suggest any other way to achieve this requirement.

Thanks With Regards

Sunil Suryawanshi

[Gayathri KarunaiAnandam]

Hi Sunil, 

We have checked your reported query. We can change radio button state by using ng-model property. Please check the below code snippet. 

 <ejs-radiobutton 

      label="Normal Check" 

      value="Reset" 

      name="packOption" 

      id="packOption" 

      [(ngModel)]="value" 

      (change)="StandardRadioButton()" 

      floatLabelType="Always" 

      >Reset</ejs-radiobutton 

    > 

    <br /> 

    <ejs-radiobutton 

      label="Dependency check " 

      value="standard" 

      name="packOption" 

      id="packOption" 

      [(ngModel)]="value" 

      (change)="StandardRadioButton()" 

      floatLabelType="Always" 

      > </ejs-radiobutton 

    > 

 

 

 public value: string = 'Reset'; 

 

 

For your convenience, we have prepared a sample based on your requirement . Please check the below sample link. 

Sample: https://stackblitz.com/edit/angular-hb2iov-rqlqwp?file=app.component.html 

Documentation: https://ej2.syncfusion.com/angular/documentation/radio-button/how-to/two-way-binding-using-radiobutton/  

Please check the above link and If we misunderstood your requirement, Please share the below details. 

 

·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 

·        Please share the code snippet of Radiobutton. 

·        Please share the Syncfusion version you are using. 

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

Regards, 

Gayathri K