Metro-UI-CSS Unable to Select All in check enabled table in Google App Script

trafficstars

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

Aug 30 '21 14:08 hashyaha

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

Aug 30 '21 14:08 xscode-auto-reply[bot]

I observe exactetly the same

Sep 09 '21 09:09 eumaios

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>

Sep 28 '21 13:09 aculich

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

Sep 07 '22 13:09 docteuri

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
    })
});

Oct 05 '23 14:10 ErikPoppleton

Metro-UI-CSS Metro-UI-CSS copied to clipboard

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

Metro-UI-CSS
Metro-UI-CSS copied to clipboard