Getting Started

19 Apr 20172 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

ej.web.all.min.css – includes all widgets styles (To know more about theme refer Theming in Essential JavaScript Component)

External script files

jQuery 1.7.1 and later versions.

File

 Description/Usage
ej.core.min.js


 Must be referred always before using all the JS controls.
ej.data.min.js

 Must be referred since we have provided the dataSource support to GroupButton
ej.groupbutton.min.js


 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>

    <html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" /> <!-- style sheet for default theme(flat azure) -->

        <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" /> <!--scripts-->

        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"></script>

        <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"> </script>

    </head>

    <body>
        <!--Place input element to create GroupButton-->

        <script>

            // Place your script code here to initialize GroupButton

        </script>

    </body>

    </html>

    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">

            <ul>

                <li> Save </li>

                <li> Open </li>

                <li> Delete </li>

            </ul>

        </div>
  • JS
    • <script>

            $("#groupButton").ejGroupButton();// initialize the group button control

         </script>

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