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()}"}
]
});
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
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
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)
}
}
});
Shortly, a technique of creating a custom checkbox is the following:
Take a look at the image below and learn how to create the checkboxes displayed in the first column.
The function will accept 3 parameters and be called for each data item:
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>
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}
...
]
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
Shortly, a technique of creating a custom radio is the following:
Take a look at the image below and learn how to create the radio buttons displayed in the first column.
The function will take 3 parameters and be called for each data item:
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>
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