Getting Started

28 Nov 20177 minutes to read

This section explains briefly about how to create a RadioButton in your application with EmberJS.

Before we start with the RadioButton, please refer this page for general information regarding integrating Syncfusion widget’s.

Adding JavaScript and CSS Reference

To render the RadioButton control, the following list of dependencies are required.

File	Description / Usage
ej.core.min.js	Includes only the widget basic functions and Framework features. Must be referred always before using all the JS controls
ej.globalize.min.js	To support the globalization.
ej.radiobutton.min.js	RadioButton plugin.

RadioButton uses one or more script files, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the RadioButton, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.

Control Initialization

• Open the command prompt in the folder ember-app or the folder in which the application is created.

• Use the command ember generate route radiobutton/default to create template default.hbs file in templates folder and router default.js file in routes folder. It also adds the routing content in router.js.

• Use below code in default.hbs in templates folder to render the RadioButton.

HTML

<div class="content-container-fluid">
          <div class="row">
             <div class="cols-sample-area">
                 <div class="frame">
                     <div align="center">
                         <table width="500px" align="center">
                             <tr> Category </tr>
                             <br>
                             <br>
                             <tr>
                                 <td>
                                     
                                 </td>
                                 <td>
                                     
                                 </td>
                             </tr>
                             <br>
                             <br>
                             <tr> Expreienced </tr>
                             <br>
                             <br>
                             <tr>
                                 <td>
                                     
                                 </td>
                                 <td>
                                     
                                 </td>
                                 <td>
                                     
                                 </td>
                             </tr>
                         </table>
                     </div>
                 </div>
             </div>
         </div>
      </div>

• Use the below code in default.js in routes folder to bind the model to the RadioButton.

JAVASCRIPT

export default Ember.Route.extend({
       model(){
          return {
        Medium:"medium",
        checked: true
        }
        }
        });

Running the Application

To run the application, execute below command.

JAVASCRIPT

ember server

Browse to http://localhost:4200 to see the application. And navigate to RadioButton sample. The component is rendered as like the below screenshot. You can make changes in the code found under app folder and the browser should auto-refresh itself while you save files.