Print Page - Enable/disable checkbox on Combobox change in editable datagrid

Hello,

I have an editable Datagrid with (among others) a Combobox column and what's supposed to be a checkbox soon (the labassist one), and I want to enable or disable the checkbox individually for each row, depending on what is initially selected or gets selected in the Combobox.

Is this doable? I don't fully understand how to access both the Checkbox or Combobox later.

By the way, all rows from the datagrid are editable at the same time. I'm not sure whether thats important.
Code snippets:

Code:

$('#dg-manageruns').datagrid({
		onLoadSuccess: function(data) {
			for (var i=0; i<$(this).datagrid('getData').rows.length; i++) {
				$(this).datagrid('beginEdit', i);
			}
		},
		columns: [[
			{field: 'labassist', title: 'Assist', sortable: true, 
				formatter:function(value, row, index) { 
					return value==1 ? "X" : value==0 ? "" : value; 
				},
				// editor:{ (.............)
			},
			{field: 'setup', title: 'Setup', sortable: true, width:180, 
				editor:{
					type:'combobox', 
					options:{
						valueField:'id', textField:'setupname', data: listsetups, panelWidth:320, 
					}
				}
			},	
(...)

Thanks for any help.

This example shows how to build the cascade editors according to some logic.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/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 = [
			{ labassist: '1', setup: 'setup1', setupname: 'Setupname1' },
			{ labassist: '0', setup: 'setup2', setupname: 'Setupname2' },
			{ labassist: '1', setup: 'setup1', setupname: 'Setupname1' },
			{ labassist: '0', setup: 'setup4', setupname: 'Setupname4' },
			{ labassist: '0', setup: 'setup5', setupname: 'Setupname5' }
		];
		var listsetups = [
			{ id: 'setup1', 'setupname': 'Setupname1' },
			{ id: 'setup2', 'setupname': 'Setupname2' },
			{ id: 'setup3', 'setupname': 'Setupname3' },
			{ id: 'setup4', 'setupname': 'Setupname4' },
			{ id: 'setup5', 'setupname': 'Setupname5' }
		];
		$.extend($.fn.datagrid.defaults.editors, {
			check: {
				init: function (container, options) {
					var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
					input.checkbox(options || {});
					return input;
				},
				getValue: function (target) {
					return $(target).checkbox('options').checked ? '1' : '0';
				},
				setValue: function (target, value) {
					if (parseInt(value)) {
						$(target).checkbox('check');
					} else {
						$(target).checkbox('uncheck');
					}
				},
				resize: function (target, width) {
					$(target).next().css('height', 20);
				}
			}
		});
		$(function () {
			var dg = $('#dg-manageruns');
			dg.datagrid({
				columns: [[
					{
						field: 'labassist', title: 'Assist', align: 'center'
					},
					{
						field: 'setup', title: 'Setup', width: 180
					}
				]],
				data: data,
				singleSelect: true,
				onLoadSuccess: function (data) {
					for (var i = 0; i < $(this).datagrid('getData').rows.length; i++) {
						$(this).datagrid('beginEdit', i);
					}
				},
				onBeforeEdit: function (index, row) {
					var opts = $(this).datagrid('getColumnOption', 'labassist');
					opts.editor = {
						type: 'check',
						options: {
							value: row.labassist,
							checked: row.labassist == '1',
							disabled: row.setup != 'setup1'
						}
					}
					var opts = $(this).datagrid('getColumnOption', 'setup');
					opts.editor = {
						type: 'combobox',
						options: {
							value: row.setup,
							valueField: 'id', textField: 'setupname', data: listsetups, panelWidth: 320,
							limitToList: true,
							editable: false,
							onChange: function (value) {
								var tr = $(this).closest('.datagrid-row');
								var index = tr.attr('datagrid-row-index');
								setTimeout(function () {
									dg.datagrid('endEdit', index).datagrid('beginEdit', index);
								}, 0)
							}
						}
					}
				}
			})
		})

	</script>
</head>

<body>
	<table id="dg-manageruns" style="width:700px;height:250px"></table>

</body>

</html>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: iLLuSia on February 13, 2023, 08:06:00 AM