如何为 Angular 4+ 选择多行 Kendo UI Grid 并将其移动到另一个 kendo UI Grid答案

【问题标题】：How to select multiple rows of KendoUI Grid for Angular 4+ and move it to another kendoUI Grid如何为 Angular 4+ 选择多行 Kendo UI Grid 并将其移动到另一个 kendo UI Grid
【发布时间】：2017-07-28 16:46:36
【问题描述】：

我有 2 个 Kendo Grids（角度 4+ 组件），其中数据来自 Rest API。我必须选择数据行并将其从第一个网格移动到另一个网格。例如，我像这样绑定网格：

<div>
            <kendo-grid [height]="450"
                        [kendoGridBinding]="viewAvailableJobs"
                        [scrollable]="scrollable"
                        [selectable]="true"                           
                        (selectionChange)="gridUserSelectionChange($event)">
              <kendo-grid-column field="Select" width="30" [locked]="true" [filterable]="false">
                <ng-template kendoGridHeaderTemplate>
                  <input type="checkbox" [checked]="false" />
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
                  <input type="checkbox" id="Select {{dataItem.JobNumber}}" value="Selected" name="cSelection-{{dataItem.JobNumber}}"
                         [checked]="Selected"
                         (change)="onCheckboxChange($event, dataItem, 'select')"
                         (clicked)="setButtonStateS()" />
                </ng-template>
              </kendo-grid-column>

              <kendo-grid-column field="JobNumber" title="Job #" [width]="150" [locked]="true">
              </kendo-grid-column>
              <kendo-grid-column field="jobName" title="Job Name" [width]="320" [locked]="true">
              </kendo-grid-column>
              <kendo-grid-column field="jobStatusUID" title="Job Status" [width]="150" [locked]="true">
              </kendo-grid-column>             
              <kendo-grid-column field="ProjectNumber" title="Project" [width]="150">
              </kendo-grid-column>
              <kendo-grid-column field="scheduleNumber" title="Schedule" [width]="150">
              </kendo-grid-column>
              <kendo-grid-column field="oeName" title="POE" [width]="220">
              </kendo-grid-column>
            
            </kendo-grid>
</div>

另一个网格 2 也有一些数据，我必须添加或附加数据（如果已经有一些现有数据）到网格数据源。我通过服务绑定，像这样休息api：

constructor(private JobService: DataService){}
public ngOnInit(): void { 
     this.JobService.getAvailableJobs(this.projectstr, this.programstr).subscribe(req => {
                    this.viewAvailableJobs = req;
                    this.totalAvailableJobs = req.length;                    
                });
}

【问题讨论】：

标签： angular kendo-grid

【解决方案1】：

回答StepUp：

public selectedrowsArray = new Array;
private Selection = [{ label: 'Selected', state: false }];
onCheckboxChange(e, dataItem, type, rindex1) {

    if (e.target.checked) {
            this.selectedrowsArray .push(dataItem);
    }
    else if (e.target.checked == false) {
   this.selectedrowsArray .splice(this.selectedrowsArray.indexOf(dataItem), 1);

    }

在您的 kendoGrid 中应该有一个复选框更改事件像这样：

(change)="onCheckboxChangeEvent($event, dataItem,rowIndex)

【讨论】：

【解决方案2】：

如果其他人来寻找答案，只需回答：您可以通过操作网格数据源数组来做到这一点。使用数组拼接方法从网格 1 中的数组中提取行并生成一个新数组。将新生成的数组推送到 Grid 2 数据源。此外，当我操作数组数据源时，我的网格并没有刷新，所以我不得不从剑道网格中删除分页并且它起作用了。

【讨论】：

如何获取选定的行以将它们拼接到新数组中？
@StepUp 在帖子中回复了你希望对你有帮助。