Print Page - Change background colour of a table cell in a treegrid with onClickCell

Title: Change background colour of a table cell in a treegrid with onClickCell
Post by: larryclyons on June 29, 2023, 08:36:13 AM

Greetings,

I'm relatively new to jEasyUI so I'm kind of stuck trying to figure out out to change the background colour to change on the onClickCell event or something similar.

I've tried a couple of different approaches using onClickCell and the jQuery .css() or the removeClass() and addClass() methods, but nothing seems to work. For instance, this approach, while it correctly displays an alert, the background colour doesn't change.

Code:

onClickCell: 
     function(index, row){
          alert(index);
          $(this).css("background-color", "red");
},

Any suggestions etc., would be very appreciated.

Title: Re: Change background colour of a table cell in a treegrid with onClickCell
Post by: jarry on June 30, 2023, 06:46:49 PM

Please define a 'styler' function for the columns to display the background color.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>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>
		var data = {
			"total": 7, "rows": [
				{ "id": 1, "name": "All Tasks", "begin": "3/4/2010", "end": "3/20/2010", "progress": 60, "iconCls": "icon-ok" },
				{ "id": 2, "name": "Designing", "begin": "3/4/2010", "end": "3/10/2010", "progress": 100, "_parentId": 1, "state": "closed" },
				{ "id": 21, "name": "Database", "persons": 2, "begin": "3/4/2010", "end": "3/6/2010", "progress": 100, "_parentId": 2 },
				{ "id": 22, "name": "UML", "persons": 1, "begin": "3/7/2010", "end": "3/8/2010", "progress": 100, "_parentId": 2 },
				{ "id": 23, "name": "Export Document", "persons": 1, "begin": "3/9/2010", "end": "3/10/2010", "progress": 100, "_parentId": 2 },
				{ "id": 3, "name": "Coding", "persons": 2, "begin": "3/11/2010", "end": "3/18/2010", "progress": 80 },
				{ "id": 4, "name": "Testing", "persons": 1, "begin": "3/19/2010", "end": "3/20/2010", "progress": 20 }
			], "footer": [
				{ "name": "Total Persons:", "persons": 7, "iconCls": "icon-sum" }
			]
		}

		function styler(value,row){
			const field = this.field;
			return (row['style']||{})[field];
		}
		$(function(){
			$('#tg').treegrid({
				onClickCell: function(field,row,index){
					row['style'] = row['style']||{}
					row['style'][field] = 'background:red;color:#fff';
					$(this).treegrid('refreshRow',row['id'])
				}
			})
		})
	</script>
</head>

<body>
	<table id="tg" title="TreeGrid" style="width:700px;height:250px" data-options="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				data: data,
				idField: 'id',
				treeField: 'name'
			">
		<thead>
			<tr>
				<th data-options="field:'name',width:180,styler:styler">Task Name</th>
				<th data-options="field:'persons',width:60,align:'right',styler:styler">Persons</th>
				<th data-options="field:'begin',width:80,styler:styler">Begin Date</th>
				<th data-options="field:'end',width:80,styler:styler">End Date</th>
			</tr>
		</thead>
	</table>
</body>

</html>

Title: Re: Change background colour of a table cell in a treegrid with onClickCell
Post by: larryclyons on July 17, 2023, 12:50:43 PM

Thanks Jarry. I'll give that a shot and let you know how it goes.

Title: Re: Change background colour of a table cell in a treegrid with onClickCell
Post by: fmdano on July 19, 2023, 04:43:39 AM

Hey guys,
working with Larry on this and in our Grid we put in the code above, but the refreshRow code does not seem to work.

$('#ourGridName').treegrid({
         url:'com/Administration.cfc?method=getWhatWeNeed',
         method:'get',
         width:'97%',
         idField:'id',
         treeField:'col0',
         emptyMsg: "No Records Found",
         border: true,
         fit: true,
         singleSelect:true,
         checkOnSelect: true,
         fitColumns: true,
         striped: true,
         rownumbers: false,
         collapsible: true,
         lines: true,

         onClickCell: function(field,row,index){

            row['style'] = row['style']||{};
               console.log(row);
               console.log('row id: ' + row['id']);
               console.log('row style field: ' + row['style'][field]);
               alert(row['id']);
               alert(row['style'][field]);
               if (row['style'][field] == 'background:red;color:#fff'){
                        row['style'][field] = 'background:green;color:#fff';
               } else if (row['style'][field] == 'background:green;color:#fff'){
                  row['style'][field] = 'background:red;color:#fff';
               } else {
                  row['style'][field] = 'background:red;color:#fff';
               }
               alert(row['style'][field]);

               $(this).treegrid('refreshRow',row['id'])

         },

         columns:[[ --- all our colum names and attributes below

The JSON that comes back from our external function is the same as what you have in the post, like:
var data = [
   { "id": 1, "name": "All Tasks", "begin": "3/4/2010", "end": "3/20/2010", "progress": 60, "iconCls": "icon-ok", "idField": 10 },
   { "idField": 11, "id": 2, "name": "Designing", "begin": "3/4/2010", "end": "3/10/2010", "progress": 100, "_parentId": 1, "state": "closed" }, and more..

MY QUESTION:
in the refreshRow line above, when we use row['id'] which is in the idField attribute, what is that ID Field and how does it work with the refreshRow code? we have an id field in our json code that returns.
That is my guess as to why our code is not working but your example code works....ANY THOUGHTS that could help us more forward would be awesome.
thanks
Dan

Title: Re: Change background colour of a table cell in a treegrid with onClickCell
Post by: larryclyons on July 25, 2023, 10:24:00 AM

Just bumping this up. Hey Jarry any answer to this?

Title: Re: Change background colour of a table cell in a treegrid with onClickCell
Post by: jarry on July 26, 2023, 07:53:20 PM

The 'idField' property in the treegrid component is required to identify a row node. While calling the 'refreshRow' or 'refresh' methods, the parameter should be passed with the identity field value.

Code:

$(this).treegrid('refreshRow',row['id']);
// or
$(this).treegrid('refresh',row['id']);

Title: Re: Change background colour of a table cell in a treegrid with onClickCell
Post by: larryclyons on July 31, 2023, 08:56:29 AM

Thanks Jarry, we'll give that a try.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: larryclyons on June 29, 2023, 08:36:13 AM