JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Table › Invalid Item Index when removing from Table

Tagged: , , ,

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.