Dropdown List not displaying all items

Ask the community
,
1

Hi,

I have created a table using dataset (#dataset1). I am using dropdown boxes (product and #document) and all selections are working fine except when i select ‘ALL PRODUCTS’ or ‘ALL DOCUMENTS’. There are 62 items in total and when i select these dropdown options only the first 50 options appear.

https://katlee89.wixsite.com/wpaaus/downloads

import wixData from ‘wix-data’;
export function document_click(event) {
wixData.query(‘DOWNLOADS’)
.contains(‘documentType’, $w(‘#document’).value)
.ascending(‘sort’)
.find()
.then(res => {
$w(‘#results’).rows = res.items;
});
}
export function product_click(event) {
wixData.query(‘DOWNLOADS’)
.contains(‘documentName’, $w(‘product’).value)
.ascending(‘sort’)
.find()
.then(res => {
$w(‘#results’).rows = res.items;
});
}
export function searchByProduct_change(event) {
if ($w(‘#searchByProduct’).checked)
$w(‘#collapsingContainer’).expand();
else
$w(‘#collapsingContainer’).collapse();
}
export function searchByDocument_change(event) {
if ($w(‘#searchByDocument’).checked)
$w(‘#Documentcontainer’).expand();
else
$w(‘#Documentcontainer’).collapse();
}

2

If you read the Docs there is a limit set for 50 items if you dont set your own limit. So just add .limit(500) and your problem is solved

3

Hi,

I see you have a table connected to a dataset. But when you apply filters, you fetch the data manually (via wixData.query) and overwrite the table’s items. Andreas is right. You’re getting only 50 items because the default limit is 50.

But instead of increasing the limit and fetching the data manually I suggest you using setFilter method of the dataset:

import wixData from 'wix-data';

export function document_change() {
    $w('#dataset1').setFilter(
        wixData.filter().contains('documentType', $w('#document').value)
    );
}

export function product_change() {
    $w('#dataset1').setFilter(
        wixData.filter().contains('documentName', $w('#product').value)
    );
}

export function searchByProduct_change(event) {
	if ($w('#searchByProduct').checked) 
		$w('#collapsingContainer').expand();
	else	
		$w('#collapsingContainer').collapse();
}

export function searchByDocument_change(event) {
	if ($w('#searchByDocument').checked) 
		$w('#Documentcontainer').expand();
	else	
		$w('#Documentcontainer').collapse(); 
}

I modifed your example to apply a filter to the dataset. With this approach you won’t have the issue with the limit. Technically there’ll be the same limit, but it’ll be transparent: there’ll always be the correct number of pages and the extra data will be fetched automatically if needed when the user navigates to the next page.

I also changed the type of the event handlers from click to change.

Try it out and tell me if it helps.

4

Thanks for your help. Code provided did not 100% work…but made a slight adjustment with change/click and it is working now.

import wixData from ‘wix-data’;

export function document_click() {
$w(‘#dataset1’).setFilter(
wixData.filter().contains(‘documentType’, $w(‘#document’).value)
);
}

export function product_click() {
$w(‘#dataset1’).setFilter(
wixData.filter().contains(‘documentName’, $w(‘product’).value)
);
}

export function searchByProduct_change(event) {
if ($w(‘#searchByProduct’).checked)
$w(‘#collapsingContainer’).expand();
else
$w(‘#collapsingContainer’).collapse();
}

export function searchByDocument_change(event) {
if ($w(‘#searchByDocument’).checked)
$w(‘#Documentcontainer’).expand();
else
$w(‘#Documentcontainer’).collapse();
}

5

@katlee89 , you’re welcome!

Did you bind the change handlers to the dropdowns’ change events?

I had an issue with click event, but if it works for you, then fine.