RadDataForm Multiple select in nativescript-vue

Question

I have this TKEntityProperty:

    <TKEntityProperty v-tkDataFormProperty name="groups" displayName="Groups" index="2" :valuesProvider="retrieveGroups">

and this gets values from below object:

retrieveGroups:[
   {key: "1", "label": "Group 1"},
   {key: "2", "label": "Group 2"},
   {key: "3", "label": "Group 3"} 
]

but it does not multi select. I want to select multiple elements. Is there another type of editor available ?

"List" editor doesn't support picking multiple items. Use AutoCompleteInline or you will have to introduce a custom editor of your own. — Manoj

Narendra Narendra · Accepted Answer · 2019-06-07T04:59:52

As @Manoj suggested, you should use AutoCompleteInline Here is an example, it is available at Nativescript github page

data() {
  return {
    title: description,
    booking: new Booking(),
    bookingMetadata: {
      'isReadOnly': false,
      'commitMode': DataFormCommitMode.Immediate,
      'validationMode': DataFormValidationMode.Immediate,
      'propertyAnnotations': [{
          'name': 'from',
          'displayName': 'From:',
          'index': 0,
          'editor': DataFormEditorType.AutoCompleteInline,
          'editorParams': {
            'autoCompleteDisplayMode': AutoCompleteDisplayMode.Tokens
          },
          'valuesProvider': fromProviders,
        },
        {
          'name': 'to',
          'displayName': 'To:',
          'index': 1,
          'editor': DataFormEditorType.AutoCompleteInline,
          'editorParams': {
            'autoCompleteDisplayMode': AutoCompleteDisplayMode.Plain
          },
          'valuesProvider': ['New York', 'Washington', 'Los Angeles'],
        },
      ]
    }
  };
},

RadDataForm Multiple select in nativescript-vue

1 Answers