CODEWITHSUNDEEP
javascriptgoogle-visualization
AL̲̳I
AL̲̳I

Reputation: 2461

How to keep checkbox state in google visualisation table with checkboxes

I am using google visualisation table and adding check boxes in the list. I want to select some rows with check boxes and perform some action on those selected row. But when the sort or page event is called the table is redrawn and the check boxes goes unchecked.

Here is the fiddle

How can I keep the checkbox state after the table is sorted or page is changed?

Thank you

Upvotes: 0

Views: 124

Answers (1)

Catalin Iancu
Catalin Iancu

Reputation: 722

Before the event is called, you can do something like this to save the checked state of you checkboxes:

  var checkboxes = document.querySelectorAll("#table_div input[type=checkbox");
  var checkboxesState = {};
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("change", function(){
      checkboxesState[this.getAttribute("id")] = this.checked;
    });
  }

And after the event is called, restore it:

    google.visualization.events.addListener(table, 'sort', function(ev) {
       //Needed, since the whole table DOM will change
       checkboxes = document.querySelectorAll("#table_div input[type=checkbox");
          for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxesState[checkboxes[i].getAttribute("id")]){
              checkboxes[i].checked = checkboxesState[checkboxes[i].getAttribute("id")];
            }
          }
    });

Upvotes: 1

Related Questions