Getting Started

28 Jun 20173 minutes to read

A new HTML document and required codes

This section explains you briefly on how to create a GroupButton in your application with JavaScript. To get start with GroupButton, create a new HTML file and refer the below specified dependent CSS file as well as scripts files.

CSS file

Internal Script files

External script files


From V13.4.0.53 onwards, jQuery.globalize.min.js file has been replaced with our script file ej.globalize.min.js to support the globalization for our widgets. For version lower than, refer jQuery.globalize.min.js. jQuery.easing external dependency has been removed from version onwards. Kindly include this jQuery.easing dependency for versions lesser than in order to support animation effects.

Internal script files




Must be referred always before using all the JS controls.

Must be referred since we have provided the dataSource support to GroupButton


Group Button plugin.

You can make use of ‘ej.web.all.min.js’ file which encapsulates all ‘ej’ web components and frameworks in single file.

ej.web.all.min.js – includes all web widgets.

A simple HTML file with required CSS and script reference added to create GroupButton

  • HTML
  • <!DOCTYPE html>
            <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" /> <!-- style sheet for default theme(flat azure) -->
            <link href="" rel="stylesheet" /> <!--scripts-->
            <script src=""></script>
            <script src=""> </script>
            <!--Place input element to create GroupButton-->
                // Place your script code here to initialize GroupButton

    GroupButton initialization

    GroupButton can be created using <DIV> tag or <SPAN> tag and corresponding child button elements can be rendered as <LI> tag or <HREF> tag. Below is the sample code to showcase the rendering the GroupButton with <LI> tags in HTML page,

  • HTML
  • <div id="groupButton" ej-groupbutton e-groupbuttonmode="radiobutton" e-width="100%" e-showroundedcorner="true" >
        <li> Save </li>
        <li> Open </li>
        <li> Delete </li>
  • JS
  • <script>
    angular.module('GroupBtnCtrl', ['ejangular'])
    .controller('GroupBtnCtller', function ($scope) {

    Also we can use the dataSource, to create the GroupButton which is explained under the dataSource section in this documentation.