I think you are looking for ChartJS

https://www.chartjs.org/

$('#cc1').combobox({
   onClick: function(record){
      //Change values in other comboboxes
                $('#cc1').combobox('setValue', record.value1);
                $('#cc2').combobox('setValue', record.value2);

               //Load new values in other comboboxes
               $('#cc1').datagrid({url:"yourscript.php?id="+record.id});

                //This can be json, php or set by your javascript code
   }
});

Refer demo
https://jeasyui.com/demo/main/index.php?plugin=ComboBox&theme=material-teal&dir=ltr&pitem=&sort=asc

Is it possible to have a datagrid fire an onClick event for the table editor when the combobox selects a record?
I would ideally like to access the record parameter like when using the combobox onClick event to access data to populate other fields?

Table definition

Code:

<table id="dg_plants" class="easyui-datagrid" name="dg_plants" title="Plants" toolbar="#tbr_plants" data-options="singleSelect:true, onClickCell:onClickCell, onEndEdit:onEndEdit, onBeforeEdit:onBeforeEdit, onAfterEdit:onAfterEdit, onCancelEdit:onCancelEdit" style="height:200px; width:100%" >
	<thead>
		<tr>
			<th data-options="field:'plantqty',width:60,align:'right',editor:{type:'numberspinner',options:{precision:0, min:1}}">Qty</th>
			<th data-options="field:'plantid',width:220,
					formatter:function(value,row){                                              
						return row.stockdesc;
					},
					editor:{
						type:'combobox',
						options:{
							valueField:'stockid',
							textField:'stockdesc',
							limitToList:true,
							url:'lib/src/_getstocksetup.php?catagoryid=1',
							required:true
						}
					}">Plant</th>
			<th data-options="field:'plantprice',width:70,align:'right',editor:{type:'numberbox',options:{precision:2}}">Price</th>
			<th data-options="field:'plant_unitcost', hidden:true">Unit</th>
		</tr>
	</thead>
</table>

Javascript

Code:

$('#dg_plants').datagrid({	
	onClickRow:function(index,row){		
		var ed = $(this).datagrid('getEditor', {index:editIndex, field:'plantid'});
		$(ed.target).combobox('textbox').bind('onClick',function(row){
			alert("Record clicked");
			/*
		}
		$(this).datagrid('beginEdit', index);
	}
});

I just made sure I have the latest jquerymin.3.3.1

The same behavior is shown with the examples here on this site so I do not think it is the version of jquery.

https://www.jeasyui.com/demo/main/index.php?plugin=PasswordBox&theme=material-teal&dir=ltr&pitem=&sort=asc

If I open that link on a Samsung S8 or S9 phone it produces the same strange behavior.
If I open on my PC then it works fine.
Numeric characters are OK, only alpha characters. I have not tried extended characters

I just had a look at the demo examples, and this behavior is the same.
Enter abcdefg into the password box, click on reveal password and it contains ababcabcdabcdeabcdefabcdefg

HI all,

I am wondering what I am doing wrong or what I have missed with this strange behavior.

I have a login screen that works perfectly fine on a PC using Chrome Browser.

When I try to login on a mobile device (specifically Samsung android using either Chrome or Internet Browser) I am getting the alpha characters duplicated/repeated. Numeric entry has no problem, but as soon as I start entering alpha characters in my password it starts to repeat previous alpha entries.
ie
user types 123456 for password, password box contains 123456
users types 123abc, it now contains 123aababc when I reveal the password.

If I enter with the reveal text displayed, it enters perfectly, but this is a little pointless for a password box.

Why is this behavior occurring?

Thanks stworthy, and yes the example works perfectly.

I tested mine again and same behaviour. The only difference was I had the functions in an externally linked js file
<script type="text/javascript" src="/lib/js/navigationtabs.js"></script>

When the addtab and onLoad/onSelect event handlers and functions are in this file, the tabs behaviour was peculiar.
When the 2 functions are placed into the main php page, everything works correctly just as your example.

Am I overlooking something here that explains why this is behaving in this manner. It seems like a variable scope issue.
I'm guessing that the addTab function sets an "index" variable that does not have scope to the rest of the tabs so after adding a new tab, it always thinks its tab index 1, thus the new tab is added at the end as expected, but then when it is selected as part of the addTab function it selects tab index 1(2nd tab).
When these 2 functions are placed into the html body of the page, it is now in scope and everything is fine.

To solve the issue, I have placed the functions there and everything is great.
Not sure if this is the intended behaviour of the tabs but thank you for your help.

That's working well now thanks, it fires the onLoad event and I can initialise the map object perfectly

..BUT...

Now this function is causing an unwanted behaviour.
After a tab is added, it ALWAYS selects tab index 1 (second tab). It does not matter what order or how many tabs are added, every time a new tab is added to the collection it loads, gets selected but then tab 1 gets selected immediately after load.

As soon as I remove the function, above, tabs behave correctly but of course I cannot use the onLoad event.

The following javascript logs to the console for each tab selected.
I do not get the onLoad event displayed in the console at all. Is there something that I am missing, I wanted to use the onLoad event to initialise a google map instance after tab has loaded. In the documentation it says "Fires when an ajax tab panel finish loading remote data." which is great. I just can't seem to get this to occur.

Am I missing something that should be obvious?

$('#tt').tabs({
   onLoad:function(title){
      console.log('onLoad '+title);            
   },
   onSelect:function(title){
      console.log('OnSelect '+title);            
   }   
})

I am having trouble getting the examples to work on how to add a tab dynamically and handle an event.
I have tried onLoad, onSelect, and placed these into the add tab function.
If somebody could please point me in the right direction of what I am doing wrong it would be greatly appreciated.

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

// add a new tab panel
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true
/*,
 onLoad:function(title){
   alert(title+' is loaded');
*/   
});