check/uncheck a checkbox in a datagrid will check/un in another datagrid

EasyUI Forum

April 28, 2024, 01:35:47 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > check/uncheck a checkbox in a datagrid will check/un in another datagrid

Pages: [1] 2

« previous next »

Author

Topic: check/uncheck a checkbox in a datagrid will check/un in another datagrid (Read 5535 times)

fmdano

Newbie

Posts: 22

check/uncheck a checkbox in a datagrid will check/un in another datagrid

« on: January 24, 2023, 11:40:02 AM »

I have a datagrid and use the onCheck and onUncheck methods for a datagrid

onCheck:function(index, row){
}

onUncheck:function(index, row){
}

Inside either one of these above, I put in a simple few lines of code to get me the info for the 2nd datagrid so I can do a call to either check or uncheck the same checkbox in that grid

dg2.datagrid('getRows');
after i get the rows from the 2nd grid, I loop over the rows and figure out in grid 2 which row matches the one checked/unchecked in grid1 then I run the datagrid('checkRow', index) or ('uncheckRow', index) code.

onUncheck:function(index, row){

var dg2 = $('#datagrid2');
var grid2 = dg2.datagrid('getRows');
$.each(grid2 , function(index2, val2) {
if (val2.id == row['id']){
dg2.datagrid('uncheckRow', index2);
return true;
}
});
}

If I use console.log in this .each, i get the info looping the right amount of times....as soon as I put in the uncheckRow code, my code goes into an js infinite loop in devtools....the checkboxes might still work, but they also might not work...all depends on what position the sun is in that day....lol

HAS ANYONE used the checkbox of one grid row to do the same thing in a separate grids grid row?
seems pretty straight forward to me so not sure why this is so werid...

Thanks for any help


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #1 on: January 24, 2023, 06:25:26 PM »

Please look at this example. It works fine.

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CheckBox Selection on DataGrid - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript">
    var data1 = [
      {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
      {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
      {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
    ];
    var data2 = [
      {"productid":"FI-SW-01","productname":"Koi"},
      {"productid":"K9-DL-01","productname":"Dalmation"},
      {"productid":"RP-SN-01","productname":"Rattlesnake"},
      {"productid":"RP-LI-02","productname":"Iguana"},
      {"productid":"FL-DSH-01","productname":"Manx"},
      {"productid":"FL-DLH-02","productname":"Persian"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot"}
    ]

    $(function(){
      $('#datagrid1').datagrid({
        onCheck:function(index, row){
           var dg2 = $('#datagrid2');
           var grid2 = dg2.datagrid('getRows');
           $.each(grid2 , function(index2, val2) { 
             if (val2.productid == row['productid']){
                   dg2.datagrid('checkRow', index2);
                return true;
             }
           });
        },
        onUncheck:function(index, row){
           var dg2 = $('#datagrid2');
           var grid2 = dg2.datagrid('getRows');
           $.each(grid2 , function(index2, val2) { 
             if (val2.productid == row['productid']){
                   dg2.datagrid('uncheckRow', index2);
                return true;
             }
           });
        }
      })
    })
  </script>
</head>
<body>  
  <table id="datagrid1" class="easyui-datagrid" title="DataGrid1" style="width:700px;height:250px"
      data-options="rownumbers:true,data:data1">
    <thead>
      <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'itemid',width:80">Item ID</th>
        <th data-options="field:'productid',width:100">Product</th>
        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
        <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
        <th data-options="field:'attr1',width:220">Attribute</th>
        <th data-options="field:'status',width:60,align:'center'">Status</th>
      </tr>
    </thead>
  </table>
  <table id="datagrid2" class="easyui-datagrid" title="DataGrid2" style="width:700px;height:250px"
      data-options="rownumbers:true,data:data2">
    <thead>
      <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'productid',width:150">Product Id</th>
        <th data-options="field:'productname',width:200">Product Name</th>
    </thead>
  </table>

</body>
</html>


	Logged

fmdano

Newbie

Posts: 22

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #2 on: January 26, 2023, 01:35:10 PM »

Hey,
so what you posted for me worked for 2 grids as a test. So, my page actually has 4 grids and all are in tabs. If a checkbox is checked in grid 1, if that same record is in any of the other 3 grids, it will be checked...if check on in grid 3 has to check it in the other 3 grids if it is there.
I took your code and tried to put in 2 other tabs and add in the onCHeck and onUncheck and when I did this for all 4 grids, I got the infinite loop again....
Thoughts?
thanks


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #3 on: January 27, 2023, 02:42:38 AM »

Please show your testing example to demonstrate your issue.


	Logged

fmdano

Newbie

Posts: 22

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #4 on: January 30, 2023, 09:55:49 AM »

It is going to take me some time to convert my code over from a database driven one to one just using the json files like you are using....
Give me some time and I'll show you what I have....thanks for your help and your patience


	Logged

fmdano

Newbie

Posts: 22

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #5 on: January 30, 2023, 10:10:47 AM »

Here is code that only shows the JS check/uncheck for grid 1 and grid 2....you can create for grid 3 and 4 just like 1 and 2.
also, put the grids in a tab div:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CheckBox Selection on DataGrid - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript">
   var data1 = [
   {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
   {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
   {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
   {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
   ];
   var data2 = [
   {"productid":"FI-SW-01","productname":"Koi"},
   {"productid":"K9-DL-01","productname":"Dalmation"},
   {"productid":"RP-SN-01","productname":"Rattlesnake"},
   {"productid":"RP-LI-02","productname":"Iguana"},
   {"productid":"FL-DSH-01","productname":"Manx"},
   {"productid":"FL-DLH-02","productname":"Persian"},
   {"productid":"AV-CB-01","productname":"Amazon Parrot"}
   ]

   var data3 = [
   {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
   {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
   {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
   {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
   ];

   var data4 = [
   {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
   {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
   {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
   {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
   ];

   // For grid one
   $(function(){
   $('#datagrid1').datagrid({
   onCheck:function(index, row){
   var dg2 = $('#datagrid2');
   var grid2 = dg2.datagrid('getRows');
   $.each(grid2 , function(index2, val2) {
   if (val2.productid == row['productid']){
   dg2.datagrid('checkRow', index2);
   return true;
   }
   });

   var dg3 = $('#datagrid3');
   var grid3 = dg3.datagrid('getRows');
   $.each(grid3 , function(index3, val3) {
   if (val3.productid == row['productid']){
   dg3.datagrid('checkRow', index3);
   return true;
   }
   });

   var dg4 = $('#datagrid4');
   var grid4 = dg4.datagrid('getRows');
   $.each(grid4 , function(index4, val4) {
   if (val4.productid == row['productid']){
   dg4.datagrid('checkRow', index4);
   return true;
   }
   });
   },
   onUncheck:function(index, row){
   var dg2 = $('#datagrid2');
   var grid2 = dg2.datagrid('getRows');
   $.each(grid2 , function(index2, val2) {
   if (val2.productid == row['productid']){
   dg2.datagrid('uncheckRow', index2);
   return true;
   }
   });

   var dg3 = $('#datagrid3');
   var grid3 = dg3.datagrid('getRows');
   $.each(grid3 , function(index3, val3) {
   if (val3.productid == row['productid']){
   dg3.datagrid('uncheckRow', index3);
   return true;
   }
   });

   var dg4 = $('#datagrid4');
   var grid4 = dg4.datagrid('getRows');
   $.each(grid4 , function(index4, val4) {
   if (val4.productid == row['productid']){
   dg4.datagrid('uncheckRow', index4);
   return true;
   }
   });
   }
   })
   })

// For grid two
   $(function(){
   $('#datagrid2').datagrid({
   onCheck:function(index, row){
   var dg1 = $('#datagrid1');
   var grid1 = dg1.datagrid('getRows');
   $.each(grid1 , function(index1, val1) {
   if (val1.productid == row['productid']){
   dg1.datagrid('checkRow', index1);
   return true;
   }
   });

   var dg3 = $('#datagrid3');
   var grid3 = dg3.datagrid('getRows');
   $.each(grid3 , function(index3, val3) {
   if (val3.productid == row['productid']){
   dg3.datagrid('checkRow', index3);
   return true;
   }
   });

   var dg4 = $('#datagrid4');
   var grid4 = dg4.datagrid('getRows');
   $.each(grid4 , function(index4, val4) {
   if (val4.productid == row['productid']){
   dg4.datagrid('checkRow', index4);
   return true;
   }
   });
   },
   onUncheck:function(index, row){
   var dg1 = $('#datagrid1');
   var grid1 = dg1.datagrid('getRows');
   $.each(grid1 , function(index1, val1) {
   if (val1.productid == row['productid']){
   dg1.datagrid('uncheckRow', index1);
   return true;
   }
   });

   var dg3 = $('#datagrid3');
   var grid3 = dg3.datagrid('getRows');
   $.each(grid3 , function(index3, val3) {
   if (val3.productid == row['productid']){
   dg3.datagrid('uncheckRow', index3);
   return true;
   }
   });

   var dg4 = $('#datagrid4');
   var grid4 = dg4.datagrid('getRows');
   $.each(grid4 , function(index4, val4) {
   if (val4.productid == row['productid']){
   dg4.datagrid('uncheckRow', index4);
   return true;
   }
   });
   }
   })
   })
  </script>
</head>
<body>
  <div class="easyui-tabs" style="width:100%;height:515px;border-width:0;">
   <table id="datagrid1" class="easyui-datagrid" title="DataGrid1" style="width:700px;height:250px"
   data-options="rownumbers:true,data:data1">
   <thead>
   <tr>
   <th data-options="field:'ck',checkbox:true"></th>
   <th data-options="field:'itemid',width:80">Item ID</th>
   <th data-options="field:'productid',width:100">Product</th>
   <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
   <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
   <th data-options="field:'attr1',width:220">Attribute</th>
   <th data-options="field:'status',width:60,align:'center'">Status</th>
   </tr>
   </thead>
   </table>
   <table id="datagrid2" class="easyui-datagrid" title="DataGrid2" style="width:700px;height:250px"
   data-options="rownumbers:true,data:data2">
   <thead>
   <tr>
   <th data-options="field:'ck',checkbox:true"></th>
   <th data-options="field:'productid',width:150">Product Id</th>
   <th data-options="field:'productname',width:200">Product Name</th>
   </thead>
   </table>

   <table id="datagrid3" class="easyui-datagrid" title="DataGrid1" style="width:700px;height:250px"
   data-options="rownumbers:true,data:data3">
   <thead>
   <tr>
   <th data-options="field:'ck',checkbox:true"></th>
   <th data-options="field:'itemid',width:80">Item ID</th>
   <th data-options="field:'productid',width:100">Product</th>
   <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
   <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
   <th data-options="field:'attr1',width:220">Attribute</th>
   <th data-options="field:'status',width:60,align:'center'">Status</th>
   </tr>
   </thead>
   </table>

   <table id="datagrid4" class="easyui-datagrid" title="DataGrid1" style="width:700px;height:250px"
   data-options="rownumbers:true,data:data4">
   <thead>
   <tr>
   <th data-options="field:'ck',checkbox:true"></th>
   <th data-options="field:'itemid',width:80">Item ID</th>
   <th data-options="field:'productid',width:100">Product</th>
   <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
   <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
   <th data-options="field:'attr1',width:220">Attribute</th>
   <th data-options="field:'status',width:60,align:'center'">Status</th>
   </tr>
   </thead>
   </table>
  </div>

</body>
</html>


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #6 on: January 31, 2023, 07:05:09 AM »

This issue has been fixed. Please update to the latest version.


	Logged

fmdano

Newbie

Posts: 22

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #7 on: February 02, 2023, 11:27:43 AM »

Hey,
so I am looking at our jquery.easyui.min.js and the comment at the top says EasyUI for JQuery 1.10.2
if this the latest easyUI code? if not which one is?
if this is the latest, then maybe my code example above still has something wrong in it?

thanks for your continued help.
Dan


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #8 on: February 02, 2023, 08:33:50 PM »

Please download it from https://www.jeasyui.com/download/v110.php


	Logged

fmdano

Newbie

Posts: 22

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #9 on: February 03, 2023, 12:31:47 PM »

Thanks for this information. I am passing this onto my team and will see what we need to do to get this updated so I can look into getting my checkboxes working correctly.

I will keep you updated.
thanks again...
dan


	Logged

fmdano

Newbie

Posts: 22

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #10 on: February 10, 2023, 10:55:05 AM »

Good Afternoon...
I finally was able to get back to adding in this code and the updated JEasyUI framework.
I downloaded the framework and put it into my code, and BOOM, it just worked. I did not have to do anything with my code. So, it looks like version stated above to download had a fix in it for the checkboxes.

I really appreciate your help on this and the update to the framework.

Dan


	Logged

fmdano

Newbie

Posts: 22

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #11 on: February 14, 2023, 05:33:53 AM »

So far the code looks good, however we might have an issue and we are still working through it....we have lots of grids in our system, and now it look like we might have an issue where when we select a row (no checkboxes), and then select another row, the first row is left selected...so if I try to select the first 3 rows, all 3 are selected...
Could that be an issue with this fix, or do we need to add some attribute to all our girds to not allow multiple selections?

1st issue -- above can't just select 1 row, but it hightlights all rows without deselected the previous row.
2nd issue -- we have a grid with empty checkboxes on it where we are selecting user profiles and now those checkboxes are not working at all...we can't check them and make them selected.

so it seems like the fix you gave us for our checkboxes in grids for this forum discussion might have messed up other grid operations for us...

Do we need to backout the updated version you gave us?

I am going to get yelled at in my team meeting in about an hour, so the sooner i can have an answer the better...

thanks
Dan

PS -- wish I could attach screen shots to show you what is happening, but can't...


« Last Edit: February 14, 2023, 05:47:02 AM by fmdano »	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #12 on: February 14, 2023, 08:46:03 PM »

This is the example created from your code. Please point out what happens to your issue.

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CheckBox Selection on DataGrid - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript">
    var data1 = [
      {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
      {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
      {"productid":"RP-SN-02","productname":"Rattlesnake2","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
      {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
      {"productid":"FL-DSH-02","productname":"Manx2","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
      {"productid":"FL-DLH-01","productname":"Persian1","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
    ];
    var data2 = [
      {"productid":"FI-SW-01","productname":"Koi"},
      {"productid":"K9-DL-01","productname":"Dalmation"},
      {"productid":"RP-SN-02","productname":"Rattlesnake2"},
      {"productid":"RP-LI-02","productname":"Iguana"},
      {"productid":"FL-DSH-01","productname":"Manx"},
      {"productid":"FL-DLH-02","productname":"Persian"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot"}
    ]

    var data3 = [
      {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
      {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
      {"productid":"RP-SN-02","productname":"Rattlesnake2","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
      {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
      {"productid":"FL-DSH-02","productname":"Manx2","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
      {"productid":"FL-DLH-01","productname":"Persian1","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
    ];

    var data4 = [
      {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
      {"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
      {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
      {"productid":"RP-SN-02","productname":"Rattlesnake2","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
      {"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
      {"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
      {"productid":"FL-DSH-02","productname":"Manx2","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
      {"productid":"FL-DLH-01","productname":"Persian1","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
      {"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
      {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
    ];

    // For grid one
    $(function(){
      $('#datagrid1').datagrid({
        onCheck:function(index, row){
           var dg2 = $('#datagrid2');
           var grid2 = dg2.datagrid('getRows');
           $.each(grid2 , function(index2, val2) {
             if (val2.productid == row['productid']){
                   dg2.datagrid('checkRow', index2);
                return true;
             }
           });

           var dg3 = $('#datagrid3');
           var grid3 = dg3.datagrid('getRows');
           $.each(grid3 , function(index3, val3) {
             if (val3.productid == row['productid']){
                   dg3.datagrid('checkRow', index3);
                return true;
             }
           });

           var dg4 = $('#datagrid4');
           var grid4 = dg4.datagrid('getRows');
           $.each(grid4 , function(index4, val4) {
             if (val4.productid == row['productid']){
                   dg4.datagrid('checkRow', index4);
                return true;
             }
           });
        },
        onUncheck:function(index, row){
           var dg2 = $('#datagrid2');
           var grid2 = dg2.datagrid('getRows');
           $.each(grid2 , function(index2, val2) {
             if (val2.productid == row['productid']){
                   dg2.datagrid('uncheckRow', index2);
                return true;
             }
           });

           var dg3 = $('#datagrid3');
           var grid3 = dg3.datagrid('getRows');
           $.each(grid3 , function(index3, val3) {
             if (val3.productid == row['productid']){
                   dg3.datagrid('uncheckRow', index3);
                return true;
             }
           });

           var dg4 = $('#datagrid4');
           var grid4 = dg4.datagrid('getRows');
           $.each(grid4 , function(index4, val4) {
             if (val4.productid == row['productid']){
                   dg4.datagrid('uncheckRow', index4);
                return true;
             }
           });
        }
      })
    })

// For grid two
    $(function(){
      $('#datagrid2').datagrid({
        onCheck:function(index, row){
           var dg1 = $('#datagrid1');
           var grid1 = dg1.datagrid('getRows');
           $.each(grid1 , function(index1, val1) {
             if (val1.productid == row['productid']){
                   dg1.datagrid('checkRow', index1);
                return true;
             }
           });

           var dg3 = $('#datagrid3');
           var grid3 = dg3.datagrid('getRows');
           $.each(grid3 , function(index3, val3) {
             if (val3.productid == row['productid']){
                   dg3.datagrid('checkRow', index3);
                return true;
             }
           });

           var dg4 = $('#datagrid4');
           var grid4 = dg4.datagrid('getRows');
           $.each(grid4 , function(index4, val4) {
             if (val4.productid == row['productid']){
                   dg4.datagrid('checkRow', index4);
                return true;
             }
           });
        },
        onUncheck:function(index, row){
           var dg1 = $('#datagrid1');
           var grid1 = dg1.datagrid('getRows');
           $.each(grid1 , function(index1, val1) {
             if (val1.productid == row['productid']){
                   dg1.datagrid('uncheckRow', index1);
                return true;
             }
           });

           var dg3 = $('#datagrid3');
           var grid3 = dg3.datagrid('getRows');
           $.each(grid3 , function(index3, val3) {
             if (val3.productid == row['productid']){
                   dg3.datagrid('uncheckRow', index3);
                return true;
             }
           });

           var dg4 = $('#datagrid4');
           var grid4 = dg4.datagrid('getRows');
           $.each(grid4 , function(index4, val4) {
             if (val4.productid == row['productid']){
                   dg4.datagrid('uncheckRow', index4);
                return true;
             }
           });
        }
      })
    })
  </script>
</head>
<body>
  <div class="easyui-tabs" style="width:100%;height:515px;border-width:0;">
    <div title="DataGrid1">
      <table id="datagrid1" class="easyui-datagrid" style="width:100%;height:250px"
          data-options="rownumbers:true,data:data1">
        <thead>
          <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100">Product</th>
            <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
            <th data-options="field:'attr1',width:220">Attribute</th>
            <th data-options="field:'status',width:60,align:'center'">Status</th>
          </tr>
        </thead>
      </table>
    </div>
    <div title="DataGrid2">
      <table id="datagrid2" class="easyui-datagrid" style="width:100%;height:250px"
          data-options="rownumbers:true,data:data2">
        <thead>
          <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'productid',width:150">Product Id</th>
            <th data-options="field:'productname',width:200">Product Name</th>
        </thead>
      </table>
    </div>
    <div title="DataGrid3">
      <table id="datagrid3" class="easyui-datagrid" style="width:100%;height:250px"
          data-options="rownumbers:true,data:data3">
        <thead>
          <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100">Product</th>
            <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
            <th data-options="field:'attr1',width:220">Attribute</th>
            <th data-options="field:'status',width:60,align:'center'">Status</th>
          </tr>
        </thead>
      </table>
    </div>
    <div title="DataGrid4">
      <table id="datagrid4" class="easyui-datagrid" style="width:100%;height:250px"
          data-options="rownumbers:true,data:data4">
        <thead>
          <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100">Product</th>
            <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
            <th data-options="field:'attr1',width:220">Attribute</th>
            <th data-options="field:'status',width:60,align:'center'">Status</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>  

</body>
</html>


	Logged

fmdano

Newbie

Posts: 22

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #13 on: February 15, 2023, 06:02:49 AM »

Hey,
when I Put in the update of the jeasyui code you gave me in this post, the Checkboxes worked just great in that grid.
However, in the rest of our application, all other grids stopped working correctly.

as I stated, all other grids you could not just select one row at a time, but it selected all rows...so I clicked on row one and it selected, then click on row 2, and row one and 2 selected and so forth.

Also another grid we displayed we had empty checkboxes in a grid, and those checkboxes stopped worked all together...

the the fix you gave me solved the one problem, but broke the rest of our system....so we had to back out.
If I could send you screen shots of what happened I could, but I could not attach any here...

thoughts?


	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: check/uncheck a checkbox in a datagrid will check/un in another datagrid

« Reply #14 on: February 15, 2023, 07:43:05 PM »

You may need to check the code of the 'onCheck' event handler. How do you find the rows on other datagrid components and how to call the 'checkRow' method according to your logic. If the 'checkbox' does not checked, please debug the code to see if the 'checkRow' method is called.

To continue to discuss this problem, please provide a simple example that can demonstrate your issue.


	Logged

Pages: [1] 2

« previous next »