title: How to select multiple rows of KendoUI Grid for Angular 4+ and move it to another kendoUI Grid
body: <p>I have 2 Kendo Grids(angular 4+ component) where data is coming from Rest API.
  I have to select and move the data row from the first grid to another grid. For example i am bindind the grid like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
              &lt;kendo-grid [height]="450"
                          [kendoGridBinding]="viewAvailableJobs"
                          [scrollable]="scrollable"
                          [selectable]="true"                           
                          (selectionChange)="gridUserSelectionChange($event)"&gt;
                &lt;kendo-grid-column field="Select" width="30" [locked]="true" [filterable]="false"&gt;
                  &lt;ng-template kendoGridHeaderTemplate&gt;
                    &lt;input type="checkbox" [checked]="false" /&gt;
                  &lt;/ng-template&gt;
                  &lt;ng-template kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex"&gt;
                    &lt;input type="checkbox" id="Select {{dataItem.JobNumber}}" value="Selected" name="cSelection-{{dataItem.JobNumber}}"
                           [checked]="Selected"
                           (change)="onCheckboxChange($event, dataItem, 'select')"
                           (clicked)="setButtonStateS()" /&gt;
                  &lt;/ng-template&gt;
                &lt;/kendo-grid-column&gt;
  
                &lt;kendo-grid-column field="JobNumber" title="Job #" [width]="150" [locked]="true"&gt;
                &lt;/kendo-grid-column&gt;
                &lt;kendo-grid-column field="jobName" title="Job Name" [width]="320" [locked]="true"&gt;
                &lt;/kendo-grid-column&gt;
                &lt;kendo-grid-column field="jobStatusUID" title="Job Status" [width]="150" [locked]="true"&gt;
                &lt;/kendo-grid-column&gt;             
                &lt;kendo-grid-column field="ProjectNumber" title="Project" [width]="150"&gt;
                &lt;/kendo-grid-column&gt;
                &lt;kendo-grid-column field="scheduleNumber" title="Schedule" [width]="150"&gt;
                &lt;/kendo-grid-column&gt;
                &lt;kendo-grid-column field="oeName" title="POE" [width]="220"&gt;
                &lt;/kendo-grid-column&gt;
              
              &lt;/kendo-grid&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The other grid 2 also has some data, i will have to add or also have to append the data(if there is already some existing data) to grid datasource. I am binding through service, rest api like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>constructor(private JobService: DataService){}
  public ngOnInit(): void { 
       this.JobService.getAvailableJobs(this.projectstr, this.programstr).subscribe(req =&gt; {
                      this.viewAvailableJobs = req;
                      this.totalAvailableJobs = req.length;                    
                  });
  }</code></pre>
  </div>
  </div>
  </p>