Row reordering issue in Kendo Angular Detail Template

Question

Using kendo detailed grid with the expand and collapsed features. To achieve the row reorder for the inner and outer grid added the below line code. Row re ordering not working if we try to do the reorder for inner grid.

below is the code for reference

enter image description here

enter image description here

 <kendo-grid [kendoGridBinding]="gridData"
 (cellClick)="cellClickHandler($event)"
 (detailExpand)="onDetailExpand($event)"
 [pageable]="pageableConfig"
[skip]="state.skip"
[pageSize]="state.take"
[sort]="state.sort"
[rowReorderable]="true"
(reorderable)="onRowReorderMaster($event)"
[navigable]="true"
[sortable]="true"
(sortChange)="sortChange($event)"
(pageChange)="pageChanged($event)"
[sort]="sort"
 >
  <ng-template *ngIf="true"  kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex"
  [kendoGridDetailTemplateShowIf]="kendoGridDetailTemplateShowIffn">
    <div *ngIf="dataItem.count>0" class="inner-grid">
     <site-inner-grid [siteGroup]="dataItem"></site-inner-grid> 
  </div>
  </ng-template >
    <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
    <kendo-grid-column-group title="Current Site Data">
    <kendo-grid-column field="siteName" title="SiteGroup Name" [class]="'parnet-name'" [sortable]="true" >
      <!-- <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" sortable="true">
       <span>{{gridData[rowIndex].siteName}}</span>
      </ng-template> -->
    </kendo-grid-column>
    <kendo-grid-column field="totalVolume" title="Total Volume" [sortable]="true"></kendo-grid-column>
    <kendo-grid-column field="allocated" title="Allocated" [sortable]="true"></kendo-grid-column>
    <kendo-grid-column field="rePercentage" title="RE %" [sortable]="true"></kendo-grid-column>
    <kendo-grid-column field="rePercentageGoal" title="RE % Goal" [sortable]="false">
    </kendo-grid-column>
    </kendo-grid-column-group>
    <kendo-grid-column-group title="New Allocation Data">
    <kendo-grid-column field="newAllocation" title="New Allocation" [class]="'new-allocation'" [sortable]="false">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <span *ngIf="gridData[rowIndex].count>0">{{gridData[rowIndex].newAllocation}}</span>
        <span *ngIf="gridData[rowIndex].count==0">
        <input type="number" class="new-allocation-textbox" [(ngModel)]="gridData[rowIndex].newAllocation" (change)="updateGrid()" />
        <span style="font-size: 10px;">MWh</span>
        </span>
       </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="percentageAllocation" title="% of Allocation" [class]="'new-allocation'" [sortable]="false">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <span *ngIf="gridData[rowIndex].count>0">{{gridData[rowIndex].percentageAllocation}}</span>
      <span *ngIf="gridData[rowIndex].count==0">
      <input type="number" class="new-allocation-textbox" [(ngModel)]="gridData[rowIndex].percentageAllocation" (change)="updateGrid()" />
      <span style="font-size: 10px;">MWh</span>
       </span>
    </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="percentageOfTotalVolume" title="% of Total Volume" [class]="'new-allocation'"  [sortable]="false">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <span *ngIf="gridData[rowIndex].count>0">{{gridData[rowIndex].percentageOfTotalVolume}}</span>
      <span *ngIf="gridData[rowIndex].count==0">
      <input type="number" class="new-allocation-textbox" [(ngModel)]="gridData[rowIndex].percentageOfTotalVolume" (change)="updateGrid()" />
      <span style="font-size: 10px;">MWh</span>
    </span>
    </ng-template>
    </kendo-grid-column>
  </kendo-grid-column-group>
  <kendo-grid-column-group title="OutCome">
    <kendo-grid-column field="newTotalAllocation" title="New Total Allocation" [class]="'outcome'" [sortable]="false"></kendo-grid-column>
    <kendo-grid-column field="newRePercentage" title="New RE %" [class]="'outcome'" [sortable]="false"></kendo-grid-column>
  </kendo-grid-column-group>
  <ng-template kendoPagerTemplate let-total="total" let-totalPages="totalPages" let-currentPage="currentPage">
    <span class="pager-label">&nbsp;{{total}}&nbsp; records</span>
    <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
    <kendo-pager-numeric-buttons [buttonCount]="4"></kendo-pager-numeric-buttons>
    <kendo-pager-next-buttons></kendo-pager-next-buttons>
    <kendo-pager-page-sizes class="k-pager-info" [pageSizes]="sizes"></kendo-pager-page-sizes>
  </ng-template>
  </kendo-grid>

 Inner grid:-
------------------
<kendo-grid [data]="gridData" (cellClick)="cellClickHandler($event)"
[rowClass]="rowClass"
[hideHeader]="true"
 [resizable]="false"
 [rowReorderable]="true"
(rowReorder)="rowReorderable($event)">
<kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
<kendo-grid-column-group title="Current Site Data">
    <kendo-grid-column field="siteName" title="Site Name">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <span>{{gridData.data[rowIndex].siteName}}</span>
        <span class="fa fa-info-circle costinfo"  tooltip="{{'Renewable Energy.CostInfoWarningMsg'}}" placement="top"
          *ngIf="rowIndex==0"></span>
       </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="totalVolume" title="Total Volume"></kendo-grid-column>
    <kendo-grid-column field="allocated" title="Allocated"></kendo-grid-column>
    <kendo-grid-column field="rePercentage" title="RE %"></kendo-grid-column>
    <kendo-grid-column field="rePercentageGoal" title="RE % Goal"></kendo-grid-column>
</kendo-grid-column-group>
<kendo-grid-column-group title="New Allocation Data">
    <kendo-grid-column field="newAllocation" title="New Allocation" [class]="'new-allocation'" [width]="120">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <input type="number" class="new-allocation-textbox" [(ngModel)]="gridData.data[rowIndex].newAllocation" (change)="updateGrid()" /><span style="font-size: 10px;">MWh</span>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="percentageAllocation" title="% of Allocation" [class]="'new-allocation'" [width]="120">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <input type="number" class="new-allocation-textbox"  class="new-allocation-textbox"   [(ngModel)]="gridData.data[rowIndex].percentageAllocation" (change)="updateGrid()" /><span>%</span>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="percentageOfTotalVolume" title="% of Total Volume" [class]="'new-allocation'" [width]="120">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <input type="number" class="new-allocation-textbox"  [(ngModel)]="gridData.data[rowIndex].percentageOfTotalVolume" (change)="updateGrid()" /><span>%</span>
      </ng-template>
    </kendo-grid-column>
  </kendo-grid-column-group>
  <kendo-grid-column-group title="OutCome">
    <kendo-grid-column field="newTotalAllocation" title="New Total Allocation" [class]="'outcome'"></kendo-grid-column>
    <kendo-grid-column field="newRePercentage" title="New RE %" [class]="'outcome'"></kendo-grid-column>
  </kendo-grid-column-group>
  </kendo-grid>