Open Closed

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


0
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: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index 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';
    
    @Component({
      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) {
        super(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) =>
          this.getFn({
            ...query,
            ...this.pageQuery,
          });
    
        const setData = list => (this.data = list);
    
        this.list.hookToQuery(getData).subscribe(setData);
      }
    
      pick(data: any) {
        this.value = data.id;
        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 = '';
        super.writeValue(value);
      }
    }
    
    • Open created lookup-input.component.html file and replace its content with below code:
    <div class="input-group">
      <input
        [id]="cid"
        type="text"
        class="form-control"
        disabled
        [ngModel]="selectedName"
        [class.input-validation-error]="isInvalid"
      />
      <div class="input-group-append">
        <button
          *ngIf="pickButton.show"
          [disabled]="pickButton.disabled"
          class="btn btn-info"
          type="button"
          (click)="onClickPick()"
        >
          {{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}
        </button>
        <button
          *ngIf="clearButton.show"
          [disabled]="clearButton.disabled"
          class="btn btn-danger"
          type="button"
          (click)="onClickClear()"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>
    
    <abp-modal [(visible)]="isModalVisible">
      <ng-template #abpHeader>
        <h3>{{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}</h3>
      </ng-template>
    
      <ng-template #abpBody>
        <div class="card">
          <div class="card-body">
            <div id="data-tables-table-filter" class="data-tables-filter">
              <label
                ><input
                  type="search"
                  class="form-control"
                  [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
                  [(ngModel)]="pageQuery.filter"
                  (input.debounce)="list.get()"
              /></label>
            </div>
            <ngx-datatable
              [rows]="data.items"
              [count]="data.totalCount"
              [list]="list"
              default
              [headerHeight]="0"
            >
              <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 }}
                  </button>
                </ng-template>
              </ngx-datatable-column>
    
              <ngx-datatable-column [sortable]="false">
                <ng-template let-row="row" ngx-datatable-cell-template>
                  {{ row[lookupNameProp] }}
                </ng-template>
              </ngx-datatable-column>
    
              <!-- you can add new column here -->
            </ngx-datatable>
          </div>
        </div>
      </ng-template>
    
      <ng-template #abpFooter>
        <button type="button" class="btn btn-secondary" abpClose (click)="isModalVisible = false">
          {{ 'AbpUi::Cancel' | abpLocalization }}
        </button>
      </ng-template>
    </abp-modal>
    
    • Use the new app-lookup-input component instead of the abp-lookup-input component.