deleterow 호출 후 스크롤 이동을 방지하기

deleterow 호출시 스크롤 이동 문제 해결

deleterow 호출시 부모영역의 스크롤이 top으로 이동하는 현상이 발생했다.
처음에는 a 태그의 브라우저 기본 기능 때문인줄 알고, preventDefault를 암만 해봤지만 소용이 없었다.
문제는 jqxGrid의 deleterow를 호출할때 발생하는 것이었다.
물론 내부적인 이유는 찾지 못했다.

구글링 중 아래 샘플을 발견했다.
Sample
ensurerowvisible API를 호출해서 강제로 스크롤을 잡았다.
근데 왜 setTimeout을 사용했을까?

 var data = generatedata(50);
 var source = {
   localdata: data,
   datafields: [{
     name: 'firstname',
     type: 'string'
   }, {
     name: 'lastname',
     type: 'string'
   }, {
     name: 'productname',
     type: 'string'
   }, {
     name: 'date',
     type: 'date'
   }, {
     name: 'quantity',
     type: 'number'
   }, {
     name: 'price',
     type: 'number'
   }],
   datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
   width: 500,
   height: 200,
   theme: 'energyblue',
   source: adapter,
   sortable: false,
   virtualmode: false,
   ready: function() {
     //$("#jqxgrid").jqxGrid('selectrow', 0);
   },
   columns: [{
     text: 'First Name',
     datafield: 'firstname',
     columngroup: 'Name',
     width: 90
   }, {
     text: 'Last Name',
     columngroup: 'Name',
     datafield: 'lastname',
     width: 90
   }, {
     text: 'Product',
     datafield: 'productname',
     width: 170
   }, {
     text: 'Order Date',
     datafield: 'date',
     width: 160,
     cellsformat: 'dd-MMMM-yyyy'
   }, {
     text: 'Quantity',
     datafield: 'quantity',
     width: 80,
     cellsalign: 'right'
   }, {
     text: 'Unit Price',
     datafield: 'price',
     cellsalign: 'right',
     cellsformat: 'c2'
   }],
 });

 $("#deleterowbutton").jqxButton({
   theme: 'energyblue',
   height: 30
 });

 $("#deleterowbutton").on('click', function() {
   var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
   var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
   if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
     var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
     var commit = $("#jqxgrid").jqxGrid('deleterow', id);

     setTimeout(function() {
       $('#jqxgrid').jqxGrid('ensurerowvisible', id - 1);
     }, 0);
   }
 });