Unable to Select All in check enabled table in Google App Script

hashyaha commented 2 years ago

Describe the bug I follow the code from this video to create a sidebar in Google Sheets. It uses Google App Script and also Metro UI table component. After the sidebar loads, I couldn't select all rows. There is no issue if I change to earlier version of metro ui (v4.4.3)

To Reproduce The html code (sidebar.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metro 4 -->
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <table class="table striped table-border mt-4"
       data-role="table"
       data-rows="5"
       data-rows-steps="5, 10"
       data-show-activity="false"
       data-rownum="true"
       data-check="true"
       data-check-style="2">

    <thead>
    <tr>
        <th data-sortable="true" data-sort-dir="asc">ID</th>
        <th data-sortable="true">Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Tiger Nixon</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Ferris</td>
    </tr>
    </tbody>
</table>

    <!-- Metro 4 -->
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
  </body>
</html>

The javascript code:

function loadSidebar() {
  const hs = HtmlService.createTemplateFromFile("sidebar")
  const ho = hs.evaluate()

  const ui = SpreadsheetApp.getUi()
  ui.showSidebar(ho)  
}

function createMenu() {
  const ui = SpreadsheetApp.getUi()
  const menu = ui.createMenu('Utilities')
  menu.addItem('Delete Worksheets', 'loadSidebar')
  menu.addToUi();
}

function onOpen() {
  createMenu()
}

Expected behavior When select all is clicked, all of the checkboxes should be selected.

Screenshots This is what happens when v4 was chosen in the html

This is what it is supposed to be. (using v4.4.3)

Desktop (please complete the following information):

OS: Windows
Browser: chrome
Metro Version: Latest (should be v4.5.0)

Additional context

xscode-auto-reply[bot] commented 2 years ago

Thanks for opening a new issue. The author has been notified and will review it as soon as possible. For urgent issues and priority support, visit https://xscode.com/olton/Metro-UI-CSS or Patreon

eumaios commented 2 years ago

I observe exactetly the same

aculich commented 2 years ago

I have the same problem with the latest version 4.5.0, but as @hashyaha notes, the previous version works just fine so I can work around the problem for now by including the older version:

    <script src="https://cdn.metroui.org.ua/v4.4.3/js/metro.min.js"></script>

docteuri commented 1 year ago

To correct this issue, you need to add an array to the data after the line 34696 var data, stored_keys; data = []; Thanks a lot

ErikPoppleton commented 9 months ago

I have the same problem in v4.5.1 but cannot downgrade because I just upgraded to get the fix for another bug. Something in metro.min.js is throwing an undefined error...

TypeError: undefined is not an object (evaluating 'e.indexOf')

The error is coming from this code block in metro.min.js:

t.on(b.events.click, ".table-service-check-all input", function() {
    var e,
    t,
    n = w(this).is(":checked"),
    i = r.checkStoreKey.replace("$1", c),
    s = b.storage;
    !0 === r.useCurrentSlice ? (t = s.getItem(i, []), n ? w.each(o.currentSlice, function() {
        -1 === t.indexOf("" + this[r.checkColIndex]) && t.push("" + this[r.checkColIndex])
    }) : w.each(o.currentSlice, function() {
         var e = "" + this[r.checkColIndex];
         -1 !== t.indexOf(e) && b.utils.arrayDelete(t, e)
    }), e = t) : n ? w.each(o.filteredItems, function() {
         -1 === e.indexOf(this[r.checkColIndex]) && e.push("" + this[r.checkColIndex]) //this line
    }) : e = [],
    s.setItem(i, e),
    o._draw(),
    o._fireEvent("check-click-all", {
         check: this,
         status: n,
         data: e
    })
});

olton / Metro-UI-CSS

Unable to Select All in check enabled table in Google App Script #1822