Print Page - [SOLVED] Moving data up and down on datagrid with scrollView

Title: [SOLVED] Moving data up and down on datagrid with scrollView
Post by: Pierre on March 20, 2017, 04:47:22 AM

Hello
I'm using datagrid scrollView need to move datagrid row up and down and here is sample code I found:

Code:

        function moveRow(step){
        	var rows = $('#dg').datagrid('getRows');
        	var row = $('#dg').datagrid('getSelected');
        	if (row){
        		var index = $('#dg').datagrid('getRowIndex',row);
        		rows.splice(index,1);
    			rows.splice(index+step,0,row);
        		$('#dg').datagrid('loadData',rows);
        		$('#dg').datagrid('scrollTo');
        	}
        }

it works OK if my data are on single datagrid page but if there are more pages, it does not work correctly.
Any idea how to move datagrid rows up and down when using scrollView, please?
Thank you.

Title: Re: Moving data up and down on datagrid with scrollView
Post by: jarry on March 20, 2017, 08:14:46 AM

Please call 'scrollTo' method to scroll to any row, no matter the row is in the current page or not.

Code:

$('#dg').datagrid('scrollTo', {
  index: index,
  callback: function(index){
    //...
  }
})

Title: Re: Moving data up and down on datagrid with scrollView
Post by: Pierre on March 20, 2017, 08:36:16 AM

Hello Jarry
here are 10 records and it works fine:
http://code.reloado.com/oeasyrik1/90/edit#preview

and here are 150 records and if you go to second or third page and click on Move up or Down, it does not work (except on first page):
http://code.reloado.com/oeasyrik1/91/edit#preview

Thank you.

Title: Re: Moving data up and down on datagrid with scrollView
Post by: jarry on March 20, 2017, 05:20:26 PM

Please look at this example http://code.reloado.com/oeasyrik1/92/edit#preview. It works fine.
http://code.reloado.com/oeasyrik1/92/edit#preview

Title: Re: Moving data up and down on datagrid with scrollView
Post by: Pierre on March 20, 2017, 11:18:11 PM

Hello Jarry
thank you so much for your effort, now selection works but row is not moved :(
How to move row up and down?
Thank you!

Title: Re: Moving data up and down on datagrid with scrollView
Post by: jarry on March 21, 2017, 09:01:45 AM

The 'moveRow' function can be defined as:

Code:

function moveRow(step){
  var dg = $('#tt');
  var srcRow = dg.datagrid('getSelected');
  if (srcRow){
    var srcIndex = dg.datagrid('getRowIndex', srcRow);
    dg.datagrid('scrollTo', {
      index: srcIndex+step,
      callback: function(dstIndex){
        srcRow = $.extend(true,{},srcRow);
        var dstRow = $.extend(true,{},dg.datagrid('getRow', dstIndex));
        dg.datagrid('updateRow', {
          index: dstIndex,
          row: srcRow
        });
        dg.datagrid('updateRow', {
          index: srcIndex,
          row: dstRow
        });
        setTimeout(function(){
          dg.datagrid('selectRow', dstIndex);
        }, 0);
      }
    })
  }
}

Please look at this example http://code.reloado.com/oeasyrik1/93/edit#preview

Title: Re: Moving data up and down on datagrid with scrollView
Post by: Pierre on March 21, 2017, 11:51:53 AM

Jarry you are the man!
Thank you so much for your help.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Pierre on March 20, 2017, 04:47:22 AM