Checkbox and Radio in DataTable

DataTable allows you to add any HTML elements inside of it (using the template attribute of the columns parameter).
The library provides ready-to-use solutions for popular checkbox and radio controls, as well as for "edit" and "trash" icons to save your time.

The controls are specified through the same template attribute of the columns parameter.

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"ch1", header:"", template:"{common.checkbox()}"},
        { id:"ra1", header:"", template:"{common.radio()}"}
    ]
});

Сheckbox

A standard checkbox.

To define a checkbox column, set the template attribute to "{common.checkbox()}":

Creating a checkbox column

columns:[
    { id:"ch1", header:"", template:"{common.checkbox()}"}
    ...
]

Related sample:   Checkbox and Radio in a DataTable

Radio

A radio button.

To define a radio column, set the template attribute to "{common.radio()}":

Creating a radio column

columns:[
    { id:"r1", header:"", template:"{common.radio()}"}
]

Related sample:  Using "Inline" Editors

Catching Changes of Checkbox and Radio States

You can catch the changing of a checkbox or a radio button state with the help of the onCheck event.

webix.ui({
  view:"datatable",
  columns:[
    { id:"ch1", header:"", checkValue:'on', uncheckValue:'off', 
        template:"{common.checkbox()}"},
    { id:"ra1", header:"", checkValue:'on', uncheckValue:'off', 
        template:"{common.radio()}"},
    // other columns
  ],  
  data: grid_data,
  on:{
    onCheck:function(rowId, colId, state){
      console.log(state)
    }
  }
});

Custom Checkbox

Shortly, a technique of creating a custom checkbox is the following:

  1. Create a function defining a new checkbox.
  2. Set it as the value of the template attribute.
  3. Set the checkboxRefresh parameter to true to force the table getting refreshed after each change of the checkbox value.

Take a look at the image below and learn how to create the checkboxes displayed in the first column.

1. Create a function that will define your custom checkbox.

The function will accept 3 parameters and be called for each data item:

  • obj - (object) the data item object
  • common - (object) the predefined checkbox template
  • value - (boolean) the value of the checkbox. true, if the box is checked. Otherwise, false. Initially, the parameter is null and take the boolean value just when you check the checkbox.

Please, pay your attention to a very important thing - the 'webix_table_checkbox' CSS class.

This very class forces a standard DIV to behave as a checkbox. Therefore, while defining a look of your checkbox, don't forget to apply the 'webix_table_checkbox' CSS class to it.

Function defining a custom checkbox

function custom_checkbox(obj, common, value){
    if (value)
        return "<div class='webix_table_checkbox checked'> YES </div>";
    else
        return "<div class='webix_table_checkbox notchecked'> NO </div>";
};
<style type="text/css">
    .checked{
        color:green;
        font-weight: bold; cursor:pointer;
    }
    .notchecked{
        color:red;
        font-weight:bold; cursor: pointer;
    }
</style>

2. Set the 'template' attribute of the related column to the name of the function.

Once you do this, the column will display data returned by the function defined above.

Setting custom template for the column

columns:[
    { id:"ch1", header:"",template:custom_checkbox}
    ...
]

3. Specify the 'checkboxRefresh' parameter and set it to true.

The checkboxRefresh parameter answers for repainting the related data record. When it set to true, each time the checkbox value is changed DataTable will repaint the related record.

Making DataTable getting refreshed after each change of the checkbox value

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"ch1", header:"",template:custom_checkbox},
        ...
    ],
    checkboxRefresh:true
});

Related sample:  Custom Checkbox and Radio in DataTable

Custom Radio

Shortly, a technique of creating a custom radio is the following:

  1. Create a function defining a new radio.
  2. Set it as the value of the template attribute.

Take a look at the image below and learn how to create the radio buttons displayed in the first column.

1. Create a function that will define your custom radio.

The function will take 3 parameters and be called for each data item:

  • obj - (object) the data item object
  • common - (object) the predefined radio template
  • value - (boolean) the value of the radio. true, if the radio is checked. Otherwise, false. Initially, the parameter is null and take the boolean value just when you check the radio.

Please, pay your attention to a very important thing - the 'webix_table_radio' CSS class.
This very class forces a standard DIV to behave as a radio. Therefore, defining a look of your radio don't forget to apply the 'webix_table_radio' CSS class to it.

Function defining a custom radio

function custom_radio(obj, common, value){
    if (value)
        return "<div class='webix_table_radio checked'></div>";
    else
        return "<div class='webix_table_radio notchecked'></div>";
};
<style type="text/css">
    .checked{
        background:green;
        width:16px; height:16px; margin-top:3px;
    }
    .notchecked{
        background:orange;
        width:16px; height:16px; margin-top:3px;
    }
</style>

2. Set the 'template' attribute of the related column to the name of the function.

As you specify the template attribute in such a way, the column will display data returned by the function defined above.

Setting custom template for the column

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"ch1",     header:"",  template:custom_radio},
        ...
    ]
});

Related sample:  Custom Checkbox and Radio in DataTable

Back to top
If you have not checked yet, be sure to visit site of our main product Webix open source html5 framework and page of web datagrid product.