Search results

How To

Customize RadioButton Appearance

You can customize the appearance of the RadioButton component by using the CSS rules. Define own CSS rules according to your requirement and assign the class name to the cssClass property.

The background and border color of the RadioButton is customized through the custom classes to create the primary, success, info, warning, and danger type of RadioButton.

tagHelper
custom.cs
@section ControlsSection{
    <ejs-radiobutton id="radio1" label="Primary" name="custom" cssClass="e-primary"></ejs-radiobutton>
    <ejs-radiobutton id="radio2" label="Success" name="custom" cssClass="e-success"></ejs-radiobutton>
    <ejs-radiobutton id="radio3" label="Info" name="custom" checked="true" cssClass="e-info"></ejs-radiobutton>
    <ejs-radiobutton id="radio4" label="Warning" name="custom" cssClass="e-warning"></ejs-radiobutton>
    <ejs-radiobutton id="radio5" label="Danger" name="custom" cssClass="e-danger"></ejs-radiobutton>
}

<style>

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}

.e-radio:checked + .e-success::after { /* csslint allow: adjoining-classes */
  background-color: #689f38;
}

.e-radio:checked:focus + .e-success::after, .e-radio:checked + .e-success:hover::after { /* csslint allow: adjoining-classes */
  background-color: #449d44;
}

.e-radio:checked + .e-success::before {
  border-color: #689f38;
}

.e-radio:checked:focus + .e-success::before, .e-radio:checked + .e-success:hover::before { /* csslint allow: adjoining-classes */
  border-color: #449d44;
}

.e-radio +.e-success:hover::before {
  border-color: #b1afaf
}
.e-radio:checked + .e-info::after { /* csslint allow: adjoining-classes */
  background-color: #2196f3;
}

.e-radio:checked:focus + .e-info::after, .e-radio:checked + .e-info:hover::after { /* csslint allow: adjoining-classes */
  background-color: #0b7dda;
}

.e-radio:checked + .e-info::before {
  border-color: #2196f3;
}

.e-radio:checked:focus + .e-info::before, .e-radio:checked + .e-info:hover::before {
  border-color: #0b7dda;
}

.e-radio + .e-info:hover::before {
  border-color: #b1afaf
}

.e-radio:checked + .e-warning::after { /* csslint allow: adjoining-classes */
  background-color: #ef6c00;
}

.e-radio:checked:focus + .e-warning::after, .e-radio:checked + .e-warning:hover::after { /* csslint allow: adjoining-classes */
  background-color: #cc5c00;
}

.e-radio:checked + .e-warning::before {
  border-color: #ef6c00;
}

.e-radio:checked:focus + .e-warning::before, .e-radio:checked + .e-warning:hover::before {
  border-color: #cc5c00;
}

.e-radio + .e-warning:hover::before {
  border-color: #b1afaf
}

.e-radio:checked + .e-danger::after { /* csslint allow: adjoining-classes */
  background-color: #d84315;
}
.e-radio:checked:focus + .e-danger::after, .e-radio:checked + .e-danger:hover::after { /* csslint allow: adjoining-classes */
  background-color: #ba330a;
}

.e-radio:checked + .e-danger::before {
  border-color: #d84315;
}

.e-radio:checked:focus + .e-danger::before, .e-radio:checked + .e-danger:hover::before {
  border-color: #ba330a;
}

.e-radio + .e-danger:hover::before {
  border-color: #b1afaf
}

</style>
public ActionResult Custom()
{
    return View();
}

Customize width and height

The following section explains about how to customize the height and width of the RadioButton component.

tagHelper
customheight.cs
@section ControlsSection{
    <ejs-radiobutton id="radio1" label="Option 1" name="default" checked="true"></ejs-radiobutton>
    <ejs-radiobutton id="radio2" label="Option 2" name="default"></ejs-radiobutton>
}

<style>

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}

.e-radio + label::before {
  height: 30px;
  width: 30px;
}

.e-radio + label::after {
  height: 28px;
  width: 28px;
}

.e-radio + label .e-ripple-container {
  height: 40px;
  left: -6px;
  top: -5px;
  width: 42px;
}

.e-radio + label .e-label {
  font-size: 15px;
  height: 32px;
  line-height: 30px;
  padding-left: 41px;
}

</style>
public ActionResult CustomHeight()
{
    return View();
}

Name and Value in form submit

The name attribute of the RadioButton is used to group RadioButton. When the RadioButton are grouped in form, the checked items value attribute will be post to server on form submit that can be retrieved through the name. The disabled RadioButton value will not be sent to the server on form submit.

In the following code snippet, Credit and Debit card is in checked state. Now, the value that is in checked state will be sent on form submit.

tagHelper
form.cs
@section ControlsSection{
    <ejs-radiobutton id="radio1" label="Credit/Debit Card" name="payment"  checked="true"></ejs-radiobutton>
    <ejs-radiobutton id="radio2" label="Net Banking" name="payment"></ejs-radiobutton>
    <ejs-radiobutton id="radio3" label="Cash on Delivery" name="payment"></ejs-radiobutton>
    <ejs-radiobutton id="radio4" label="Others" name="payment"></ejs-radiobutton>
    <ejs-button id="primarybtn" content="Submit" isPrimary="true"></ejs-button>
}

<style>

.e-radio-wrapper {
  margin-top: 18px;
}

button {
  margin: 20px 0 0 5px;
}

li {
  list-style: none;
}

</style>
public ActionResult Form()
{
    return View();
}

Set the disabled state

RadioButton component can be enabled/disabled by giving disabled property. To disable RadioButton component, the disabled property can be set as true.

tagHelper
disabled.cs
@section ControlsSection{
    <ejs-radiobutton id="radio1" label="Option 1" name="default"  checked="true"></ejs-radiobutton>
    <ejs-radiobutton id="radio2" label="Option 2" name="default" disabled="true"></ejs-radiobutton>
    <ejs-radiobutton id="radio3" label="Option 3" name="default"></ejs-radiobutton>
}

<style>

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}

</style>
public ActionResult Disabled()
{
    return View();
}

Right-To-Left

RadioButton component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in RadioButton component.

tagHelper
rtl.cs
@section ControlsSection{
    <ejs-radiobutton id="radio1" label="Default" name="default" enableRtl="true"></ejs-radiobutton>
}

<style>

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}

</style>
public ActionResult Rtl()
{
    return View();
}