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.
<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.
<div class="element">
<div id="groupButton">
</div>
</div>
<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”
<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.
<div id="groupButton">
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
</ul>
</div>
// 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.
<div id="groupButton">
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
</ul>
</div>
// 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.
<div id="groupButton">
<ul>
<li>Day</li>
<li>Week</li>
<li>Month</li>
</ul>
</div>
// Initializes the control in JavaScript
cssClass:"e-btnColor"
});