You probably already know that DataTable has the ability to show checkboxes instead of plain text data. It allows you to provide a simple solution for status marking and data selection.
Basic checkboxes
The minimal code for initializing a DataTable with checkboxes will look as follows:
view:"datatable",
columns:[
{ id:"status", header:"Is Active", width:80, css:"center",
template:"{common.checkbox()}"},
{ id:"value", header:"Records", fillspace:1 },
],
data: [
{ status:0, value:"Record A"},
{ status:1, value:"Record B"},
{ status:0, value:"Record C"}
]
});
It will result in a nice-looking JavaScript grid presented in the picture below. The “{common.checkbox()}” line in the template expands in a checkbox control.
If you check the above demo you may find that the checkbox functionality is a bit disappointing. It requires very precise clicking, as checkboxes are too small. However, we can solve this problem in one of two ways. We can increase the size of checkboxes or allow clicking anywhere in the row to check the related checkbox.
Clicking simplified
Let’s consider the possibility of checkboxes’ size increasing first. It is very easy to enlarge a checkbox’s size by applying a simple css rule:
width:22px;
height:22px;
margin-top:5px;
}
Despite being a bit less attractive, the resulting checkboxes are much more handy for clicking.
The second approach isn’t difficult for implementation as well. It implies that clicking in any place of a row will check the corresponding checkbox. We can use the onItemClick event of the DataTable to check the row.
onItemClick:function(id){
this.getItem(id.row).status = !this.getItem(id).status;
this.refresh(id.row);
}
},
This code adds a click handler that will change the state of a checkbox when a user clicks in any place of the related row.
Using custom icons
If a checkbox has a special meaning, it would probably make sense to replace it with a pair of icons for the checked and unchecked states, respectively. For example, we can use a common “eye” icon for the “Is Visible” column.
To replace a checkbox with an icon, we need to define our own template instead of the standard one:
if (value)
return "<span class='webix_table_checkbox webix_icon fa-eye'></span>";
else
return "<span class='webix_table_checkbox webix_icon fa-eye-slash'></span>";
}},
As you can see, we have used spans instead of real inputs. Each span has three css classes:
- webix_table_checkbox – adds the checkbox functionality to a span. Clicking of such a span will trigger state changing
- webix_icon – renders a span as an icon
- fa-yey and fa-eye-slash – are names of the Font Awesome icons
Important note: For the above code to work correctly, you need to set the checkboxRefresh property of DataTable to true. It is necessary for all custom checkbox implementations, as this flag forces row repainting after clicking on a custom checkbox.
Master to rule them all
When you have a lot of records in your JavaScript data grid, clicking them all would be a tedious job. To make this process easier, you can add the master checkbox in the DataTable. Clicking the master checkbox will check/uncheck all rows at once.
width:80, css:"center",
template:"{common.checkbox()}"},
In the above code, we have the content:”masterCheckbox” instruction instead of a text header. This instruction will be rendered as a checkbox input in the header of DataTable. Checking the input will change state of all checkboxes in the DataTable.
More distinct marking
You can color the checked rows to make them more detectable. It can be done easily by using the cssFormat template in the columns’ configuration.
function status(value, obj){
if (obj.status) return "row-marked";
return "";
}
//and in the columns' configuration
{ id:"value", header:"Records", fillspace:1 , cssFormat:status },
Pay attention that you need to enable the checkboxRefresh flag for the described functionality to work properly, as we’ve done it in the icons usage scenario.
As you can see, the checkboxes functionality in DataTable can be easily customized to expand the widget’s possibilities.
I hope that some of the techniques described in this article will be helpful for you. You can combine them to achieve greater effect or invent new useful techniques yourself.
