ejmGroupButton

5 Jun 202320 minutes to read

The Essential JavaScript Mobile GroupButton widget helps to display multiple buttons that stack together in a single line and appear as a navigation component.

Custom Design for HTML GroupButton control.

$(element).ejmGroupButton()

Example

HTML

<!-- Unobtrusive way of rendering with radio buttons -->    
    <div data-role="ejmgroupbutton">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

HTML

<!-- Unobtrusive way of rendering with checkboxes -->
    <div data-role="ejmgroupbutton">
        <label>
            <input type="checkbox" name="options">
            iPod
        </label>
        <label>
            <input type="checkbox" name="options">
            iPad
        </label>
    </div>

HTML

<!-- Unobtrusive way of rendering with buttons -->
    <div data-role="ejmgroupbutton">
        <button>iPod</button>
        <button>iPad</button>
    </div>

HTML

<!-- Obtrusive way of rendering with radio buttons -->
    <div id="grpbtn">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton();
    </script>

HTML

<!-- Obtrusive way of rendering with checkboxes -->
    <div data-role="ejmgroupbutton">
        <label>
            <input type="checkbox" name="options">
            iPod
        </label>
        <label>
            <input type="checkbox" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton();
    </script>

HTML

<!-- Obtrusive way of rendering with buttons -->
    <div data-role="ejmgroupbutton">
        <button>iPod</button>
        <button>iPad</button>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton();
    </script>

Requires

module:jQuery
module:ej.core
module:ej.unobtrusive
module:ej.mobile.core
module:ej.data
module:ej.touch

Members

cssClass `string`

Sets the root class for GroupButton theme. This cssClass API helps to use custom skinning option for GroupButton control. By defining the root class using this API, we need to include this root class in CSS.

Default Value

””

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div data-role="ejmgroupbutton" data-ej-cssclass="customclass">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <style>
        .customclass * {
            color: red;
        }
    </style>

HTML

<!-- Obtrusive way of rendering -->
    <div id="grpbtn">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton({ cssClass: "customclass" });
    </script>

    <style>
        .customclass * {
            color: red;
        }
    </style>

enablePersistence `boolean`

Current model value to browser cookies for state maintenance. While refreshing the page, the model value applied from browser cookies retains.

Default Value

false

Example

HTML

<!-- Unobtrusive way of rendering -->    
    <div data-role="ejmgroupbutton" data-ej-enablepersistence="true">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="grpbtn">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton({ cssClass: "customclass" });
    </script>

items `string`

Renders the GroupButton using data source which contains array of items.

Default Value

[]

Example

HTML

<!-- Unobtrusive way of rendering -->    
    <div data-role="ejmgroupbutton" data-ej-items="[{ text: 'iPod' }, { text: 'iPad' }]">
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="grpbtn" data-role="ejmgroupbutton"></div>

    <script>
        $("#grpbtn").ejmGroupButton({ items: [{ text: "iPod" }, { text: "iPad" }] });
    </script>

renderMode `enum`

Changes the rendering mode of the GroupButton. See RenderMode

Default Value

“auto”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div data-role="ejmgroupbutton" data-ej-rendermode="android">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="grpbtn">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton({ renderMode: "android" });
    </script>

selectedItemIndex `number`

Specifies the item which one is to be selected initially.

Default Value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div data-role="ejmgroupbutton" data-ej-selecteditemindex="1">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="grpbtn">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton({ selectedItemIndex: 1 });
    </script>

Events

select

Event triggers when the select happens in the GroupButton

Name

Type

Description

argument

Object

Event parameters from GroupButton

Name	Type	Description
cancel	boolean	If the event should be canceled; otherwise, false.
model	boolean	Returns the GroupButton model
type	boolean	Returns the name of the event
text	boolean	Returns the current button text

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="grpbtn" data-role="ejmgroupbutton" data-ej-select="select">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        function select(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="grpbtn">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton({ select: "select" });
        function select(args) { //handle the event
        }
    </script>

touchEnd

Event triggers when the touchend happens in the GroupButton

Name

Type

Description

argument

Object

Event parameters from GroupButton

Name	Type	Description
cancel	boolean	If the event should be canceled; otherwise, false.
model	boolean	Returns the GroupButton model
type	boolean	Returns the name of the event
text	boolean	Returns the selected button text

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="grpbtn" data-role="ejmgroupbutton" data-ej-touchend="touchend">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        function touchend(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="grpbtn">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton({ touchEnd: "touchend" });
        function touchend(args) { //handle the event
        }
    </script>

touchStart

Event triggers when the touchstart happens in the GroupButton

Name

Type

Description

argument

Object

Event parameters from GroupButton

Name	Type	Description
cancel	boolean	If the event should be canceled; otherwise, false.
model	boolean	Returns the GroupButton model
type	boolean	Returns the name of the event
text	boolean	Returns the current button text

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="grpbtn" data-role="ejmgroupbutton" data-ej-touchstart="touchstart">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        function touchstart(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="grpbtn">
        <label>
            <input type="radio" name="options">
            iPod
        </label>
        <label>
            <input type="radio" name="options">
            iPad
        </label>
    </div>

    <script>
        $("#grpbtn").ejmGroupButton({ touchStart: "touchstart" });
        function touchstart(args) { //handle the event
        }
    </script>

ejmGroupButton

Example

Requires

Members

cssClass string

Default Value

Example

enablePersistence boolean

Default Value

Example

items string

Default Value

Example

renderMode enum

Default Value

Example

selectedItemIndex number

Default Value

Example

Events

select

Example

touchEnd

Example

touchStart

Example

cssClass `string`

enablePersistence `boolean`

items `string`

renderMode `enum`

selectedItemIndex `number`