ejGroupButton

11 Jul 201824 minutes to read

The Essential JavaScript Group Button widget helps to display multiple buttons which are stacked together in a single line and used as a navigation component. Also it manages the checked/unchecked state for a set of buttons, since it supports radio and check button modes.

Syntax

  • JAVASCRIPT
  • $(element).ejGroupButton(options);
    Name Type Description
    options object Settings for GroupButton

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton();
            });
        </script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.groupbutton.js

    Members

    cssClass string

    Sets the specified class to GroupButton wrapper element, which allows for custom skinning option in ejGroupButton control.

    Default Value

    • ””

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    //set the cssClass during the control initialization
                    cssClass:"e-btnColor"
                });
            });
        </script>

    dataSource object

    To set the local JSON data, define a JSON array and initialize the GroupButton with dataSource property. Specify the column names in the fields property.

    Default Value

    • null

    Example

  • HTML
  • <div id="groupButton">
    
            </div>
  • JS
  • <script>
    
                $("#groupButton").ejGroupButton({
    
                    groupButtonMode: "radiobutton",
    
                    dataSource: [
    
                    { text: "Day", contentType: "textonly" },
    
                    { text: "Week", contentType: "textonly" },
    
                    { text: "Work Week", contentType: "textonly" },
    
                    { text: "Month", contentType: "textonly", selected: "selected" },
    
                    { text: "Agenda", contentType: "textonly" }],
    
                    showRoundedCorner: true
    
                });
    
            </script>

    enableRTL boolean

    Displays the ejGroupButton in Right to Left direction.

    Default Value

    • false

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    enableRTL: true
                });
            });
        </script>

    enabled boolean

    Used to enable or disable the ejGroupButton control.

    Default Value

    • true

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    enabled: false
                });
            });
        </script>

    fields object

    Gets or sets a value that indicates to display the values of the data.

    Default value

    • null

    fields.contentType enum|string

    Specifies the content type of the button. Button can have image only, text only, imagetextimage, textandimage, or imageboth as content type.

    fields.htmlAttribute object

    Specifies the HTML attributes to the element.

    fields.imagePosition enum|string

    Specifies the image position in the button. This property is applicable for the content type ‘textandimage’ only.

    fields.linkAttribute object

    Specifies the link attributes to the element.

    fields.prefixIcon string

    Specifies the primary icon for button. This icon will be displayed from the left margin of the button.

    fields.selected boolean

    Specifies the button is in selected state.

    fields.suffixIcon string

    Specifies the secondary icon for button. This icon will be displayed from the right margin of the button.

    fields.text string

    Specifies the text in the button.

    fields.url string

    Specifies the URL of the button for navigation.

    Example

  • HTML
  • <script>
    $("#groupButton").ejGroupButton({
        groupButtonMode: "radiobutton",
        dataSource: [
        { value: "Day", type: "textonly" },
        { value: "Week", type: "textonly" },
        { value: "Work Week", type: "textonly" },
        { value: "Month", type: "textonly", selected: "selected" },
        { value: "Agenda", type: "textonly" }],
        fields : { contentType :"type", text:"value", selected: "selected" }
      });
     </script>

    groupButtonMode enum | string

    Sets the GroupButton behavior to works as Checkbox mode/ radio button mode based on the specified option.

    Name Description
    CheckBox Sets the GroupButton to work as checkbox mode
    RadioButton Sets the RadioButton to work as radio button mode

    Default Value

    • ej.GroupButtonMode.RadioButton

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    groupButtonMode: ej.GroupButtonMode.RadioButton
                });
            });
        </script>

    height string | number

    Used to sets the height of the ejGroupButton control.

    Default Value

    • 28

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    height:40
                });
            });
        </script>

    htmlAttributes object

    Defines the characteristics of the ejGroupButton control and extend the capability of an HTML element by adding specified attributes to element tag and by performing the related actions

    Default Value

    • {}

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    htmlAttributes: { title: "Group Button" }
                });
            });
        </script>

    orientation enum

    Specify the orientation of the GroupButton. See below to get available orientations

    Name Type Default Description
    Horizontal string horizontal Enum for Horizontal Orientation
    Vertical string vertical Enum for Vertical Orientation

    Default Value

    • ej.Orientation.Horizontal

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    orientation: ej.Orientation.Vertical
                });
            });
        </script>

    query Object

    Query the dataSource from the table for Groupbutton

    Default Value:

    • null
  • JS
  • <script>
    
                var dataManger = ej.DataManager({
    
                    url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
    
                });
    
                // Query creation
    
                var query = ej.Query().from("Orders").take(6);
    
                $(function () {
    
                    //  declaration 
    
                    $("#groupButton").ejGroupButton({
    
                        dataSource: dataManger,
    
                        fields: { text: "CustomerID" },
    
                        query: query,
    
                    });
    
                });
    
            </script>

    selectedItemIndex number[] | string[]

    Sets the list of button elements to be selected. To enable this option groupButtonMode should be in “checkbox” mode.

    Default Value

    • []

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    groupButtonMode: "checkbox",
                    selectedItemIndex :["1","2"]
                });
            });
        </script>

    showRoundedCorner boolean

    Sets the rounder corner to the GroupButton, if sets as true.

    Default Value

    • false

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    showRoundedCorner: true
                });
            });
        </script>

    size enum | string

    Specifies the size of the button. See available size

    Default Value

    • ej.ButtonSize.Normal

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    size: ej.ButtonSize.Large
                });
            });
        </script>

    width string | number

    Defines the width of the ejGroupButton control.

    Default Value

    • ””

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
    
        <script type="text/javascript">
            $(function () {           
                //  declaration 
                $("#groupButton").ejGroupButton({
                    width: "100%"
                });
            });
        </script>

    Methods

    deselectItem(element)

    Remove the selection state of the specified the button element from the GroupButton

    Parameters Type Description
    element jQuery Specific button element

    Example

  • HTML
  • <div id="groupButton">
            <ul>
                <li>Day</li>
                <li>Week</li>
                <li>Month</li>
            </ul>
        </div>
        <script type="text/javascript">
            var groupButtonObj;
            $(function () {           
                //create the instance to the ejGroupButton
                $("#groupButton").ejGroupButton();
                groupButtonObj = $("#groupButton").ejGroupButton('instance');
                groupButtonObj.deselectItem(getSelectedItem());
            });
        </script>

    destroy()

    Destroy the GroupButton widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
            <script>
            // Create Button
                        $("#groupButton").ejGroupButton();
                        groupButtonObj = $("#groupButton").ejGroupButton('instance');
                        groupButtonObj.destroy(); // destroy the GroupButton
            </script>
  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
        
            <script>
                // destroy the button
                $("#groupButton").ejGroupButton();
                $("#groupButton").ejGroupButton("destroy");      
            </script>

    disable()

    Disables the GroupButton control

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
     
            <script type="text/javascript">
                var groupButtonObj;
                $(function () {           
                    //create the instance to the ejGroupButton
                    $("#groupButton").ejGroupButton();
                    groupButtonObj = $("#groupButton").ejGroupButton('instance');
                    groupButtonObj.disable();
                });
            </script>
  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
        
            <script>
            // disable the button
                $("#groupButton").ejGroupButton();
                $("#groupButton").ejGroupButton("disable");      
            </script>

    disableItem(element)

    Disable the specified button element from the ejGroupButton control.

    Parameters Type Description
    element jQuery Specific button element

    Example

  • HTML
  • <div id="groupButton">
                    <ul>
                        <li>Day</li>
                        <li>Week</li>
                        <li>Month</li>
                    </ul>
                </div>
            
                <script type="text/javascript">
                var groupButtonObj, element;
                $(function () {           
                    //create the instance to the ejGroupButton
                    $("#groupButton").ejGroupButton();
                    groupButtonObj = $("#groupButton").ejGroupButton('instance');
                    element = $("#groupButton").find('li')[0];
                    groupButtonObj.disableItem(element);
                });
                </script>

    enable()

    Enables the disabled ejGroupButton control.

    Example

  • HTML
  • <div id="groupButton">
                    <ul>
                        <li>Day</li>
                        <li>Week</li>
                        <li>Month</li>
                    </ul>
            </div>
            
            <script type="text/javascript">
                var groupButtonObj;
                $(function () {           
                    //create the instance to the ejGroupButton
                    $("#groupButton").ejGroupButton();
                    groupButtonObj = $("#groupButton").ejGroupButton('instance'); 
                    groupButtonObj.enable();
                });
            </script>
  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
            
            <script>
                // enable the button
                $("#groupButton").ejGroupButton();
                $("#groupButton").ejGroupButton("enable");       
            </script>

    enableItem(element)

    Enable the specified disabled button element from the ejGroupButton control.

    Parameters Type Description
    element jQuery Specific button element

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
        
            <script type="text/javascript">
            var groupButtonObj, element;
            $(function () {           
                //create the instance to the ejGroupButton
                $("#groupButton").ejGroupButton();
                groupButtonObj = $("#groupButton").ejGroupButton('instance');
                element = $("#groupButton").find('li')[0];
                groupButtonObj.enableItem(element);
            });
            </script>

    getIndex(element)

    Returns the index value for specified button element in the GroupButton control.

    Parameters Type Description
    element jQuery Specific button element

    ####Returns:
    number

    Example

  • HTML
  • <div id="groupButton">
                    <ul>
                        <li>Day</li>
                        <li>Week</li>
                        <li>Month</li>
                    </ul>
             </div>
            <script type="text/javascript">
            var groupButtonObj, element;
            $(function () {           
                //create the instance to the ejGroupButton
                $("#groupButton").ejGroupButton();
                groupButtonObj = $("#groupButton").ejGroupButton('instance');
                element = $("#groupButton").find('li')[0];
                groupButtonObj.getIndex(element);
            });
            </script>

    getSelectedItem()

    This method returns the list of active state button elements from the GroupButton control.

    ####Returns:
    object

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
         </div>
        
        <script type="text/javascript">
        var groupButtonObj;
        $(function () {           
            //create the instance to the ejGroupButton
            $("#groupButton").ejGroupButton();
            groupButtonObj = $("#groupButton").ejGroupButton('instance');
            groupButtonObj.getSelectedItem();
        });
        </script>

    hide()

    Hides the GroupButton control

    Example

  • HTML
  • <div id="groupButton">
                    <ul>
                        <li>Day</li>
                        <li>Week</li>
                        <li>Month</li>
                    </ul>
             </div>
             
             
            <script type="text/javascript">
                var groupButtonObj;
                $(function () {           
                    //create the instance to the ejGroupButton
                    $("#groupButton").ejGroupButton();
                    groupButtonObj = $("#groupButton").ejGroupButton('instance');
                    groupButtonObj.hide();
                });
            </script>
  • HTML
  • <div id="groupButton">
                    <ul>
                        <li>Day</li>
                        <li>Week</li>
                        <li>Month</li>
                    </ul>
            </div>
            
            <script>
                // hide the button
                $("#groupButton").ejGroupButton();
                $("#groupButton").ejGroupButton("hide");      
            </script>

    hideItem(element)

    Hide the specified button element from the ejGroupButton control.

    Parameters Type Description
    element jQuery Specific button element

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
            <script type="text/javascript">
            var groupButtonObj, element;
            $(function () {           
                //create the instance to the ejGroupButton
                $("#groupButton").ejGroupButton();
                groupButtonObj = $("#groupButton").ejGroupButton('instance');
                element = $("#groupButton").find('li')[0];
                groupButtonObj.hideItem(element);
            });
            </script>

    isDisabled()

    Returns the disabled state of the specified element button element in GroupButton as Boolean.

    ####Returns

    boolean

    Example

  • HTML
  • <div id="groupButton">
                    <ul>
                        <li>Day</li>
                        <li>Week</li>
                        <li>Month</li>
                    </ul>
            </div>
            
            <script type="text/javascript">
                var groupButtonObj, element;
                $(function () {           
                    //create the instance to the ejGroupButton
                    $("#groupButton").ejGroupButton();
                    groupButtonObj = $("#groupButton").ejGroupButton('instance');
                    element = $("#groupButton").find('li')[0];
                    groupButtonObj.isDisabled(element);
                });
            </script>

    isSelected()

    Returns the state of the specified button element as Boolean.

    ####Returns

    boolean

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
    
            <script type="text/javascript">
                var groupButtonObj, element;
                $(function () {           
                    //create the instance to the ejGroupButton
                    $("#groupButton").ejGroupButton();
                    groupButtonObj = $("#groupButton").ejGroupButton('instance');
                    element = $("#groupButton").find('li')[0];
                    groupButtonObj.isSelected(element);
                });
            </script>

    selectItem(element)

    Public method used to select the specified button element from the ejGroupButton control.

    Parameters Type Description
    element jQuery Specific button element

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
            <script type="text/javascript">
            var groupButtonObj, element;
            $(function () {           
                //create the instance to the ejGroupButton
                $("#groupButton").ejGroupButton();
                groupButtonObj = $("#groupButton").ejGroupButton('instance');
                element = $("#groupButton").find('li')[0];
                groupButtonObj.selectItem(element);
            });
            </script>

    show()

    Shows the GroupButton control, if its hide.

    Example

  • HTML
  • <div id="groupButton">
                    <ul>
                        <li>Day</li>
                        <li>Week</li>
                        <li>Month</li>
                    </ul>
                </div>
            
            <script type="text/javascript">
                var groupButtonObj;
                $(function () {           
                    //create the instance to the ejGroupButton
                    $("#groupButton").ejGroupButton();
                    groupButtonObj = $("#groupButton").ejGroupButton('instance');
                    groupButtonObj.show();
                });
            </script>
  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
     
            <script>
                // shows  the button
                $("#groupButton").ejGroupButton();
                $("#groupButton").ejGroupButton("show");      
            </script>

    showItem(element)

    Show the specified hidden button element from the ejGroupButton control.

    Parameters Type Description
    element jQuery Specific button element

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
        
            <script type="text/javascript">
            var groupButtonObj, element;
            $(function () {           
                //create the instance to the ejGroupButton
                $("#groupButton").ejGroupButton();
                groupButtonObj = $("#groupButton").ejGroupButton('instance');
                element = $("#groupButton").find('li')[0];
                groupButtonObj.showItem(element);
            });
            </script>

    Events

    beforeSelect

    Triggered before any button element in the GroupButton get selected.

    Name Type Description
    disabled boolean Boolean value based on whether the button element is disabled or not.
    element object Returns the selection button element.
    event object Event object
    id string Return the button element ID.
    index number Button item index.
    model object returns the button model
    selected boolean Boolean value based on whether the button element is selected or not.
    type string returns the name of the event
    status boolean return the button state

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
        
            <script type="text/javascript">
                var groupButtonObj, element;
                $(function () {           
                    //create the the ejGroupButton
                    $("#groupButton").ejGroupButton({
                        beforeSelect: function (args) { }
                    });        
                });
            </script>

    create

    Fires after GroupButton control is created.If the user want to perform any operation after the button control creation then the user can make use of this create event.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the GroupButton model
    type string returns the name of the event

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
            <script type="text/javascript">
                var groupButtonObj, element;
                $(function () {           
                    //create the the ejGroupButton
                    $("#groupButton").ejGroupButton({
                        create: function (args) { }
                    });        
                });
            </script>

    destroy

    Fires when the GroupButton is destroyed successfully.If the user want to perform any operation after the destroy button control then the user can make use of this destroy event.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the GroupButton model
    type string returns the name of the event

    Example

  • HTML
  • <div id="groupButton">
                    <ul>
                        <li>Day</li>
                        <li>Week</li>
                        <li>Month</li>
                    </ul>
                </div>
            
            <script type="text/javascript">
                var groupButtonObj, element;
                $(function () {           
                    //create the the ejGroupButton
                    $("#groupButton").ejGroupButton({
                        destroy: function (args) { }
                    });        
                });
            </script>

    keyPress

    Triggered once the key is pressed, when the control is in focused state.

    Name Type Description
    disabled boolean Boolean value based on whether the button element is disabled or not.
    element object Returns the selection button element.
    event object Event object
    id string Return the button element ID.
    index number Button item index.
    model object returns the button model
    selected boolean Boolean value based on whether the button element is selected or not.
    type string returns the name of the event
    status boolean return the button state

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
            <script type="text/javascript">
                var groupButtonObj, element;
                $(function () {           
                    //create the the ejGroupButton
                    $("#groupButton").ejGroupButton({
                        keyPress: function (args) { }
                    });        
                });
            </script>

    select

    Triggered when the button element get selected.

    Name Type Description
    disabled boolean Boolean value based on whether the selected button element is disabled or not.
    element object Returns the selection button element.
    event object Event object
    id string Return the selected button element ID.
    index number Selected button item index.
    model object returns the button model
    selected boolean Boolean value based on whether the button element is selected or not.
    type string returns the name of the event
    status boolean return the button state

    Example

  • HTML
  • <div id="groupButton">
                <ul>
                    <li>Day</li>
                    <li>Week</li>
                    <li>Month</li>
                </ul>
            </div>
            
            
            <script type="text/javascript">
            var groupButtonObj, element;
            $(function () {           
                //create the the ejGroupButton
                $("#groupButton").ejGroupButton({
                    select: function (args) { }
                });        
            });
            </script>