Use row ID as identifier to only show a particular repeater container

Ask the community
,
21

@adcatch02 , I haven’t read the entire thread, can you repeat the question?

22

@jonatandor35 sure i have two repeaters using the same dataset. I am using the first repeater as a micro index of items that contains full name and a profile image in each repeater item and has row _id in the collection

this functionality is for show and hide repeater items

The second repeater, can be opened by a button on the first repeater and i am trying to only open the applicable second repeater item i.e. a matching record without opening all the items / containers in the second repeater.

23

@adcatch02 I’m not sure I got the entire flow. But you can’t use a single dataset and filter it for one repeater and not to the other (is that what you were asking?)
So you do one of the following:

  1. Use 2 datasets and filter the 2nd based on the 1st input.
  2. Use 1 dataset for the 1st repeater and assign the data to the 2nd repeater using code based on the user selection.

(and of course you can do everything with your collections without any dataset).

24

@jonatandor35 ok thats cool, yes thats what i was thinking. So i now have two datasets, one for each repeater albeit connected to the same collection.

So how do i filter the second dataset using the button thats on the first repeater to show the second repeater matched repeater item?

25

@adcatch02
This is fot 2 repeaters (but I’d suggest using other method, because 2 datasets affect the performance):

$w(“#repeater1).onItemReady(($i, iData, inx) => {
$i(”#button1").onClick(event => {
$w(#dataset2").setFilter( wixData.filter().eq(“_id”, iData._id));
})
})

26

@adcatch02 this code should work, it’s the shortest code but it might be slower than other options.
If you wish to have better performance, you can do it differently but it’ll require more coding.

27

@jonatandor35 ok J.D. thanks a lot, appreciate it. I’ll give this a whirl

28

@jonatandor35 Ok so how this code runs is that the first repeater shows the same items in both containers. and the second repeater does not open.

Dataset 5 is the dataset assigned against the first (small) repeater

722×170 18.9 KB

29

@adcatch02 I don’t understand what you just said. Anyway the repeater in my code is the small repeater while the dataset should be of the big repeater.

30

@jonatandor35 now totally works this is absolutely amazing thanks you are a legend

31

is it also possible to hide the container of the big repeater when being closed as opposed to the entire repeater?

button38 is the hide button on the large repeater

export function button38_click(event) {
const itemClicked = event.context.itemId;
$w(“#repeater3”).forEachItem( ($item, itemData, index) => {
if (itemData._id === itemClicked) {
$item(“#container3”).collapse(); // ← This line doesn’t work
console.log(“Success:”, itemData);
$w(‘#button47’).show();
}
} );
}

32

@adcatch02 I’m not sure what you’re trying to do. Please elaborate.

33

and by the way, instead of lines 137-138 (in your last screenshot, you’re better write:

$w(#dataset5").setFilter( wixData.filter().eq("_id", iData._id));
34

@jonatandor35 yes no prob’s so the large repeater could actually show on page ready several items so i would really like to only close one container in the repeater as opposed to the entire repeater when i click on a hide button

35

@adcatch02 sorry. I still don’t understand. Don’t assume I know what you’re trying to do there. I don’t know what button 38 is, and which repeater is number 3 and what should happen when you click the button.
Maybe you can add a chart or screenshots.

36

@jonatandor35 sorry, yes so the large repeater with (container 3 showing) is shown on the page on page load but there is a hide button to hide the item, please see screen shot and assume that there might normally be several items in the repeater - so would ideally like to hide just that item

988×285 221 KB

37

@adcatch02 OK. Now it’s clearer.
So:

$w("#repeater3").onItemReady(($i, iData, inx) => {
    $i("#button38").onClick(event => {
        $i("#container3").collapse();
    })
})
38

@jonatandor35 thats almost it but it does collapse all items within the entire repeater as opposed to just the single container item that the hide button was initiated from

39

@adcatch02 It should not. Maybe you used your own code in addition to mine?

40

@jonatandor35 just this code? although i changed “#repeater3” to 2 as repeater 2 is the large repeater