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

[fmdano]

Not sure how to help you with this and that is what is worrying me...but I will do my best.

All our normal display grids look basically like this (removing code lines and showing functions)

$('#PRCover').treegrid({
      url: './com/prCover.cfc?method=getGridPR',
      queryParams: {
            filter: '',
            sort: '',
            order: '',
            search_terms: '',
            id: '0_0',
            currentProfile_id: '<cfoutput>#session.current_profile.region_id#</cfoutput>',
            currentProfile_ISNational: '<cfoutput>#session.current_profile.isnational#</cfoutput>'
      },
      idField:'id',
      treeField:'col1',
      emptyMsg: "No Records Found",
      border: true,
      singleSelect:true,
      fit: true,
      fitColumns: true,
      striped: true,
      rownumbers: false,
      collapsible: true,
      lines: false,
      sortOrder: 'asc',
      remoteSort:false,
      showHeader: true,
      scrollbarSize : 18,

      toolbar: '#prcover_search',
      nowrap : true,

      remoteFilter:false,
      pagination:true,
      pageList: [10, 20, 30, 40, 50, 100, 250, 500, 1000],
      pageSize: 1000,
loadFilter: function(data,parent){
},
onSelect: function(node){

},
onContextMenu: function (e,row){
},
columns:[[
         {
            field   : 'action',
            title   : '',
            width   : 50,
            resizable: false,
            fixed: true,
            formatter: function (value, row, index) {
               var link = '';
               if (row['has_attach'] === true || row['has_attach'] === "true" ) {
                  link = '<a class="download-attachment-icon" title="Attachments" href="javascript:getAllAttachments(\'' + row['doc_set_id'] + '\')">&nbsp;</a>&nbsp;';
               }
               if (row['has_deliver'] === true || row['has_deliver'] === "true") {
                  link = link + '<a class="download-deliverable-icon" title="Deliverables" href="javascript:downloadDeliverable(\'' + row['id'] + '\')">&nbsp;</a>&nbsp;';
               }
               if (link.length) {
                  return link;
               }
            }
         },
         {title: 'ETO (ACO) / PR / LSD',field:'col1',width:'30%', sortable: true},
         {title: 'Region / Comment', field:'col2',width: '20%', sortable: true, align:'left'},
         {title: 'Funding Type', field:'col3', width:'10%', sortable: true},
         {title: 'Work Release', field:'col4', width:'10%', description: 'Work Release referenced to this PR Cover.', sortable: true},
         {title: 'Acceptance', field:'col5', width:'10%', sortable: true, align:'center'},
         {title: 'PR Amount  ', field:'col6', width:'16.5%', sortable: true, align:'right'}
      ]]
   })
   .treegrid('enableFilter')
   .treegrid('getPanel').find('tr.datagrid-filter-row').hide();

In this grid, when we just try to click on a row, and then another row, both rows stay selected....in the old code we have I select a row it is selected, and if I select a different row, the first row unselects and the new row is the only row selected.

Our other Grid that actually has checkboxes in it that were not checking:

$('#user_profiles_grid').datagrid({
         url:'com/User_Info.cfc?method=getUserProfileData',
         method:'get',
         queryParams: {
            user_id: <cfoutput>#session.userDataStruct.user_id#</cfoutput>,
            profile_search_terms: ''
         },

         emptyMsg: "No Records Found",
         loadMsg: 'Loading&hellp;',
         idField:'user_profile_id',
         toolbar: '#profileSearch',
         width: 980,
         height: 500,
         border: false,
         fit: true,
         singleSelect:true,
         checkOnSelect: false,
         selectOnCheck: false,
         scrollOnSelect: true,
         fitColumns: true,
         nowrap: true,
         autorowheight: true,
         striped: true,
         rownumbers: false,
         sortable: true,
         sortOrder: 'asc',
         remoteSort:false,
         halign: 'center',
onBeforeCheck: function(index, row){
            $(this).datagrid('clearChecked');
            $(this).datagrid('selectRow', index);
         },
onLoadSuccess:      function (data) {
},
onDblClickRow:
},
columns:[[
            { field: 'user_profile_id', align: 'center', checkbox: true },
            {title: 'Name', field:'name',width: 200, align: 'center', sortable: true},
            {title: 'Email', field:'email', width: 150, align: 'center', sortable: true },
            {title: 'Region', field:'region',width: 200, align: 'center', sortable: true },
            {title: 'Role', field:'role',width: 250, align: 'center', sortable: true },
            {title: 'Last Login', field:'last_login',width: 100, align: 'center', sortable: true }
         ]]
      });
As you see, nothing is really odd in the code for either one of these 2 grid types.

I am not sure how to give you more examples without emailing you the JS code we are using and also sending you screenshots of what is happening, OR doing a screenshare of what the issue is....

So, does this above help show you what our code looks like that is breaking when we add in the code you gave us to Fix the other issue in this forum post?

thanks for being patient....
Dan

[fmdano]

Hey all,
Still looking to figure out how to adjust a basic grid to work with this new updated code. As stated in the previous posts, the new jeasy code fixes my checkbox issues but then in normal grid code does not allow single row selects but as you select row after row it just selects all of them without me having to hold down the crtl key.

How can we get together to figure out what to do to make this work for our checkbox issue in this post, but also keep the normal actions of grids in our code?

thanks
Dan

[jarry]

This is the treegrid code created from your example. The single selecting feature works fine. Please make sure you are using the latest version of the easyui library(1.10.15).

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Basic TreeGrid - 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" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>
	<script>
		var data = {
			"total": 10, "rows": [
				{ "id": 1, "col1": "ETO1", "col2": "Region1" },
				{ "id": 11, "col1": "ETO11", "col2": "Region11", "_parentId": 1 },
				{ "id": 2, "col1": "ETO2", "col2": "Region2" },
				{ "id": 3, "col1": "ETO3", "col2": "Region3" },
				{ "id": 4, "col1": "ETO4", "col2": "Region4" },
				{ "id": 5, "col1": "ETO5", "col2": "Region5" },
				{ "id": 6, "col1": "ETO6", "col2": "Region6" },
				{ "id": 7, "col1": "ETO7", "col2": "Region7" },
				{ "id": 8, "col1": "ETO8", "col2": "Region8" },
				{ "id": 9, "col1": "ETO9", "col2": "Region9" },
				{ "id": 10, "col1": "ETO10", "col2": "Region10" }
			]
		}

		$(function () {
			$('#PRCover').treegrid({
				data: data,
				idField: 'id',
				treeField: 'col1',
				emptyMsg: "No Records Found",
				border: true,
				singleSelect: true,
				fit: true,
				fitColumns: true,
				striped: true,
				rownumbers: false,
				collapsible: true,
				lines: false,
				sortOrder: 'asc',
				remoteSort: false,
				showHeader: true,
				scrollbarSize: 18,

				// toolbar: '#prcover_search',
				nowrap: true,

				remoteFilter: false,
				pagination: true,
				pageList: [10, 20, 30, 40, 50, 100, 250, 500, 1000],
				pageSize: 1000,
				// loadFilter: function (data, parent) {
				// },
				onSelect: function (node) {

				},
				onContextMenu: function (e, row) {
				},
				columns: [[
					{
						field: 'action',
						title: '',
						width: 50,
						resizable: false,
						fixed: true,
						formatter: function (value, row, index) {
							var link = '';
							if (row['has_attach'] === true || row['has_attach'] === "true") {
								link = '<a class="download-attachment-icon" title="Attachments" href="javascript:getAllAttachments(\'' + row['doc_set_id'] + '\')">&nbsp;</a>&nbsp;';
							}
							if (row['has_deliver'] === true || row['has_deliver'] === "true") {
								link = link + '<a class="download-deliverable-icon" title="Deliverables" href="javascript:downloadDeliverable(\'' + row['id'] + '\')">&nbsp;</a>&nbsp;';
							}
							if (link.length) {
								return link;
							}
						}
					},
					{ title: 'ETO (ACO) / PR / LSD', field: 'col1', width: '30%', sortable: true },
					{ title: 'Region / Comment', field: 'col2', width: '20%', sortable: true, align: 'left' },
					{ title: 'Funding Type', field: 'col3', width: '10%', sortable: true },
					{ title: 'Work Release', field: 'col4', width: '10%', description: 'Work Release referenced to this PR Cover.', sortable: true },
					{ title: 'Acceptance', field: 'col5', width: '10%', sortable: true, align: 'center' },
					{ title: 'PR Amount  ', field: 'col6', width: '16.5%', sortable: true, align: 'right' }
				]]
			})
				.treegrid('enableFilter')
				.treegrid('getPanel').find('tr.datagrid-filter-row').hide();
		})
	</script>
</head>

<body>
	<table id="PRCover" title="Folder Browser" class1="easyui-treegrid">
	</table>

</body>

</html>

[fmdano]

I replaced my older jEasyUI code with the newer download and my checkbox infinite loop issue was fixed and the main datagrid row select was also fixed so I can select just one grid row at a time.
SO 2 out of 3 issues were fixed.

The 3rd issue is in a regular grid now just trying to manually check a checkbox does not work, the checkbox just is not checkable manually...

here is the code for that grid:

$('#user_profiles_grid').datagrid({
         url:'com/User_Info.cfc?method=getUserProfileData',
         method:'get',
         queryParams: {
            user_id: <cfoutput>#session.userDataStruct.user_id#</cfoutput>,
            profile_search_terms: ''
         },

         emptyMsg: "No Records Found",
         loadMsg: 'Loading&hellp;',
         idField:'user_profile_id',
         toolbar: '#profileSearch',
         width: 980,
         height: 500,
         border: false,
         fit: true,
         singleSelect:true,
         checkOnSelect: false,
         selectOnCheck: false,
         scrollOnSelect: true,
         fitColumns: true,
         nowrap: true,
         autorowheight: true,
         striped: true,
         rownumbers: false,
         sortable: true,
         sortOrder: 'asc',
         remoteSort:false,
         halign: 'center',

         onBeforeCheck: function(index, row){
            $(this).datagrid('clearChecked');
            $(this).datagrid('selectRow', index);
         },
         onLoadSuccess:
            function (data) {
               for (var i = 0; i < data.rows.length; ++i) {
                  if (data.rows['user_profile_id'] == <cfoutput>#session.userDataStruct.current_profile_id#</cfoutput>){
                        $(this).datagrid('checkRow', i);
                  }
               }
            },
         onDblClickRow:
            function(index, row){
               var user_id = row['user_id'];
               var profile_id = row['user_profile_id'];
               //alert('user_id ' + user_id + ' profile_id ' + profile_id)
               changeProfile(user_id,profile_id,1);
            },
         columns:[[
            { field: 'user_profile_id', align: 'center', checkbox: true },
            {title: 'Name', field:'name',width: 200, align: 'center', sortable: true},
            {title: 'Email', field:'email', width: 150, align: 'center', sortable: true },
            {title: 'Region', field:'region',width: 200, align: 'center', sortable: true },
            {title: 'Role', field:'role',width: 250, align: 'center', sortable: true },
            {title: 'Last Login', field:'last_login',width: 100, align: 'center', sortable: true }
         ]]
      });


Hope you can fix this 3rd problem for me...I think that is all the issues we have with grids and checkboxes and selecting rows...

thanks again
dan

[jarry]

Some errors occur in your code.

Code:

onLoadSuccess:
   function (data) {
      for (var i = 0; i < data.rows.length; ++i) {
         if (data.rows['user_profile_id'] == <cfoutput>#session.userDataStruct.current_profile_id#</cfoutput>){
               $(this).datagrid('checkRow', i);
         }
      }
   },

Please replace it with:

Code:

onLoadSuccess:
   function (data) {
      for (var i = 0; i < data.rows.length; ++i) {
         if (data.rows[i]['user_profile_id'] == <cfoutput>#session.userDataStruct.current_profile_id#</cfoutput>){
               $(this).datagrid('checkRow', i);
         }
      }
   },

Additionally, this code isn't clear. Why do you clear all the checkbox and select it again. Please try to remove it from your code.

Code:

onBeforeCheck: function (index, row) {
	$(this).datagrid('clearChecked');
	$(this).datagrid('selectRow', index);
},

[fmdano]

Hey,
This may have fixed my issue...It is great to have someone with tons of JEasyUI experience view the code and see what might be causing the issue...I am going to do some more testing and have my other developers do testing as well, but this might have fixed our issues...

Dan