Hello,
I have a grid that has a boolean checkbox in first column and I need to separate it from the row select event but I cannot seem to find an event that will do this as it’s in a grid and not a form.
In ver5 I used cell id onclick but I do not see this in docs…could someone suggest a solution or point me to an example please?
| checkbox | Column 2 | Column 3 |
If I click on row it triggers cellclick or afterselect as advertised but i need that to select 1 row and if i check check box needs to trigger another event because multiple checkboxes are possible
So either an event I may be missing or if I can click on that check box and get a value to let me know it’s a checkbox so I can use a condition on selection event - thanks
You can use the cellClick, beforeSelect or beforeEditStart events:
https://docs.dhtmlx.com/suite/grid/api/grid_cellclick_event/
https://docs.dhtmlx.com/suite/grid/api/grid_beforeeditstart_event/ (triggers before checking the checkbox, you can also use the afterEditEnd, if you need to catch a moment after the checkbox switch)
https://docs.dhtmlx.com/suite/grid/api/selection/selection_beforeselect_event/ (or afterSelect)
depending on your needs.
All the events have the column and row information in the attributes to detect which cell was clicked.
1 Like
Hey sematik,
Before I realized you answered I was working on CellClick and saw I could use the column id to use as a condition…but I will certainly look at the events you posted as they may come in handy…
Appreciate the assist!
In case others want to work with a master checkbox and row selection:
grid_01.selection.events.on("CellClick", function(row,col){
id = col.id;
// If checkbox cell ID is not clicked
// then filter original array
// by selected row column values and populate 2nd grid
if (id != "is_checked")
{
array_filtered = original_array.filter(f => f.column_01===row.column_01 && f.column_02===row.column_02)
grid_02.data.parse(array_filtered);
}
// Checkbox cell ID was clicked
// Create an empty array
// Iterate grid_01 rows and populate array w/ checked boxes
else
{
arr = [];
grid_01.data.forEach(function (row)
{
if (row.is_checked) { arr.push(row.uid) }
})
// If array has checked items
if (arr.length > 0)
{
array_filterd = original_array;
// If column filter used then filter condition array_filtered
if (grid_01.getHeaderFilter("filter_name").querySelector("select").value=="Yes")
{
array_filtered = original_array.filter(f => f.filter_name==="Yes")
}
if (grid_01.getHeaderFilter("filter_name").querySelector("select").value=="No")
{
array_filtered = original_array.filter(f => f.filter_name==="No")
}
// Populate 2nd grid by parsing data where pushed arr values are in filtered array
data = array_filtered.filter(f => arr.includes(f.uid))
grid_02.data.parse(data);
return true;
}
// Array has no checked items
else
{
data = [];
grid_02.data.parse(data);
}
}
});