Checkboxes in datatable

#1

Hi,
Please see the example here - Code Snippet
I’m working with 2 datatables. each data entry is connected or more entries in second table. When I click on a row in first table I would like the relevant checkboxes in second table to be highlighted.
In this example, when I click on the first row (Ga_2022) in left table, I would like 1,3,4 checkboxes on second table to be highlighted since -
const port_data = [
{id:1, owner:“admin”, name:“Ga_2022”, sims:[1,3,4], created:1627609800000, last_modified:1627709800000},
{id:2, owner:“user1”, name:“WH_2022”, sims:[5,6,7], created:1624409800000, last_modified:1624829800000},
];

I’m working with jet so would need to know what to put inside the init().
Thanks,

#2

Hi @tnad0073 ,
Using the onAfterSelect event is the best way of doing this. That method has selection parameter with the data about selected item.
You’ll need to clean the previous values of the checkboxes, and after that apply new values according to the new selection.

Please, check the snippet: Code Snippet

To implement the solution in your jet app use this.on method instead of attachEvent:

<!-- Use this for jet-->
const table =this.$$(localId)
this.on(table, "onAfterSelect", function(sel){...})
<!-- Instead of that one
const table = $$(id)
table.attachEvent("onAfterSelect", function(sel){...})-->
#3

Thank you for the quick response! works as expected

#4

I also want to use a checkbox to filter where ptag is true. See snippet Code Snippet
I’m able to filter when checked, how to remove filter when unchecked (what goes in the else statement?

$$(“ptag_ch”).attachEvent(“onChange”, function(sel){
$$(“sim_ch:list”).refresh();
const val = this.getValue(sel);

        if (val) {
          $$("sim_ch:list").filter(function(obj){
            return obj.ptag == true;
          })
        }
        else {
                 }
      })
#5

Hi @tnad0073 ,
onChange method directly provide you with the new and old values of the checkbox. I would like to mention that there’s no need in refreshing the table in that case, as you don’t change any values in the table.
Please, check the snippet: Code Snippet