title: Prevent the row scroll on edit click
body: <p>I built a data grid using
  <a href="https://www.telerik.com/kendo-angular-ui/components/grid/" rel="nofollow noreferrer">Kendo Angular Grid</a> in which i have given size to each columns and also has command button "Edit, Update, Cancel" as very last columns.
  Due to size of columns, grid gets horizontal scroll bars.
  Editing is allowed only in last two field columns.
  When ever i click on "Edit" button the row scrolls to very left and my editable columns + command buttons ("update"&amp;"cancel") hided this is something weird or not liking to user. Again user has to scroll to right and do the update/cancel operation.
  Does any one has solution to this issue.</p>
  
  <pre><code>&lt;kendo-grid [kendoGridBinding]="view" [height]="700" [pageSize]="25" [pageable]="true" [sortable]="true" [selectable]="true"
                  (dataStateChange)="onStateChange($event)" (edit)="editHandler($event)" (cancel)="cancelHandler($event)" 
                  (save)="saveHandler($event)"&gt;
                  &lt;!-- &lt;kendo-grid-messages 
              noRecords="{{ this.noRecordMsg }}"&gt;
          &lt;/kendo-grid-messages&gt; --&gt;
                  &lt;kendo-grid-column title="View" width="60"&gt;
                      &lt;ng-template kendoGridCellTemplate let-dataItem="dataItem"&gt;
  
                          &lt;button kendoButton [icon]="'hyperlink-open'" [look]="'outline'" [routerLink]="['/detail', dataItem.ID]"&gt;&lt;/button&gt;
  
  
                      &lt;/ng-template&gt;
                  &lt;/kendo-grid-column&gt;
                  &lt;kendo-grid-column field="FILE_NAME" title="File Name" width="140"&gt;&lt;/kendo-grid-column&gt;
                  &lt;kendo-grid-column field="FILE_DATE" title="File Date" width="90"&gt;
                      &lt;ng-template kendoGridCellTemplate let-dataItem&gt;
                          {{ dataItem.FILE_DATE | date:"shortDate" }}
                      &lt;/ng-template&gt;
                  &lt;/kendo-grid-column&gt;
                  &lt;kendo-grid-column field="AMT" title="AMT" width="80"&gt;&lt;/kendo-grid-column&gt;
                  &lt;kendo-grid-column field="NAME" title="Name" width="90"&gt;&lt;/kendo-grid-column&gt;
                  &lt;kendo-grid-column field="ID" title="ID" width="80"&gt;&lt;/kendo-grid-column&gt;
                  &lt;kendo-grid-column field="PI" title="PI" width="110"&gt;
                      &lt;ng-template kendoGridEditTemplate let-dataItem="dataItem"&gt;
                          &lt;kendo-dropdownlist [data]="PIListItems" [value]="dataItem.PI" [(ngModel)]="dataItem.PI" name="PI"&gt;&lt;/kendo-dropdownlist&gt;
                      &lt;/ng-template&gt;
                  &lt;/kendo-grid-column&gt;
                  &lt;kendo-grid-column field="STATUS" title="Status" width="100"&gt;
                      &lt;ng-template kendoGridEditTemplate let-dataItem="dataItem"&gt;
                          &lt;kendo-dropdownlist [data]="statusListItems" [value]="dataItem.STATUS" [(ngModel)]="dataItem.STATUS" name="STATUS"&gt;&lt;/kendo-dropdownlist&gt;
                      &lt;/ng-template&gt;
                  &lt;/kendo-grid-column&gt;
                  &lt;kendo-grid-command-column title="command" width="180"&gt;
                      &lt;ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem"&gt;
                          &lt;button kendoGridEditCommand class="k-primary"&gt;Edit&lt;/button&gt;
                          &lt;button kendoGridSaveCommand [disabled]="myForm.invalid"&gt;{{ isNew ? 'Add' : 'Update' }}&lt;/button&gt;
                          &lt;button kendoGridCancelCommand&gt;{{ isNew ? 'Discard changes' : 'Cancel' }}&lt;/button&gt;
                      &lt;/ng-template&gt;
                  &lt;/kendo-grid-command-column&gt;
                  &lt;ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage"&gt;
                      &lt;kendo-pager-prev-buttons&gt;&lt;/kendo-pager-prev-buttons&gt;
                      &lt;kendo-pager-numeric-buttons [buttonCount]="5"&gt;&lt;/kendo-pager-numeric-buttons&gt;
                      &lt;kendo-pager-info&gt;&lt;/kendo-pager-info&gt;
                      &lt;kendo-pager-next-buttons&gt;&lt;/kendo-pager-next-buttons&gt;
                      &lt;kendo-pager-page-sizes [pageSizes]="[25, 50, 100, 200]"&gt;&lt;/kendo-pager-page-sizes&gt;
                  &lt;/ng-template&gt;
              &lt;/kendo-grid&gt;
  </code></pre>