Invalid Item Index when removing from Table

Tagged: all, remove, row, table

This topic has 16 replies, 3 voices, and was last updated 2 years, 12 months ago by fimarapp.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
February 12, 2021 at 3:14 pm #101492
fimarapp
Member
Dear team behind the glorious Smart Table !
I’m trying to remove all rows in my Table but I’m getting this error:
```
smart.table.js:27 Uncaught Error: Invalid Item Index
    at e.value (smart.table.js:27)
```
I have around 300 elements (rows) and pagination. If I click on select all and then try to remove from page 1 everything works, however if If I do it from a different page it removes some of them and then I get the above error.
This is my current code:
```
    table.getSelection().slice().forEach(row => {
        // Remove from Table
        const index = Array.from(document.querySelectorAll('tr[row-id]'))
          .findIndex(tr => tr.getAttribute('row-id') === row + '')
        table.dataSource.removeAt(index)
    })
```
Note: in all cases I want to remove everything (all rows in all pages), the only different is that when I’m in a different page it crashes.
This is how I created my Table:
```
    Smart('#table', class {
      get properties() {
        return {
          keyboardNavigation: true,
          filtering: true,
          sortMode: 'one',
          selection,
          paging: true,
          freezeHeader: true,
          virtualization: true,
          dataSource: new Smart.DataAdapter({
            dataSource: source, dataFields: fields }),
          columns
        }
      }
    })
```
Any help will be appreciated! Thanks in advance.
Johnny
February 15, 2021 at 12:56 pm #101506
fimarapp
Member
Hope you have a great weekend!
I also tried:
```
table.removeRow(row)
```
but I’m getting an Error
```
Uncaught (in promise) TypeError: table.removeRow is not a function
```
It’s weird because if I call table.getValue(row, id) it works and both methods are for my component selector (described in the API docs)
February 15, 2021 at 4:40 pm #101507
yavordashew
Member
Hi Johnny Johnny,
First make sure you use the newest version(I have tested in a bit older version and it didn’t work) of the smart-table, because the in the newest version the ‘removeRow’ function works.I have also prepared a code snippet that deletes all the rows from the table.Also note that for example if you are on the third page of the table it will select all the remaining rows from this page till the last and will remove them.
```
const table = document.getElementById('table');
let rowId = Array.from(table.getSelection());
        rowId.forEach(id =>{
            table.removeRow(id)
        })
```
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/
February 16, 2021 at 12:34 pm #101512
fimarapp
Member
Dear Yavor, thank you so much but it doesn’t work, I’m using last version 9.1.0 and removeRow is not a function!
I recreated a vanilla version isolated from scratch that you can use to check yourself.
Please, check this out on JSFiddle: https://jsfiddle.net/641zn0qt/
Select rows and try to remove : (
This is the same code from the JSFiddle above:
package.json
```
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "smart-webcomponents": "^9.1.0"
  }
}
```
index.html
```
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />
  <script type="module" src="node_modules/smart-webcomponents/source/modules/smart.table.js"></script>
</head>
<body>
  <button>Remove Selection</button>
  <smart-table id="table"></smart-table>
  <script type="module">
    /*
      1. Build Table
      2. Remove selected rows
    */
    // 1. Build Table
    const fields = [
      'id: string',
      'active: boolean'
    ]
    const source =
      [...Array(100).keys()].map(id => { return {id, active: true}})
    const get_columns = () =>
      fields.map(field => {
        const f = field.split(':')
        return {
          label: f[0],
          dataField: f[0],
          dataType: f[1].trim()
        }
      })
    Smart('#table', class {
      get properties() {
        return {
          keyboardNavigation: true,
          filtering: true,
          sortMode: 'one',
          selection: true,
          paging: true,
          freezeHeader: true,
          virtualization: true,
          dataSource: new Smart.DataAdapter({
            dataSource: source, dataFields: fields }),
          columns: get_columns()
        }
      }
    })
    // 2. Remove selected rows
    const table = document.getElementById('table')
    document.querySelector('button').onclick = () => {
      let rowId = Array.from(table.getSelection())
      rowId.forEach(id => table.removeRow(id))
    }
	</script>
</body>
</html>
```
February 16, 2021 at 2:27 pm #101513

yavordashew
Member

Hi Johnny Johnny,
I would like to give you my apologies because I mislead you with my previous reply about the ‘removeRow’ function and the reason for that is that I
tested it with a newer version of ‘smart-webcomponents’ which will be released next week.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

February 16, 2021 at 3:36 pm #101514

fimarapp
Member

No worries Yavor, thank you so much, I’m looking forward to check that release next week (better than Christmas)! Your Web Component library deserve more stars on Github ^^
By the way, now that you have checked this basic example: https://jsfiddle.net/641zn0qt/ where you can select any row you want from each page, I would like to know if removeRow will be able to remove every selected row independently of which page we are. If you navigate throw Table pages, Smart Table keeps selections so we have the references (to all items we wanna remove).
Best regards,
Johnny

February 17, 2021 at 3:50 pm #101521

admin
Keymaster

Hi Johnny,
removeRow works with row ids and the data source, not with the actual TR HTML tags so it will be Ok to use it.
For unselecting rows, you can use unselect method and also the clearSelection method. unselect accepts row id, too.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

February 19, 2021 at 11:31 am #101530

fimarapp
Member

Dear Peter,
Thank you so much, that sounds great! I will check next week for next release!
Enjoy the weekend,
Johnny

March 1, 2021 at 9:49 pm #101565

fimarapp
Member

Dear admin, where can I follow coming releases? github & blog section? I’m looking for using ‘removeRow’, Yavor mentioned a new release with this functionality was coming last week but probably there are some delays??.
Thanks for your efforts and enjoy your day!

March 2, 2021 at 6:13 am #101569

admin
Keymaster

Hi Johnny,
Yes, we delayed the release for 19.03. We are adding more changes to the Table and additional APIs which make it much faster.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

March 3, 2021 at 1:02 pm #101571

fimarapp
Member

Awesome Peter, best Table ever!! Thank you so much for your reply! Really appreciated!
Enjoy the rest of your day!
Johnny

April 16, 2021 at 1:01 pm #101713

fimarapp
Member

Hi! There, hope you are doing super great! Great job with version 9.2.85. ^^
I’m trying to remove rows but if I use table.removeRow(1) it doesn’t delete it from the interface. Shall we need to do something else, update or something?
table.getSelection().forEach(rowId => {
table.removeRow(rowId)
console.log(rowId)
})
Best regards,
Johnny
Johhny

April 17, 2021 at 6:43 pm #101716

admin
Keymaster

Hi,
We are aware of that and work on it, but there is also an issue in the provided code. When you remove a row within that foreach, the next row’s index in the loop will be incorrect. We suggest you using a different type of loop – ‘for’ and correct its step after you remove a row. Otherwise, while you remove rows, you will skip a step in the loop.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

April 19, 2021 at 12:23 pm #101719

fimarapp
Member

Thank you so much for your answer Peter! Right now while the issue is solved I’m using this:
for (const i of Array.from(table.getSelection()).sort((a, b) => b – a))
table.dataSource.removeAt(i)
This supports random selection between different table pages, it always deletes starting form the highest index, but again the problem is that all index should be updated because if I remove index 1 and 2, and then the new 1 and 2 it removes 3 and 4.
Best regards,
Johnny Johnny

April 21, 2021 at 10:05 pm #101725

fimarapp
Member

In version 9.3.11 table.removeRow is working if you remove one row each time or all the rows from one table page.
However, if you select random rows from different pages it doesn’t work : ( steps to reproduce the issue:
0.- Open this fiddle: https://jsfiddle.net/qo9zya08/
1.- Select these rows: 2,0 and 11
2.- Click on remove
3.- If you check previous page, rows are still there: 2 and 0 checked (Error)
4.- If you open console it says that 11 and 0 were removed (Error)
It should remove 2, 0 and 11
the console should say 11, 2, 0
and the table should be updated
One of my peers is starting to use your Table as well and would like to help and report issues/errors.
Warm Regards,
Johnny Johnny
Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

You must be logged in to reply to this topic.