ASP.NET Zero Support

4 years ago Question

Hi support

Cannot show p-autocomplete in [hidden].

I'm use: -angular 7 -asp.net core

this code:

<label><div class="row mb-4" [hidden]="!CustomerSettingAreShown"></label> <div class="form-group col-md-6"> <label for="CustomerSaleCode">{{"CustomerSaleCode" | localize}}</label> <p-autoComplete id="SingleSelectSaleCodeInput" name="SingleSelectSaleCodeInput" field="name" [(ngModel)]="chartOfAccountSaleCode" [suggestions]="filteredChartOfAccountSaleCode" (completeMethod)="filterChartOfAccountSaleCode($event)" (onSelect)="onSelectedChartOfAccountsSaleCode($event)" [minLength]="1" inputStyleClass="form-control" styleClass="width-percent-100"> <ng-template let-chartOfAccount pTemplate="item"> {{chartOfAccount.name}} </ng-template> </p-autoComplete> </div> </div>

[hidden] with p-autocomplete #7811

4 years ago Question

Hi support

Cannot show p-autocomplete in [hidden].

I'm use: -angular 7 -asp.net core

this code:

<label>{{"CustomerSaleCode" | localize}}</label>{{chartOfAccount.name}}

p-autocomplete #7781

4 years ago Answer

Many thanks support teams @demirmusa

p-autocomplete #7726

4 years ago Answer

.ts file:

import { Component, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { TaxesServiceProxy, TaxEditDto, ChartOfAccountServiceProxy, NameValueOfString } from '@shared/service-proxies/service-proxies';
import * as _ from 'lodash';
import { SelectItem } from "primeng/components/common/selectitem";
import { FormGroup, FormControl } from '@angular/forms';

@Component({
    selector: 'editTaxModal',
    templateUrl: './edit-tax-modal.component.html'
})

export class EditTaxModalComponent extends AppComponentBase {
    @ViewChild('editModal', { static: true }) modal: ModalDirective;
    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
    
    active = false;
    saving = false;
    tax: TaxEditDto = new TaxEditDto();
    FilterText = "";
    filteredChartOfAccount: NameValueOfString[];
    chartOfAccount: any;
    tmpGroup = new FormGroup({ user: new FormControl() });

    constructor(injector: Injector
        , private _taxesServiceProxy: TaxesServiceProxy
        , private _chartOfAccountServiceProxy: ChartOfAccountServiceProxy) { super(injector); }

    show(taxId?: number): void {
        this.active = true;
        this._taxesServiceProxy.getTaxForEdit(taxId).subscribe(taxResult => {
            /*this.filterChartOfAccounts()*/
            this.tax = taxResult;
            this.modal.show();
        });
    }
    // get ChartOfAccount
    filterChartOfAccounts(): void {
        this._chartOfAccountServiceProxy.getChartOfAccountSelectItems(this.FilterText).subscribe(chartOfAccountResult => {
            this.filteredChartOfAccount = chartOfAccountResult;
        });
    }
    // get ChartOfAccount
    filterChartOfAccount(event): void {
        this._chartOfAccountServiceProxy.getChartOfAccountSelectItems(event.query).subscribe(chartOfAccountResult => {
            this.filteredChartOfAccount = chartOfAccountResult;
        });
    }
    handleSelect(user) {
        debugger;
        this.tmpGroup.controls.SingleSelectInput.setValue('Bank');
    }
    // single select - post
    onSelectedChartOfAccounts(): void {
        let selectedChartOfAccounts = new Array<NameValueOfString>();
        selectedChartOfAccounts.push(this.chartOfAccount);
        this._chartOfAccountServiceProxy.sendAndGetSelectedChartOfAccounts(selectedChartOfAccounts)
            .subscribe((ChartAccount: NameValueOfString[]) => {              
                _.forEach(ChartAccount, item => {
                    this.tax.vatOutChartOfAccountId = parseInt(item.value);
                });
            });
    }
    /*focus first field*/
    onShown(): void {
        document.getElementById('TaxName').focus();
    }
    /*close form*/
    close(): void {
        this.active = false;
        this.modal.hide();
    }

    save(): void {
        this.saving = true;
        this._taxesServiceProxy.updateTaxes(this.tax)
            .pipe(finalize(() => this.saving = false))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
            });
    }
}

.html file:

<div bsModal #editModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <form *ngIf="active" #taxForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="new-password"> <div class="modal-header"> <h4 class="modal-title"> {{"EditTaxes" | localize}} </h4> <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving"> × </button> </div> <div class="modal-body"> <div class="row"> <div class="form-group col-sm-6"> <label for="TaxName">{{"TaxName" | localize}} *</label> <input id="TaxName" #taxNameInput="ngModel" class="form-control" type="text" name="TaxName" [(ngModel)]="tax.name" required> <validation-messages [formCtrl]="taxNameInput"></validation-messages> </div> <div class="form-group col-sm-6"> <label for="TaxValue">{{"TaxValue" | localize}} *</label> <input id="TaxValue" #taxValueInput="ngModel" class="form-control" type="number" name="TaxValue" [(ngModel)]="tax.value" required> <validation-messages [formCtrl]="taxValueInput"></validation-messages> </div> <div class="form-group col-sm-6"> <label for="ChartOfAccountParentInput">{{"TaxAccount" | localize}}</label>
<p-autoComplete id="SingleSelectInput" name="SingleSelectInput" field="name" [(ngModel)]="chartOfAccount" [suggestions]="filteredChartOfAccount" (completeMethod)="filterChartOfAccount($event)" [minLength]="1" inputStyleClass="form-control" styleClass="width-percent-100"> <ng-template let-chartOfAccount pTemplate="item"> {{chartOfAccount.name}} </ng-template> </p-autoComplete> </div> <div class="form-group col-sm-6"> <label for="TaxDescription">{{"TaxDescription" | localize}}</label> <input id="TaxDescription" #taxDescriptionInput="ngModel" class="form-control" type="text" name="TaxDescription" [(ngModel)]="tax.description"> </div> <div class="form-group col-sm-6"> <div class="kt-checkbox-list"> <label for="TaxIsActive" class="kt-checkbox"> <input id="TaxIsActive" type="checkbox" name="TaxIsActive" [(ngModel)]="tax.isActive"> {{"TaxIsActive" | localize}} </label> </div> </div> </div> <div class="modal-footer"> <button [disabled]="saving" type="button" class="btn btn-secondary" (click)="close()">{{"Cancel" | localize}}</button> <button type="submit" class="btn btn-primary" [disabled]="!taxForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"> {{"Save" | localize}}</button> </div> </div> </form> </div> </div> </div>

p-autocomplete #7781

4 years ago Question

Hi Support how to assign value and display text in p-autocomplete when edit second form. Cannot display text in p-autocomplete when edit second form.

I'm use: -angular 7 -asp.net core

Source code:

filteredChartOfAccount: NameValueOfString[];
chartOfAccount: any;

html:

<p-autoComplete
        id="SingleSelectInput"
        name="SingleSelectInput"
        field="name"
        [(ngModel)]="chartOfAccount" 
        [suggestions]="filteredChartOfAccount" 
        (completeMethod)="filterChartOfAccount($event)"
        [minLength]="1"
        inputStyleClass="form-control"
        styleClass="width-percent-100">
        <ng-template let-chartOfAccount pTemplate="item">
            {{chartOfAccount.name}}
        </ng-template>
    </p-autoComplete>

.ts:

// get filter
filterChartOfAccount(event): void {
    this._chartOfAccountServiceProxy.getChartOfAccountSelectItems(event.query)
    .subscribe(chartOfAccountResult => {
        this.filteredChartOfAccount = chartOfAccountResult;
    });
}

// single select - post
onSelectedChartOfAccounts(): void {
    let selectedChartOfAccounts = new Array<NameValueOfString>();
    selectedChartOfAccounts.push(this.chartOfAccount);
    this._chartOfAccountServiceProxy.sendAndGetSelectedChartOfAccounts(selectedChartOfAccounts)
        .subscribe((ChartAccount: NameValueOfString[]) => {              
            _.forEach(ChartAccount, item => {
                this.tax.vatOutChartOfAccountId = parseInt(item.value);
            });
        });
}

p-autocomplete #7726

4 years ago Answer

I used like this but not work. Can you show your solutions for me?

<div class="form-group col-sm-6"> <label for="ChartOfAccountParentInput">{{"TaxAccount" | localize}}</label> <p-autoComplete [(ngModel)]="chartOfAccount" id="SingleSelectInput" [suggestions]="filteredChartOfAccount" (completeMethod)="filterChartOfAccount($event)" (onSelect)="onSelectedChartOfAccounts($event)"
field="name" [minLength]="3" inputStyleClass="form-control" styleClass="width-percent-100"> <ng-template let-chartOfAccount pTemplate="item"> {{chartOfAccount.name}} </ng-template> <ng-template let-chartOfAccount pTemplate="selectedItem"> {{chartOfAccount.name}} </ng-template> </p-autoComplete> </div>

p-autocomplete #7726

4 years ago Question

Hi Support

how to assign value and display text when edit form.

I'm use: -angular 7 -asp.net core

Combo box editable and filter #7641

4 years ago Question

Hi Support team I want to make combo box editable and filter. Can you show your solutions. I'm use Angular version 7 and .net core.