I'm using px-data-table with selectable and single select properties.
When I select a row, I get the values of that row from the px-click event's and if a user click's a delete button, it trigger's my delete api. However the data gets deleted but the selection never gets cleared and next row in that table show's as selected.
Is there a way to clear that selection, when a table is reloaded with new data ?
Thanks!!
Hi @PredixPocs,
I created an example in codepen for your scenario, this is workaround way to clear the selection. You have to clear your tableData and re-assign it again.
removeRow: function ( ) {
var dataTable = document.getElementById('tableTest');
var selectedRows = dataTable.selectedRows;
this.splice('data', selectedRows[0].row.dataIndex, 1);
let updatedData = this.data;
this.set('data', []);
this.set('data', updatedData);
}
https://codepen.io/jackie_tran/pen/QOGLNY
Hope this help you.
Jackie
Jackie thanks seems like this worked out for me. I was not using the selectedRows property instead manually getting the selection through click event.
even if the selection stays that works for my use case. But to remove the selection I just tried to reset the data with empty array and back the way you have shown.
Thank You!!
How is your delete API removing the row from tableData ? Is it using the proper Polymer array mutation method for splicing out the data? If not, the component won't be made aware that the array has been changed (first step).
Would you mind doing a little troubleshooting? Or providing your code / an isolated example in a CodePen or Glitch or something? The data-table doesn't have a delete row function out of the box, so it's a little hard to diagnose the issue. The next thing I would try would be to add a restamp property to the dom-repeat on line 77 of aha-table.html, which will cause Polymer to re-render the DOM every time the rows are updated instead of re-using existing DOM. My next theory after that would be that the array change is being lost somewhere between tableData and displayedRows, since the table has its own internal representation of the data.
I'm just remembering that the selectedRows property is read-only, so you can't delete the row from there at the same time you remove it from the table. Again, I assume this is because of the internal representation of the data, but not 100% sure of the history... Hmm. Let me know if you can help by troubleshooting or providing some sample code.
@Randy - I just added you to the git repo were I have this example - https://github.build.ge.com/502141532/sdfc-dashboard.git
Its built of predix-webapp starter sample code so you can just run gulp and access http://localhost:5000
File Name is - simple-asset-view.html line # (171->this.$.delBtn...)
Let me know if that helps else will create the codepen example.
How can I call selected-rows-changed event in px-data-table?
