I am implementing primeng multiselect with Angular5, javascript. when I am selecting option from the multiselect dropdown, I am getting all options getting selected.
<p-multiSelect [options]="options" appendTo="body" [maxSelectedLabels]="2" [defaultLabel]="defaultLabel"></p-multiSelect>
options: Array<any> = [
{ name: "Options1", label: "Options1", type: "string", selected: true, id: 1 },
{ name: "Options2", label: "Options2", type: "number", selected: false, id: 2 },
{ name: "Options3", label: "Options3", type: "boolean", selected: false, id: 3 },
{ name: "Options6", label: "Options6", type: "number", selected: false, id: 4 },
{ name: "Options7", label: "Options7", type: "ddn", selected: false, id: 5 },
{ name: "Options8", label: "Options8", type: "date", selected: false , id: 6}
];
When I am using 'value' in json, the functionality is working fine. But, this is a restriction.
'MultiSelect requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.'
This is written in Primeng documents for getting started with Multiselect
I tried 'datakey' also as per documentation, but still, I am not able to get the desired result.
I want to bind options with any other key other than 'value' and then on selecting an option, it should particular and only option.
Related
I am trying to integrate selectize in Datatable Editor, but get an empty value (for the field 'country'), if I click on edit.
I have a datatable defined as follows :
var table = $('#example').DataTable({
dom : "Bfrtip",//"Bfrtlip",
ajax : './DataChannelServlet?buster=' + new Date().getTime(),
lengthMenu : [ [ 10, 25, 50, -1 ], [ 10, 25, 50, "All" ] ],
select: {
style: 'multi',
selector: 'td:first-child'
},
order : [ [2, "asc"] ],
columns : [ {
data : null,
defaultContent : '',
className: 'select-checkbox',
orderable: false
},{
data : "Id",
defaultContent : ''
},{
data : "Name",
defaultContent : ''
}, {
data : "DisplayName",
defaultContent : ''
}, {
data : "country",
defaultContent : ''
}] ,
fixedHeader: true,
buttons: buttonArray
});
The country column has different values separated by ';'.
I have defined the datatables editor as follows:
editor = new $.fn.dataTable.Editor({
ajax: "./DataChannelServlet",
table: "#example",
legacyAjax: true,
idSrc: "rowID",
fields: [{
label: "Id",
name: "Id",
type: "readonly"
},
{
label: "Country",
name: "country",
type: "selectize",
options: getCountry(),
opts: {
placeholder: 'Enter a search',
delimiter: ';',
searchField: 'label',
valueField: 'value',
persist: true,
maxItems: null,
create: false
}
},{
label: "Name",
name: "Name",
type: "readonly"
},{
label: "Display Name",
name: "DisplayName",
type: "readonly"
},{
label: "Row ID",
name: "rowID",
}],
});
The getCountry() method provides the list of countries available to pick. If the country column has single country, then the editor displays the value in the edit screen. However, if the country column has multiple values for example UK;Belgium, the editor displays empty text box for country. How can I get the editor to display country value in the screen, the same way it allows me to select multiple country values separated by ';'?
I was passing the country value as a string. So, instead of passing it as string from the Object, I passed it as String Array and that worked for me.
So in my Java class, I had country declared as follows :
private String country; and I changed it to private String[] country.
HI I am using Material table to generate table view, here I defined the columns:
const columns: TableColumn[] = [
{
title: 'TYPE',
field: 'type_of_action',
highlight: true,
},
{
title: 'DESCRIPTION',
field: 'description',
},
{
title: 'REFERENCE ID',
field: 'reference_id'
},
{
title: 'ENVIRONMENT',
field: 'environment'
},
{
title: 'SEVERITY',
field: 'severity'
},
{
title: 'PRIORITY',
field: 'priority'
},
{
title: 'ACTION',
field: 'action',
render: (rowData) => (
console.log(rowData.priority). <---- error
),
}
];
I used render in the last columns. but I saw a error in my Intellij like:
TS2339: Property 'priority' does not exist on type '{}'.
actually my code works and I can see rowData.priority printed out in my console.
I now rowData here is type{} and cannot recognize priority
In order to resolve this, I need to define it inside the <MaterialTable> tag, otherwise fields cannot be recognized?
But putting so many lines of codes in the tag looks very dirty.Any ways to extract the column to a const variable while avoiding the type error?
One idea in my mind is to pass the columns variable in first, and manipulate using map, but I am not sure how to do this?
Try adding the type property to your columns definition when the type is different than string:
const columns: TableColumn[] = [
{
title: 'PRIORITY',
field: 'priority',
type: 'number'
}
]
Posible values are: 'boolean', 'numeric', 'date', 'datetime', 'time', 'currency'.
You can find more details in this PR.
I am making a meteor web app that uses some packages like simpleschema and collection 2 (both from aldeed). I have made a schema where I need one of the values to be automatically set to a variable previously set by user input. I know I can use autovalue to do this, but it will not work. Here is my code for the schema.
CreateLobbySchema = new SimpleSchema({
game: {
type: String,
label: "Game",
autoValue: function(){
return elementText
},
label: "Game"
},
console: {
type: String,
label: "Console"
},
players: {
type: Number,
label: "Players"
},
mic: {
type: Boolean,
label: "Mic"
},
note: {
type: String,
label: "Note"
},
gamertag: {
type: String,
label: "Gamertag"
}
});
As you can see the first field has an autovalue that sets it to a variable. Meteor wont actually do anything with this though, I'm not sure what I am doing wrong. Are you not allowed to set this to a variable? If so what might I do to fix this?
I already have a full-fledged form in javascript. All I need is a simple label Lol.
It is using prior code, but hopefully this snipet will help to see what's happening:
export default class NewEvent extends FormStep {
get inputs() {
return [{
name: 'department',
label: 'Department / Specific Ministry'
}, {
name: 'title'
}, {
name: 'description',
type: 'textarea'
}, {
name: 'checkboxApproved',
type: 'checkbox',
label: 'This copy is approved and is to be used as written.'
}, {
name: 'checkboxDetails',
type: 'checkbox',
label: 'These are the details! Please help me write a catchy description.'
}, {
name: 'location'
}, {
name: 'contactName',
label: 'Event Contact Name'
}, {
name: 'contactEmail',
label: 'Event Contact Email (required)'
}, {
name: 'contactPhone',
label: 'Event Contact Phone (optional)'
}, {
name: 'eventURL'
}, {
name: 'isNewHRock',
type: 'checkbox',
label: 'This event is a new event we\'ve never done at HRock.'
}, {
name: 'hasOccurred',
type: 'checkbox',
label: 'We\'ve had this event before, but it is not on a recurring schedule.'
}, {
name: 'needsRegistration',
type: 'checkbox',
label: 'We need to set up registration for this event.'
}, <EventPrice key = 'eventPrice' /> , <EventClassInfo key = 'eventClassInfo' /> , <EventDateTimeInfo key = 'eventDateTimeInfo' /> ]
}
}
Anyways, all these items show up as a form. AS they should. But I'd like to simply add a label in between the check boxes. I've created the following screenshot of what I'd like to add.
However, whenever I add text in there so far, it breaks the code, or it shows up in a textfield...
Help?
This is an object of "inputs". What ever function is parsing this object is creating all inputs with it, which is why you get a textbox. I don't think this is the correct place in the code to do this.
I want to have a list (select) without the default -none- option using w2ui forms.
How can I remove it so only the items I put in there?
When defining your fields in the form, add showNone: false
{ name: 'field', type: 'list', options: {
items: [{ id: 0, txt: 'Adams, John' }, { id: 1, text: 'Adams2, John' }],
showNone: false }
},
In a similar way you can remove - none - for regular fields. See http://w2ui.com/web/docs/form/fields for more information.