FW Crayons DataTable (fw-data-table) - Issue with getSelectedIds and getSelectedRows

App Platform
, , , ,
1

Hey Dev Community,

I am currently working on an App which opens a modal in Freshdesk’s Ticket Details page where our agents can select the affected order position (e.g. for warranty cases).

On opening, the modal fetches the positon from our OMS and fills a Crayons datatable.
In rare cases, every order position could be affected, therefore I choose to allow select all.
Here’s the modal’s html body:

<body>
    <fw-data-table id="dtOrderItems" is-selectable="true" is-all-selectable="true" label="Artikelpositionen">
    </fw-data-table>
    <fw-button id="selectItemsBtn" color="primary">Auswählen</fw-button>
    <fw-toast id="warningToast"></fw-toast>
</body>

When the user clicks the button, it fetches the selected IDs and sends it to the parent instance:

async function sendData(event) {
  const dataTable = document.getElementById('dtOrderItems');
  const stringArray = await dataTable.getSelectedIds();
  const intArray = stringArray.map(Number);
  if (intArray.length > 1) {
    document.querySelector('#warningToast').trigger({type:'warning', content: 'Aktuell nur Auswahl einer Position erlaubt!'});
  } else {
    client.instance.send({
      message: {
        positionNumbers: intArray
      }
    });
    client.instance.close();
  }
  
}

For the ID column, I used our order-pos-numbers (so number values), as they are unique.

So here’s the issue:
When I select an item, the getSelectedIds returns an string array as described in DataTable (fw-data-table) | Crayons

When I select the whole table, the getSelectedIds returns the ids in number values.
And when I then try to de-select and select single positions, it removes/ adds the string values.
So I can end up with a response from getSelectedIds like this:

[1, 2, 3, '2']

Does anyone experience the same issues? Who is the Crayons expert in here?

I do load Crayon scripts from as explained in documentation:

    <script type="module"
        src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.js"></script>

Looking forward to your replies. All the best

Thomas

2

Hi,

I found another issue with fw-data-table. SelectedRows only is populated when using “select all” checkbox.

I registered for the change events and do some logging to see the behaviour:

...
  dataTable.addEventListener('fwSelectAllChange', selectionChanged);
  dataTable.addEventListener('fwSelectionChange', selectionChanged);
}

async function selectionChanged(event) {
  console.log(event.type + ": " + event.detail.rowId + " selected: " + event.detail.checked);
  console.log("Selected: " + JSON.stringify(event.detail.selected));
  console.log("SelectedRows: " + JSON.stringify(await event.target.getSelectedRows()));
  console.log("SelectedIds: " + JSON.stringify(await event.target.getSelectedIds()));
}
...

And these are the logs:

image
image620×650 18.9 KB

So selecting a single item does only mirror over to selectedIds() and not to selectedRows().
Using select all is reflected in rows, but unchecking a single item again not.

Am I missing something? Am I not handling it as it should be handled?

I am pretty confused that such a big issue is not already known.

All the best

Tom