Question

我有2个Kendo网格（角度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;                    
                });
}

Answer 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)

Answer 2

如果其他人来寻找答案，请回答：您可以通过操作网格数据源数组来实现。使用数组Splice方法从Grid 1中的数组中提取行并生成新数组。将新生成的数组推送到Grid 2数据源。此外，我操作数组数据源时，我的网格没有刷新，所以我不得不从kendo网格中删除分页，它工作。

如何为Angular 4+选择多行KendoUI Grid并将其移动到另一个kendoUI Grid

2 个答案: