EasyUI Forum
March 28, 2024, 02:47:23 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [SOLVED] Dynamically select and drag datagrid rows  (Read 9432 times)
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« on: March 24, 2017, 08:10:50 AM »

Hello
I need to dynamically select and drag rows if selected row have specific value, for example - if I start drag on row with id = 5, then I need to select all rows which have parent_id = 5.
By default, datagrid have data-options="singleSelect:true,dragselection:false,ctrlSelect:false"
and here is code which I use on onDragEnter:

Code:
function onDragEnter_myfunc(e){
    if (e.id==5){
   var opts = $('#dg').datagrid('options');
opts.singleSelect = false;
        opts.dragSelection = true;
        opts.ctrlSelect = true;
var data = $('#dg').datagrid('getData');
var rows = data.firstRows;

for (var i = 0; i < data.total; i++) {
   if (rows[i].parent_id == e.id){
     $('#dg').datagrid('selectRow',i);
   }  
 };
    }
}
When I start drag, I see that all needed fields are selected but dragging process actually drag only one selected row. How to dynamically start drag all selected rows, please?
Thank you.
« Last Edit: March 28, 2017, 11:42:29 PM by Pierre » Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #1 on: March 25, 2017, 11:36:02 PM »

With other words, I achieved to dynamically select all needed rows - question is - how to add those rows to "drag" queue? When I start drag, dragged is only one row (and that's OK) and then I select few additional rows and I need to add them to dragging rows.
Thank you for your help.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #2 on: March 26, 2017, 04:40:19 AM »

Please refer to the code below:
Code:
$('#dg').datagrid({
  singleSelect: true,
  dragSelection: false,
  ctrlSelect: false,
  onLoadSuccess: function(){
    $(this).datagrid('enableDnd');
  },
  onStartDrag: function(row){
    var row = $.isArray(row) ? row[0] : row;
    var id = row['itemid'];
    if (id=='EST-10'){
      var opts = $(this).datagrid('options');
      opts.singleSelect = false;
      opts.dragSelection = true;
      opts.ctrlSelect = true;
      var index = $(this).datagrid('getRowIndex', row);
      // select some rows
      $(this).datagrid('selectRow',index);
      $(this).datagrid('selectRow',index+1);
    } else {
      var opts = $(this).datagrid('options');
      opts.singleSelect = true;
      opts.dragSelection = false;
      opts.ctrlSelect = false;
    }
  },
  onStopDrag: function(){
    var opts = $(this).datagrid('options');
    opts.singleSelect = true;
    opts.dragSelection = false;
    opts.ctrlSelect = false;
  }
})
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #3 on: March 27, 2017, 02:27:32 AM »

Stworthy, thank you so much, it works perfect if used on "normal" way but there is possible bug:
If I click on row and release left button then start to drag, it works perfect, but if I just click on row and start to drag without releasing a button, it drag just selected row and other rows are not dragged.
I prepared simple example:
http://code.reloado.com/oeasyrik1/97/edit#preview
Please click at "Grid data5" and start drag - it will also drag 2 other rows and when you stop drag, all 3 rows are moved - that's great.
Now, please reload a page and then click on "Grid data5" - and do not release mouse - and start to drag - you will see that only clicked row is dragged and other 2 not. Could you please see why that's happening?
Thank you again.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 on: March 27, 2017, 07:04:20 AM »

Please look at this updated example.
http://code.reloado.com/oeasyrik1/99/edit#preview
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #5 on: March 28, 2017, 01:29:45 AM »

Hello Stworthy
thank you so much for your help.
I still have some problem - this example works fine:
http://code.reloado.com/oeasyrik1/100/edit#preview
and this not:
http://code.reloado.com/oeasyrik1/101/edit
only difference is - on first (working) example, "dg" is defined like this:
style="width:700px;height:400px"
on second (not working), "dg" is defined like this:
style="width:700px;height:500px"
to test, please select row with ID 191898 and drag it onto row 193534.
Attached are images for better understanding.
As I see, problem is in the "dg" height size. If it is bigger then 400px, it does not work. If it is smaller then 400px, it works.
Thank you again for your help.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #6 on: March 28, 2017, 07:28:32 PM »

The scrollview has some special behaviors when inserting or deleting rows. So please try to download the newer 'datagrid-scrollview.js' file from https://www.jeasyui.com/extension/datagridview.php

http://code.reloado.com/oeasyrik1/102/edit#preview
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #7 on: March 28, 2017, 11:42:16 PM »

Stworthy, it works awesome, thank you so much.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!