How can I change the language of Primefaces PrimeVue Datatable Buttons and filters?
These are standard fields of primeVue datatable:
Filter:
/**
* Filter option translation
*/
const matchModesOptions = [
{label: 'Gleich...', value: FilterMatchMode.EQUALS},
{label: 'Nicht gleich...', value: FilterMatchMode.NOT_EQUALS},
{label: 'Beginnt mit...', value: FilterMatchMode.STARTS_WITH},
{label: 'Endet mit...', value: FilterMatchMode.ENDS_WITH},
{label: 'Beinhaltet...', value: FilterMatchMode.CONTAINS}
]
There is an mistake at the documentation of primevue. This is how it works.
Related
I want to have a bold title in one row and second row normal style for Select options. I tried to use formatOptionalLabel but now displaying the second row.
For example here is my options,
const options = [ {label: "once", seconsLabel: "One time only", value: "0"}, {label: "Weekly", seconsLabel: "Once a week", value: "1"}];
I try to filter my list with 2 select lists based on the selected value. It seems like my computed filter is not working?
You should be able to filter the list on 'Price from' and 'Price to'
List.vue
My computed filter property:
filteredData() {
const LowerCaseSearch = this.search.toLowerCase();
return this.products.filter(
product =>
(product.name.toLowerCase().includes(LowerCaseSearch) ||
product.category.toLowerCase().includes(LowerCaseSearch)) &&
(!this.checked.length || this.checked.includes(product.category)) &&
(!this.selectedFrom.length || this.selectedFrom.includes(product.price)) &&
(!this.selectedTo.length || this.selectedTo.includes(product.price))
);
},
In my registered component I use v-model to bind to the computed property selectedFrom
<Price v-model="selectedFrom" />
How do I bind to the other property selectedTo in one v-model and what's wrong with my filter?
I also use a prefix 'From' and 'To' to put in front of the options.
data: () => {
return {
selectedFrom: '0,00',
priceFrom: [
{ prefix: 'From', text: '0,00', value: '0,00' },
{ prefix: 'From', text: '200,00', value: '200,00' },
{ prefix: 'From', text: '400,00', value: '400,00' }
],
selectedTo: 'No max',
priceTo: [
{ prefix: 'To', text: '400,00', value: '400,00' },
{ prefix: 'To', text: '600,00', value: '600,00' },
{ prefix: 'To', text: '800,00', value: '800,00' },
{ text: 'No max', value: 'No max' }
]
}
},
Is there a more elegant and D.R.Y way to do this?
Here is a sandbox what I have so far.
You should bind an object to your v-model on the <price> component.
This way you can pass multiple values to and from your component, without having to use multiple props.
I would also suggest you convert your value in your selects to numbers, so it's easier to use them to compare to your prices.
You've also defined data properties and computed properties in the sandbox (<price> component) with the same name, this is not possible. So you should remove the data properties and stick to the computed ones to handle your data.
Fork of your sandbox with my suggested changes.
How can I add custom filter options AND all the other data to a custom function?
Below is my code. I would like to have Yes and No filters, but also filters for all the other values in the column.
{column_number: creator_index,
filter_type: 'custom_func',
custom_func: Creator_Filter_Function,
data: [
{value: 'yes', label: 'Yes'},
{value: 'no', label: 'No'},
],
filter_default_label: "All"
},
You should use the append_data_to_table_data option for your filter
From docs:
append_data_to_table_data
Required: false
Type: string
Default value: undefined
Possible values: before / sorted
Description: Use 'before' to place your data array before the values that yadcf grabs from the table
use 'sorted' to place the data array sorted along with the values that yadcf grabs from the table
Note: 'sorted' option will have affect only if you data is an array of primitives (not objects)
So eventually your code will look like this
{
append_data_to_table_data: 'before',
column_number: creator_index,
filter_type: 'custom_func',
custom_func: Creator_Filter_Function,
data: [
{value: 'yes', label: 'Yes'},
{value: 'no', label: 'No'},
],
filter_default_label: "All"
},
I'm trying to use a partial to share a _form.html across an new.html and edit.html templates in ExpressJS. The problem is with the select tag.
How do you get a select HTML element to have the correct option selected in an edit form? If you use
<select value="#{blob.kind || ''}">
The select doesn't show the option whose value is equal to the blob.kind.
In order to specify a selected option, a selected attribute needs to be added to the option element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Assuming the blob.kind property is a value string, you could write the Jade for your select and option elements as follows:
-
var options = [
{value: 'option1', text: 'Option 1'},
{value: 'option2', text: 'Option 2'},
{value: 'option3', text: 'Option 3'},
{value: 'option4', text: 'Option 4'}
];
select
each obj in options
if (blob.kind === obj.value)
option(value= obj.value, selected)= obj.text
else
option(value= obj.value)= obj.text
For future reference, Jade has been renamed to Pug.
I used to do this as follows:
select
each obj in options
option(value= obj.value, selected=blob.kind === obj.value ? true : false)=
obj.text
Sean's suggestion is excellent, but his syntax didn't quite work for me. Here's what I ended up with:
- const stateOptions = [{value:'AL', text:'Alabama'}, ...]
select#state(name='state' required)
each option in stateOptions
if (option.value === meeting.state)
option(value=(option.value) selected) #{option.text}
else
option(value=(option.value)) #{option.text}
I have tried the following from various examples and none of them work:
folderCombo.store.add({text: 'All', value: 'ALL'});
folderCombo.getStore.add({text: 'All', value: 'ALL'});
folderCombo.getStore().add(new grid.store.recordType({text: 'All', value: 'ALL'}));
folderCombo.store().add(new grid.store.recordType({text: 'All', value: 'ALL'}));
folderCombo.getStore().add(folderCombo.getStore().recordType({text: 'All', value: 'ALL'}));
Where folderCombo is my combobox. If I console.log folderCombo.store it shows the current store but never the store with the extra data item I try to add above.
Please advise.
Try:
folderCombo.getStore().add({text: 'All', value: 'ALL'});
or:
folderCombo.getStore().loadData({text: 'All', value: 'ALL'},true);