typescript 删除一行后重新加载Kendo UI的数据表

Posted 2021-05-20

<div class="tozaotContainer">

    <div class="col-right"  >
        <div class="contentForStepOne" [ngClass]="{'hideColRight': step >0}">
            <div class="grid__header">
                <h2>תלמידים שנמצאו</h2>
                <button class="reset-fields clear-button add-button">הוסף הכל</button>
            </div>
            <kendo-grid  [kendoGridBinding]="studentsForShiyuhUhlisiya" #grid [pageSize]="pageSize" [skip]="skip" *ngIf="studentsForShiyuhUhlisiya;else noData"
                        [pageable]="{ buttonCount: buttonCount,
                            info: info,
                            type: type,
                            pageSizes: pageSizes,
                            previousNext: previousNext }" (pageChange)="onPageChangeTree($event)" [selectable]="true"
                        [sort]="sort" [sortable]="{ allowUnsort: allowUnsort,
                            mode: multiple ? 'multiple' : 'single'
                            }" class="auchlusiya-grid">
                <kendo-grid-column field="id" title="תעודת זהות">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <a href="#">{{dataItem.id}}</a>
                    </ng-template>
                </kendo-grid-column>
                <kendo-grid-column field="studentName" title="שם תלמיד"></kendo-grid-column>
                <kendo-grid-column field="mosad" title="מוסד"></kendo-grid-column>
                <kendo-grid-column field="motherClass" title="שכבה" width="150">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <div class="add"><span class="motherClass">{{dataItem.motherClass}}</span>
                            <button kendoButton [icon]="'plus'" class="close_btn"
                                    (click)="onAdd(dataItem)" ></button>
                        </div>
                    </ng-template>
                </kendo-grid-column>
            </kendo-grid>
    </div>
        <div class="contentForStepTwo" [ngClass]="{'hideContent':step<1}">
            <app-tozaot-col-right-step-two [selectedStudentsForShiuhLeUhlusia]="studentForUhlusiyaToPut"></app-tozaot-col-right-step-two>
        </div>
    </div>

    <ng-template #noData>
        <div class="noData__container">
            <span class="noData__text">לא נמצא תלמיד בשם "יונתן שמואלי" במצבת תלמידים</span>
            <button type="submit" class="submit-search reg-btn blue-btn" (click)="onAddManually()">הוספת התלמיד ידנית</button>
        </div>
    </ng-template>

    <div class="col-left" >
        <div class="contentForStepOne" [ngClass]="{'hideColLeft': step>0}">
            <div class="grid__header">
                <h2>תלמידים לשיוך</h2>
                <div class="addById">
                    <label for="id" class="grid__header-label">הוספה מהירה :</label>
                    <input type="text" id="id" kendoTextBox placeholder="תעודת זהות">
                    <button type="submit" class="submit-search reg-btn blue-btn" (click)="onAddManual()">הוספה</button>
                </div>
                <button class="reset-fields clear-button add-button" *ngIf="studentForUhlusiyaToPut.length>0">הסר הכל
                </button>
            </div>
            <app-add-student-manual-dialog *ngIf="showDialog" (closeDialogEmitter)="onCloseDialog($event)"  [mahzorSiyumSelect]="mahzorSiyumSelect"></app-add-student-manual-dialog>

            <div class="grid" [ngClass]="{'hideLeftGrid':studentForUhlusiyaToPut.length === 0}">
                <kendo-grid [kendoGridBinding]="studentForUhlusiyaToPut" #gridLeft [pageSize]="pageSize" [skip]="skip"
                            [pageable]="{ buttonCount: buttonCount,
                            info: info,
                            type: type,
                            pageSizes: pageSizes,
                            previousNext: previousNext }" (pageChange)="onPageChange($event)" [selectable]="true"
                          [sort]="sort" [sortable]="{ allowUnsort: allowUnsort,
                            mode: multiple ? 'multiple' : 'single'
                            }" class="auchlusiya-grid">
                    <kendo-grid-column field="id" title="תעודת זהות">
                        <ng-template kendoGridCellTemplate let-dataItem>
                            <a href="#">{{dataItem.id}}</a>
                        </ng-template>
                    </kendo-grid-column>
                    <kendo-grid-column field="studentName" title="שם תלמיד">

                        <ng-template kendoGridCellTemplate let-dataItem>
                            <span>{{dataItem.studentName}}</span>
                            <ng-template #template let-anchor >
                                <div  class="prof">
                                    {{'התלמיד שויך לאוכלוסיה ידנית\n' +
                                'ואינו קיים במצבת תלמידים'}}
                                </div>
                            </ng-template>
                            <span kendoTooltip [tooltipTemplate]="template" class="prof_tooltipIcon" style="padding-top: 10px;">
                 <a title="Tooltip" href="#" *ngIf="dataItem.alert"><span class="icon-font icon-attention"  ></span></a>
                </span>
                        </ng-template>
                    </kendo-grid-column>
                    <kendo-grid-column field="mosad" title="מוסד"></kendo-grid-column>
                    <kendo-grid-column field="motherClass" title="שכבה" width="150" [columnMenu]="false">
                        <ng-template kendoGridCellTemplate let-dataItem>
                            <div class="add"><span class="motherClass">{{dataItem?.motherClass}}</span>
                                <button kendoButton [icon]="'close'" class="close_btn"
                                        (click)="onRemove(dataItem)"></button>
                            </div>
                        </ng-template>
                    </kendo-grid-column>
                </kendo-grid>
            </div>
        </div>
        <div class="contentForStepTwo" [ngClass]="{'hideContent': step<1}">
            <app-tozaot-col-left-step-two (rowSelected)="onSelectRowColLeft($event)"></app-tozaot-col-left-step-two>
        </div>
                <div class="noDataGrid"  [ngClass]="{'hideNoDataImg':studentForUhlusiyaToPut.length > 0}">
                <img src="../../../../../../assets/images/icons/Kids.svg" alt="" class="noData_img">
                <span>טרם נבחרו תלמידים לאוכלוסיה</span>
                </div>
    </div>

</div>

import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
import {SortDescriptor} from "@progress/kendo-data-query";
import {DataBindingDirective, GridComponent, GridDataResult, PageChangeEvent} from "@progress/kendo-angular-grid";
import {studentsForShiuhLeUhlusiya} from "../../../../../../assets/mock-data/shiyuh-le-uhlusiya-mock";
import {IStudentsForShiyuhLeUhlusiya} from "../../../Models/interfaces";

@Component({
    selector: "app-shiyuh-le-uhlusiya-tozaot",
    templateUrl: "./shiyuh-le-uhlusiya-tozaot.component.html",
    styleUrls: ["./shiyuh-le-uhlusiya-tozaot.component.scss"]
})
export class ShiyuhLeUhlusiyaTozaotComponent implements OnInit {
    studentsForShiyuhUhlisiya: Array<IStudentsForShiyuhLeUhlusiya>;
    @Input() step: number;
    @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
    @ViewChild("grid") grid: GridDataResult;
    @ViewChild("gridLeft") gridLeft: GridComponent;
    @ViewChild("table") tableRight: ElementRef;
    @Output() emitStudentsData: EventEmitter<any[]> = new EventEmitter<any[]>();
    @Output() emitSelectedRow: EventEmitter<any> = new EventEmitter<any>();
    studentForUhlusiyaToPut: Array<IStudentsForShiyuhLeUhlusiya> = [];
    pageSize = 10;
    skip = 0;
    pageSizes = true;
    showDialog: boolean = false;
    sort: SortDescriptor[] = [];
    mosadSelect: Array<string> = ["מוסד-1", "מוסד-2", "מוסד-3"];
    mahzorSiyumSelect: Array<string> = ["מחזור-1", "מחזור-2", "מחזור-3"];

    constructor() {


    }

    ngOnInit() {
        this.studentsForShiyuhUhlisiya = studentsForShiuhLeUhlusiya as IStudentsForShiyuhLeUhlusiya[];
    }


    onPageChange(event: PageChangeEvent): void {
        this.pageSize = event.take;
        this.skip = event.skip;

    }

    onPageChangeTree(event: PageChangeEvent) {
        this.pageSize = event.take;
        this.skip = event.skip;
    }

    onAdd(row) {
        this.studentsForShiyuhUhlisiya.splice(this.studentsForShiyuhUhlisiya.indexOf(row), 1);
        this.grid.data = this.studentsForShiyuhUhlisiya;
        this.dataBinding.rebind();
        this.studentForUhlusiyaToPut.push(row);
        this.gridLeft.data = this.studentForUhlusiyaToPut;
        this.emitStudentsData.emit(this.studentForUhlusiyaToPut);
    }

    onRemove(row) {
        this.studentForUhlusiyaToPut.splice(this.studentForUhlusiyaToPut.indexOf(row), 1);
        this.ngOnInit();
        this.gridLeft.data = this.studentForUhlusiyaToPut;
        this.studentsForShiyuhUhlisiya.unshift(row);
        this.dataBinding.rebind();
        this.emitStudentsData.emit(this.studentForUhlusiyaToPut);
    }

    onSelectRowColLeft(row) {
        this.emitSelectedRow.emit(row);
    }

    onAddManual() {
        this.showDialog = true;
    }

    onCloseDialog(event) {
        this.showDialog = event;
    }

}