Customization in JQuery GroupButton widget

8 Feb 20187 minutes to read

Size

GroupButton component size can be varied based on the Size property values. Size is the enum type API and it is has the following Built-in values

List of predefined button size

Button Types	Description
Normal	Creates GroupButton with content size.
Mini	Creates GroupButton with Built-in mini size height, width specified.
Small	Creates GroupButton with Built-in small size height, width specified.
Medium	Creates GroupButton with Built-in medium size height, width specified.
Large	Creates GroupButton with Built-in large size height, width specified.

Set Dimension

By default GroupButton has standard height and width. You can change this height and width by using height and width property respectively.

js

<script>

            $("#groupButton").ejGroupButton({

                groupButtonMode: "checkbox",

                width: "300px",

                height: "50px",

                selectedItemIndex: [0]

            });

        </script>

ContentType

The content of the Button items in GroupButton can have a text and images. GroupButton provides the some predefined contentType options to easily customize the appearance of each button associated with GroupButton component without any complex CSS tricks. GroupButton items supports the following content types.

List of content types for button

Content Types	Description
textOnly	Supports only for text content only.
imageOnly	Supports only for image content only
imageBoth	Supports image for both ends of the button.
textAndImage	Supports image with the text content.
imageTextImage	Supports image with both ends and middle in text.

Icons

GroupButton has the option to add the icons to button elements which enhance the appearance. Icons inside the button can be added easily using prefixIcon and suffixIcon fields with dataSource property. GroupButton control also supports the Built-in icon libraries. The ej.widgets.core.min.css contains definitions for important icons that can be used in buttons. You can get the details about available icons with that corresponding class from here.

Simply you can use these Built-in icons by mentioning the icon class name as value in prefixIcon and suffixIcon property. You can use any font icons that are defined in ej.widgets.core.min.css. It avoids the complexity in specifying icon using sprite image and CSS.

html

<div class="element">

            <div id="groupButton">

            </div>

        </div>

js

<script>

            $("#groupButton").ejGroupButton({

                groupButtonMode: "checkbox",

                dataSource: [

                { contentType: "imageonly", prefixIcon: "e-icon e-bold_01" },

                { contentType: "imageonly", prefixIcon: "e-icon e-italic_01" },

                { contentType: "imageonly", prefixIcon: "e-icon e-underline_01" }],

                showRoundedCorner: true,

                width: "170px",

                selectedItemIndex: [0, 2]

            });

        </script>

Orientation

GroupButton has two Built-in orientation support called vertical and horizontal orientations which defines the direction of rendered GroupButton component. You can set the value to this property as enum or string type.

• ej.Orientation.Horizontal or “Horizontal”
• ej.Orientation.Vertical or “Vertical”

js

<script>

            $("#groupButton").ejGroupButton({

                groupButtonMode: "checkbox",

                orientation: ej.Orientation.Vertical,

                selectedItemIndex: [1]

            });

        </script>

Rounded Corner

You can customize the shape of the GroupButton widget from regular rectangular shape to rounded rectangle shape using showRoundedCorner property that is set to false by default.

Configure Rounded corner to GroupButton Text box

The following steps explain you to change the edges of the textbox to rounded corner.

In the HTML page, add a <input> element to configure GroupButton widget.

html

<div id="groupButton">
        <ul>
            <li>Day</li>
            <li>Week</li>
            <li>Month</li>
        </ul>
    </div>

javascript

// You can configure Rounded Corner  in GroupButton control as follows,
    $("#groupButton").ejGroupButton({
        showRoundedCorner: true
    });

The following screenshot illustrates a GroupButton when showRoundedCorner is set to “true”.

RTL Support

In some cases you need to use right-to-left alignment. You can give RTL support by using enableRTL property.RTL mode works when you use the text property in GroupButton.

The following steps explain the details about rendering the GroupButton with right-to-left alignment support.
In the HTML page, add the following button elements to configure RadioButton widget.

html

<div id="groupButton">
        <ul>
            <li>Day</li>
            <li>Week</li>
            <li>Month</li>
        </ul>
    </div>

javascript

// Initializes the control in JavaScript
     $("#groupButton").ejGroupButton({
        enableRTL: true
    });

The following screenshot illustrates a GroupButton when showRoundedCorner is set to “true”.

cssClass

The cssClass property of the groupbutton control allows an option to sets the specified class to GroupButton wrapper element, which allows for custom skinning option in ejGroupButton control.

html

<div id="groupButton">
        <ul>
            <li>Day</li>
            <li>Week</li>
            <li>Month</li>
        </ul>
    </div>

javascript

// Initializes the control in JavaScript
     cssClass:"e-btnColor"
    });