Unselect a row in a table

Ask the community
,
1

Is it possible to reset the row selection in a table object on a page

A table (named ‘#tableMat’) is shown with a list of items. When the user clicks on a item line, details of the selected item are shown on the right of the screen.
On this item list, the user can also use a filter on item family.
Then, by code, the table is filtered.
The problem is that if the user has already choose an item (before filtering) at, let say the 3rd line, when the filter is applyed, the line 3 is still selected.
I managed to hide the original item selected details, no problem with that, but I want to unselected the originally selected line.
I tested with $w(‘#tableMat’).refresh(); $w(‘#tableMat’).selectRow(null), $w(‘#tableMat’).selectRow(-1) without success.
Any idea

2

Where is your whole code?

3

export function tableMat_rowSelect(event) {
// display some detailed information on item selected in another object on the page
// from #datasetJPNStructure"
}

export function dropdownJpn_change(event) {
// a drop down for selection of a groupid of items

let filter = wixData.filter();
let SelectedJPN = event.target.value;

if (SelectedJPN == "RESET_ALL") {
    // everything should be displayed so keep filter() empty

} else {
    // only items element of "selected JPN group" should be displayed 
	filter = filter.eq("refPnj", SelectedJPN);
	
}
console.log(filter);
$w("#datasetJPNStructure").setFilter(filter);

// hide the objects with extra information from previously selected item
$w('#imagePa').hide();
$w('#imagePi').hide();

// as the previously position of the selected row is still selected, unselect it
// what I tested to unselect the row previously selected
$w('#tableMat').refresh();
$w(‘#tableMat’).selectRow(null);
$w(‘#tableMat’).selectRow(-1);

}

4

Try to complete this one…

import wixData from 'wix-data';

let myDataset = '#datasetJPNStructure';
let myTable = '#table1';
let myDropdown = '#dropdownJpn';
let filter = wixData.filter();

$w.onReady(async()=> {
	$w(myDataset).onReady(()=> {
		$w(myTable).onRowSelect((event)=>{
			console.log(event.target.id+'-clicked');
			console.log('Index: ', event.rowIndex);
			console.log('Data: ', event.rowData);
			console.log('Title: ', event.rowData.title);			
		});


		$w(myDropdown).onChange((event)=>{console.log(event);
			let selectedJPN = event.target.value; console.log(selectedJPN);
			if (selectedJPN === "RESET_ALL") {// everything should be displayed so keep filter() empty
				$w(myDataset).setFilter(wixData.filter());
				

			} 
			else {// only items element of "selected JPN group" should be displayed				 
				filter = filter.eq("refPnj", selectedJPN);
				

			}
		});

	});
});
5

Thanks, but unfortunately this code gives exactly the same behaviour. WHen I select an item (so a line), let’s say the third line of the whole list, and then use the drop down to selet items from a specific family, the third line is still selected (ie in a different color, as set in the table parameters)
I just would like to say something like “Mytable.unselectrow(3)” to reset the line 3 color

6

Ok, you are right, i did not test it and took a second look onto your issue…

There is no option given by wix, to unselect the row.

  1. $w(‘#myDataset’).refresh() will not work !!!
  2. $w(‘#myTable’).refresh() will not work aswell !!!
  3. $w(“#myTable”).selectRow(0); → will also not help you out !!!

But i could still find a solution for your problem anyway :slight_smile:

Run the following code inside of your … onRowSelect trigger…

       $w(myTable).onRowSelect((event)=>{let tableData
			console.log(event.target.id+'-clicked');
			console.log('Index: ', event.rowIndex);
			console.log('Data: ', event.rowData);
			console.log('Title: ', event.rowData.title);
	        //--------------------------------------------
			setTimeout(() => {console.log('Step-1');			
				tableData = $w('#table1').rows;				
			}, 1000);

			setTimeout(() => {console.log('Step-2');
				$w('#dataset1').refresh();	
			}, 2000);

			setTimeout(() => {console.log('Step-3');
				$w('#table1').refresh();	
			}, 3000);

			setTimeout(() => {console.log('Step-4');			
				$w('#table1').rows = tableData;
			}, 4000);				
		});

Inspect your logs. You will get → 4 ← STEPS popping up each second in your console-log. At which step → do you get your wished functionality working ???

7

It could be much easier if WIX could just add another EVENT-TRIGGER like you already mentioned before in your last post-comment … ---->

I just would like to say something like “Mytable.unselectrow(3)” to reset the line 3 color

There should indead be another Event-Trigger to unselect the current selected row.

$w('#myTable').resetSelection() <--- or someting like that.
$w('#myTable').reset() <--- or someting like that.

How to get this functionality i already have shown right now.
Shouldn’t be a big deal to add such a simple additional trigger.

@Wix

1 Like
8

Step 4 make the selected line disapear automatically. So, if I understand well, your idea is to store the original table data in a variable, and restore it when the user uses the dropdown to select?

9

Idealy, there should be 2 functions/options:
1 : unselect all the selected lines
2: unselected a specific selected line ( by its row number)

1 Like
10

Since there is no way to select several lines → (no multi-selection possibility), no need for …

unselected a specific selected line ( by its row number).

But maybe another idea → MULTI-SELECTION of table-rows :wink:

This is a pretty simple table solution → do not expect to much of it’s functionalities.

Your better options would be …

  1. Instead of using the wix provided table → you better use → REPEATER.
  2. Or even a much better option → you generate your own TABLE-SOLUTION (iFrame / Custom element).
11

Thanks, I think I will go to the use of repeater. No time to make my own Table-SOlution

1 Like