Code to Use Dropdown to Sort

Ask the community
,
1

Can anyone help with the code for a dropdown menu to sort results from the database? Thanks.

2

Please add more details.

3

I am currently using buttons to sort which works great. But I want to use a dropdown in place of the buttons .
My buttons work using the the wix;

$w("#myDataset").setSort( wixData.sort()
6  .ascending("lastName")
7  .descending("age")
8);
4

@freddy Hi Freddy, thanks for reaching out.

For more context, are you looking to change the the element from a button to a dropdown?

5

@richardb Yes. Thanks

6

@freddy Thanks for the update. Are you able to publish the site and post the link on here? It is hard to visualize the issue you are running into. My guess is that you can swap out the button element and simply replace with the dropdown element on the editor. Then the code that you use to trigger the sort can be used on the new dropdown element you created.

7

@freddy So what options would the dropdown have? last name? or age? or something else entirely?
You might be interested in checking out the filter function. filter - Velo API Reference - Wix.com
as well as the setFilter function setFilter - Velo API Reference - Wix.com

something simple might be:

$w("#your_Dropdown").onChange(e => {
    $w("#your_dataset").setFilter(wixData.filter().contains("field you are filtering for", e.target.value))
}
8

I currently have these Buttons that sort a field by the the highest number within.
I am trying to combine the sorts element for a dropdown in place of the buttons .

Here are the ones for the buttons that work perfectly

329×582 33.9 KB

9

Ok, you need a function that is going to receive the values you are going to get from the dropdown menu items, upon selection.

Let’s call this function sortData , and this function is going to receive a parameter with the sorting value, we are going to call it sorting . This function does not return anything, it just sets a variable that holds the sorting object and then sorts the dynamic dataset.

Then we need a $w(“#dropdown”) with the values that you used to sort, redAvg , yellowAvg , greenAvg and blueAvg .

And you can get it’s value when you change it, using the onChange() method and getting the dropdown value with it’s property value .

const sortData = (sorting) => {
  const sortObj = wixData.sort().descending(sorting)
  $w('#dynamicDataset').setSort(sortObj)
}

$w.onReady(() => {
  $w('#dropdown').onChange((e) => sortData($w('#dropdown').value))
})
10

And if you need to change the direction of the sort, just add another parameter and an object literal with the directions choices and when calling sortData , add the direction as a string, like so:

const sortData = (sorting, direction) => {
  const sortingDirection = {
    asc: wixData.sort().ascending(sorting),
    desc: wixData.sort().descending(sorting),
  }
  $w('#dynamicDataset').setSort(sortingDirection[direction])
}

$w.onReady(() => {
  $w('#dropdown').onChange((e) => sortData($w('#dropdown').value), 'desc') // Like this
})
11

@bwprado THANK YOU! It is working!

12

@bwprado Simple solution Thank again Bruno!