如何選擇多行KendoUI Grid for Angular 4+並將其移至另一個kendoUI Grid

我有2個Kendo Grids（角度4+組件），其中的數據來自Rest API。我必須選擇並將數據行從第一個網格移動到另一個網格。比如我是bindind電網這樣的：如何選擇多行KendoUI Grid for Angular 4+並將其移至另一個kendoUI Grid

<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也有一些數據，我將不得不增加或也有附加數據（如果已經有一些現有數據）到網格數據源。我通過服務，REST API這樣的結合：

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

來源

2017-07-28 Aarchie

只是回答如果別人來尋找一個答案：你可以做到這一點通過操縱格柵數據源陣列。使用數組Splice方法從Grid 1中的數組中提取行並生成一個新數組。將新生成的數組推送到Grid 2數據源。另外，一旦我操作數組數據源，我的網格就不會刷新，所以我不得不從Kendo網格中移除分頁，並且它工作正常。

來源

2017-08-08 16:26:05 Aarchie

你怎麼選擇的行給他們拼接成新的陣列？ – StepUp

@StepUp在帖子中回覆你希望有幫助。 – Aarchie

要回答的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)

來源

2017-11-29 22:36:18 Aarchie

如何選擇多行KendoUI Grid for Angular 4+並將其移至另一個kendoUI Grid

回答

相關問題