CODEWITHSUNDEEP
angulartypescript
JED
JED

Reputation: 1694

angular/typescript: ng-multiselect-dropdown mutliple properties in textField

I am using the ng-multiselect-dropdown package. I have successfully pulled my data into the dropdown, but I want to be able use multiple properties in the textField of the dropdown.

If I do 

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'nameFirst',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

I get this result:

dropdownWithFirstName


I want to do something like this (nameFirst and nameLast in text field:

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'nameFirst' + ' ' + 'nameLast',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

When I do that, I get this:

dropdownWithBadResult

How can I go about combining the nameFirst and nameLast properties (with a space in between)? Do I need to add another property to my user object? Can I do that on the fly or do I need to edit my model?

Upvotes: 2

Views: 4861

Answers (1)

JED
JED

Reputation: 1694

I was able to work around this issue by adding a NameFull calculated property to my UserForDetailedDto on the backend, accounting for the additional propety in my front-end model, and then using that for the text-field value.


Models\UserForDetailedDto.cs

public class UserForDetailedDto
{
    public int Id { get; set; }

    public string Username { get; set; }

    public string NameFirst { get; set; }

    public string NameLast { get; set; }

    public string NameFull => NameFirst + " " + NameLast;

    ...
}


ClientApp\src\app_models\User.ts

export interface User {
  id?: number;
  username?: string;
  nameFirst?: string;
  nameLast?: string;
  nameFull?: string;
}


The dropdown settings

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'nameFull',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 5,
  allowSearchFilter: true
};

Upvotes: 1

Related Questions