Question:
How to highlight a line of data in a repeater
Product:
WIx editor Velo
What are you trying to achieve:
When the user select a line in repeater1, it triggers repeater2 that shows historical informations about selection in repeater 1.
details of usage : repeater1 lists all the streets of the city, when the user click on one line (ie on one street), the second repeater lists all the controls made on that street.
I work with datasets, and coding with velo. when clicking on one line of the first repeater, I can catch the street id, and then use the street id to apply a filter on repeater 2 to just show the controls made on the selected street.
The process works well, but I would like to highlight the line of the container selected ( the street selected) by putting, for exemple, the background of the selected container in a different color.
What have you already tried:
I looked at the different elements captured by the click on the container, but did not see any way to identify the container (and its properties)
You can use onItemReady() to define things like an $item('#myButton').onClick((e) => {console.log(e)}) handler for every item added. In this example every row of data added to your repeater with a #myButton element in it will get an onClick() handler defined that console.logs the event.
Sorry the mechanic of the code is working well, ie when the user clicks on one line of the street repeater, I can identify the street id clicked, and then retreive the street controls of that street.
My problem is just that I want to highlight the line of the street selected, by putting the backgound of the line (the container) in another color. I do not know how to do this.
This page is just intended for some users to query the data, no updates at this level.
Some explanations and the code:
the event tracked refers to the container clicked. This container is part of a repeater linked to a dataset (datasetJPN)
#datasetJPN is the dataset with the streets list, refJpn is the unique ID of the street. #datasetSurvey refer to the different controls made on the streets, with pnjId refering to the street id.
This code works well, but how to highlilght the selected line
export function containerJPN_click(event) {
let $item = $w.at(event.context);
let clickedItemData = $item("#datasetJPN").getCurrentItem();
console.log("clickedItemDataRefJPN");
console.log(clickedItemData.refJpn);
//highlight the selected line/street
// something like object.backgroundcolor.set("rgb(0,0,255)")
// ?????? but do not know how to do
let filter = wixData.filter();
filter = filter.eq("pnjId", clickedItemData.refJpn);
console.log("filter");
console.log(filter);
$w('#datasetSurvey').setFilter(filter);
}
Another comment : I also tested to work with a “Table” object instead of a repeater object, but, although they have a standard for highlighting the selected line, the control of the presentation is less easy, and also because I want to use the column titles clicked event to manage sorting (ascending, desending) on some of the major columns