Getting Started

28 Nov 20177 minutes to read

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

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

Adding JavaScript and CSS Reference

To render the CheckBox 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.checkbox.min.js	CheckBox plugin.

CheckBox 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 CheckBox, 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 checkbox/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 CheckBox.

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>Hobbies</tr>
                             <br>
                             <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                             </tr>
                             <br>
                             <tr>Favourite Search Engines</tr>
                             <br>
                             <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                             </tr>
                             <br>
                             <tr>Favourite Social Networks</tr>
                             <br>
                             <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                             </tr>
                            <br>
                         </table>
                     </div>
                 </div>
             </div>
         </div>
      </div>

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

JAVASCRIPT

export default Ember.Route.extend({
      model(){
      return {

        Small:"small",
        Medium:"medium",
        roundedCorner: true,
        checked: true,
        triState: true,
        checkState: "indeterminate"
        }
        }
        });

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 CheckBox 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.