Angular Kendo Grid

Question

I use Kendo UI for Angular. In the kendo grid I have a problem:

When I add a new record in the grid show 'valueField' instead textField. How can I change that and set editable mode when new record appears not when click?

myCode:

                <kendo-grid [data]="gridData" [loading]="loading" [navigable]="true"
                    (cellClick)="cellClickHandler($event)" (cellClose)="cellCloseHandler($event)" [height]="300"
                    (save)="addAddressRecord($event)" (remove)="removeAddressRecord($event)">
                    <kendo-grid-column field="isPrimary" editor="boolean" title="اصلی" width="50px">
                    </kendo-grid-column>
                    <kendo-grid-column field="title" title="عنوان"></kendo-grid-column>
                    <kendo-grid-column field="geographicalRegionId" title="منطقه جغرافیایی">
                        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
                            let-formGroup="formGroup">
                            <kendo-combobox (filterChange)="filterGeographicalRegion($event)" [filterable]="true"
                                [data]="geographicalRegionId" textField="title" valueField="id"
                                [valuePrimitive]="true" [formControl]="formGroup.get('geographicalRegionId')">
                            </kendo-combobox>
                        </ng-template>
                    </kendo-grid-column>
                    <kendo-grid-column field="addressString" title="آدرس">
                    </kendo-grid-column>
                    <kendo-grid-column field="postalCode" title="کد پستی">
                        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
                            let-formGroup="formGroup">

                            <input kendoTextBox [formControl]="formGroup.get('postalCode')"
                                (input)="($event)" />
                        </ng-template>
                    </kendo-grid-column>
                    <kendo-grid-column field="phone" title="تلفن">
                    </kendo-grid-column>
                    <kendo-grid-column field="fax" title="فاکس">
                    </kendo-grid-column>
                    <kendo-grid-column field="email" title="ایمیل">
                    </kendo-grid-column>
                    <kendo-grid-column width="50px">
                        <ng-template kendoGridCellTemplate let-isNew="isNew">
                            <button kendoGridRemoveCommand [icon]="'minus-outline'"></button>
                            <button kendoGridSaveCommand [icon]="'plus-outline'"></button>
                        </ng-template>
                    </kendo-grid-column>

                </kendo-grid>

Answer 1

plz try this

create a component for dropdown

in HTML

<div [formGroup]='formGroup'>
<button #anchor (click)="toggle()" class="k-button btn-dropdown">{{ selectedKeys }}</button>
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" class="popup" *ngIf="show">
    <kendo-treeview
        #tree
        class="dropdown-kendo-treeview"
        [nodes]="treeData | async"
        textField="name"
        kendoTreeViewExpandable
        kendoTreeViewSelectable
        kendoTreeViewHierarchyBinding
        [hasChildren]="hasChildren"
        [children]="fetchChildren"
        [selectBy]="'name'"
        [(selectedKeys)]="selectedKeys"
        (selectionChange)="handleSelection($event)"
    >
    </kendo-treeview>
    <div #dropdownIconDiv class="dropdown-icon-div">
        <button class="m-1 dropdown-icon" kendoButton title="دریافت اطلاع از تغییرات" (click)="refresh()">
            <i class="fas fa-redo"></i>
        </button>
        <button class="m-1 dropdown-icon" title="افزودن موقعیت جدید" (click)="newGeo()" kendoButton>
            <i class="fas fa-plus"></i>
        </button>

    </div>
</kendo-popup>
<input #input kendoTextBox hidden [formControl]="name"/>

In ts file

@Input() name: FormControl;
@Input() formGroup: FormGroup;
@Input() selectedKeys = ['انتخاب ...'];

@ViewChild('anchor', {static: false}) anchor: ElementRef;
@ViewChild('dropdownIconDiv', {static: false, read: ElementRef}) dropdownIconDiv: ElementRef;
@ViewChild('tree', {static: false, read: ElementRef}) tree: ElementRef;
@ViewChild('input', {static: false}) input: ElementRef;

treeData: Observable<any[]>;
show = false;

@HostListener('keydown', ['$event'])
keydown(event: any): void {
    if (event.keyCode === 27) {
        this.toggle(false);
    }
}

@HostListener('document:click', ['$event'])
documentClick(event: any): void {
    if (!this.contains(event.target)) {
        this.toggle(false);
    }
}

constructor(
    private geolocationService: GeolocationService,
    private notificationService: NotificationService,
    private tabService: TabService
) {
}

ngOnInit() {
    this.getParentGeo();
    this.getEditData();
}

getEditData(): void {
    if (this.name.value) {
        this.geolocationService.show(this.name.value).subscribe((response) => {
                this.selectedKeys = [response.name];
            },
            (error) => this.errorHandler(error));
    }
}

toggle(show?: boolean): void {
    this.show = show !== undefined ? show : !this.show;
}

contains(target: any): boolean {
    return this.anchor.nativeElement.contains(target) ||
        (this.tree ? this.tree.nativeElement.contains(target) : false) ||
        (this.dropdownIconDiv ? this.dropdownIconDiv.nativeElement.contains(target) : false);
}

handleSelection(e): void {
    this.name.setValue(e.dataItem.id);
    this.show = false;
}

newGeo() {
    this.tabService.open(new Tab('معرفی موقعیت جغرافیایی', GeolocationComponent));
}

refresh() {
    this.getParentGeo();
}

hasChildren() {
    return true;
}

getParentGeo() {
    this.treeData = this.geolocationService.SubLocations(0);
}

fetchChildren = (item: any) => {
    return this.geolocationService.SubLocations(item.id);
};

showAlert(text: string, type: any): void {
    this.notificationService.show({
        content: text,
        animation: {type: 'fade', duration: 400},
        position: {horizontal: 'center', vertical: 'top'},
        type: {style: type, icon: true},
        closable: false,
        hideAfter: 3000
    });
}

// {ErrorCode,Message}
errorHandler(error: any) {
    this.showAlert(error.error.Message, 'error');
}

in scss file

.btn-dropdown {
  width: 190px;
  justify-content: left;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #000 50%),
  linear-gradient(135deg, #000 50%, transparent 50%) !important;
  background-position: calc(10% - 0.78rem) 0.5rem, calc(10% - 0.5rem) 0.5rem;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.popup {
  width: 190px;
}

.dropdown-kendo-treeview {
  width: 190px !important;
  height: 200px !important;
}

.dropdown-icon-div {
  border-top: 1px solid #00000029;
  height: 50px;
  width: 100%;
  text-align: left;
}

.dropdown-icon {
  width: 30px;
  height: 30px;
  font-size: 16px;
  margin: 10px 5px !important;
}

and usage in grid kendo

   <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
                         let-formGroup="formGroup">
                <zino-geolocation-tree-dropdown [formGroup]="formGroup" [selectedKeys]="selectedKeys"
                                                [name]="formGroup.get('geographicalRegionId')"></zino-geolocation-tree-dropdown>
            </ng-template>