Open Closed

How to put 2 columns and search for them in a pick #1604

samuelhelou created

How to put 2 columns and search for them in a pick?

Hi guys, I have a little problem, how to put 2 columns and search for them in a pick, where could I make this change, in the back, front? html, proxy, controller? Can you give me an example

Check the docs before asking a question: Check the samples, to see the basic tasks: The exact solution to your question may have been answered before, please use the search on the homepage.

If you're creating a bug/problem report, please include followings:

  • ABP Framework version: v4.3.3
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

1 Answer(s)
  • 0
    Mehmet created
    Support Team

    Hi @samuelhelou

    Unfortunately, ABP lookup table component do not support displaying extra columns.

    However, you can achieve this;

    First way: You can handle this situation in backend side. So you can manipulate displayName prop like this: {displayName: "Code: HZON, Name: XXX" } With this way, you can display more than one information in one table column.

    Second way: You should create your lookup component and use it instead of the abp-lookup-input component. You can follow the steps below to do this:

    • Create a new component with the following command:

    yarn ng generate component shared/lookup-input --export

    • Import SharedModule to your module which is generated from ABP Suite.

    • Open created lookup-input.component.ts file and replace its content with below code:

    import { ABP, AbstractNgModelComponent, ListService } from '@abp/ng.core';
    import { AfterViewInit, Component, Injector, Input } from '@angular/core';
    import { NgControl } from '@angular/forms';
    import { Observable } from 'rxjs';
      selector: 'app-lookup-input',
      templateUrl: 'lookup-input.component.html',
      providers: [ListService],
    export class LookupInputComponent
      extends AbstractNgModelComponent<string>
      implements AfterViewInit
      @Input() getFn: (params: ABP.PageQueryParams) => Observable<ABP.PagedResponse<any>>;
      @Input() lookupNameProp = 'displayName';
      @Input() displayNameProp = 'name';
      @Input() editingData: any;
      @Input() pickButton = { show: true, disabled: false };
      @Input() clearButton = { show: true, disabled: false };
      @Input() cid?: string;
      selectedName = '';
      isModalVisible: boolean;
      data = {
        items: [],
        totalCount: 0,
      pageQuery: ABP.PageQueryParams = { maxResultCount: 10, skipCount: 0, filter: '' };
      private ngControl: NgControl;
      public readonly list: ListService;
      get isInvalid() {
        return this.ngControl.dirty && this.ngControl.invalid;
      constructor(injector: Injector) {
        this.list = injector.get(ListService);
        this.ngControl = injector.get(NgControl);
        this.ngControl.valueAccessor = this;
      ngAfterViewInit() {
        if (this.value && this.editingData && this.editingData[this.displayNameProp]) {
          this.selectedName = this.editingData[this.displayNameProp];
        const getData = (query: ABP.PageQueryParams) =>
        const setData = list => ( = list);
      pick(data: any) {
        this.value =;
        this.selectedName = data[this.lookupNameProp];
        this.isModalVisible = false;
      onClickPick() {
        this.isModalVisible = true;
      onClickClear() {
        this.value = '';
        this.selectedName = '';
      writeValue(value: string): void {
        if (!value) this.selectedName = '';
    • Open created lookup-input.component.html file and replace its content with below code:
    <div class="input-group">
      <div class="input-group-append">
          class="btn btn-info"
          {{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}
          class="btn btn-danger"
          <i class="fa fa-times"></i>
    <abp-modal [(visible)]="isModalVisible">
      <ng-template #abpHeader>
        <h3>{{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}</h3>
      <ng-template #abpBody>
        <div class="card">
          <div class="card-body">
            <div id="data-tables-table-filter" class="data-tables-filter">
                  [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
              <ngx-datatable-column [maxWidth]="150" [width]="150" [sortable]="false">
                <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
                  <button class="btn btn-primary btn-sm" type="button" (click)="pick(row)">
                    {{ '::Pick' | abpLocalization }}
              <ngx-datatable-column [sortable]="false">
                <ng-template let-row="row" ngx-datatable-cell-template>
                  {{ row[lookupNameProp] }}
              <!-- you can add new column here -->
      <ng-template #abpFooter>
        <button type="button" class="btn btn-secondary" abpClose (click)="isModalVisible = false">
          {{ 'AbpUi::Cancel' | abpLocalization }}
    • Use the new app-lookup-input component instead of the abp-lookup-input component.