The 'getValue' method returns the real value displaying on the editor. Please download the latest version from https://www.jeasyui.com/extension/texteditor.php.

This issue has been solved. Please download the latest version from https://www.jeasyui.com/extension/datagrid_filter.php.

This is the possible solution for maskedbox.

1. Extend a new validation type.

Code:

$.extend($.fn.validatebox.defaults.rules, {
	notempty: {
		validator: function (value, param) {
			var opts = $(this).parent().prev().maskedbox('options');
			var tt = (value || '').split('');
			var vv = [];
			for (var i = 0; i < opts.mask.length; i++) {
				if (opts.masks[opts.mask[i]]) {
					var t = tt[i];
					vv.push(t != opts.promptChar ? t : '');
				}
			}
			return vv.join('') != '';
		},
		message: 'The field is required.'
	}
});

2. Attach it to the maskedbox.

Code:

<input id="mb" validType="notempty" class="easyui-maskedbox" mask="(999) 999-9999" label="Phone Number:"
				labelPosition="top" style="width:100%">

The 'onClose' event handler can be attached into the html markup.

Code:

<script>
		function onDialogClose(){
			console.log('dialog closed')
		}
</script>
<div id="dlgEditVehicle" class="easyui-dialog" data-options="buttons:'#buttons',closed:true,resizable:true,onClose:onDialogClose"
		style="width:500px;height:200px;padding:20px;">
...
</div>

Please look at this code, it works fine.

Code:

    <div style="width:300px;display:flex;">
        <div style="margin:2px;flex:1;overflow: hidden;border:1px solid red;">
          <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
        <div style="margin:2px;flex:1;overflow: hidden;border:1px solid blue;">
            <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
    </div>

Please call this code instead.

Code:

    <div style="width:800px;display:flex;">
        <div style="margin:2px;flex:1;border:1px solid red;">
          <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
        <div style="margin:2px;flex:1;border:1px solid blue;">
            <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
    </div>

The extended operators can be made to filter multiple values in the rows.

Code:

$.extend($.fn.datagrid.defaults.operators, {
    mcontains:{
        text:'Contains',
        isMatch:function(source,value){
            const vv = value.split(',').filter(r=>r);
            for(let i=0; i<vv.length; i++){
                const v = vv[i];
                if (source.indexOf(v) >= 0){
                    return true;
                }
            }
            return false;
        }
    }
})

This new operator can be applied to a filter input.

Code:

$('#dg').datagrid('enableFilter', [
                {
                    field:'Users',
                    type:'textbox',
                    op:['equal','mcontains']
                },
...

Call this code to load the email address of the first item.

Code:

$('#fm').form('load',{email:data[0].Email});

This is the extended methods.

Code:

$.extend($.fn.radiogroup.methods, {
	disable: function(jq){
		return jq.each(function(){
			$(this).find('.radiobutton-f').radiobutton('disable');
		})
	},
	enable: function(jq){
		return jq.each(function(){
			$(this).find('.radiobutton-f').radiobutton('enable');
		})
	}
})

Usage example:

Code:

$('#formModMold .mChamberType').radiogroup('disable');

The combobox component can be attached to the toolbar. Please refer to the code below. Make sure to download the latest version.

Code:

var toolbar = [{
	text:'Add',
	iconCls:'icon-add',
	handler:function(){alert('add')}
},{
	text:'Cut',
	iconCls:'icon-cut',
	handler:function(){alert('cut')}
},'-',{
	text:'Save',
	iconCls:'icon-save',
	handler:function(){alert('save')}
},'-',{
	type:'combobox',
	data:[{value:'1',text:'text1'},{value:'2',text:'text2'}],
	editable:false,
	onChange:function(value){
		alert(value)
	}
}];

All the major browsers including IE11 are compatible with easyui package.

Please extend a new operator to filter multiple values.

Code:

$.extend($.fn.datagrid.defaults.operators, {
    mequal: {
        text: 'Equal',
        isMatch: function (source, value) {
            const vv = value.split(',');
            const index = vv.indexOf(source);
            return index != -1;
        }
    }
})

And then apply it to your code.

Code:

onChange: function (value) {
    if (value == '') {
        dg_HW.datagrid('removeFilterRule', 'Year');
    } else {
        dg_HW.datagrid('addFilterRule', {
            field: 'Year',
            op: 'mequal',
            value: value.join(',')
        });
    }
    dg_HW.datagrid('doFilter');
}

This code shows how to swap two rows in a datagrid.

Code:

var index1 = 2;
var index2 = 3;
var dg = $('#dg');
var rows = dg.datagrid('getRows');
var temp = rows[index1];
rows[index1] = rows[index2];
rows[index2] = temp;
dg.datagrid('refreshRow',index1);
dg.datagrid('refreshRow',index2);

Please refer to this example.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>ComboBox - 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>
		$(function () {
			var cc = $('#cc');
			cc.combobox({
				onChange: function (v) {
					var g = $(this).next().find('.combobox-g');
					var data = cc.combobox('getData');
					var index = data.findIndex(r => r.value == v);
					if (index >= 0) {
						g.html(data[index].text);
					} else {
						g.html('');
					}
				},
				onResize: function () {
					var width = cc.combobox('textbox').css('width');
					$(this).next().find('.combobox-g').css('width', width);
				}
			})
			var tb = cc.combobox('textbox').hide();
			var t = $('<div style="display:inline-block;height:28px;padding-top:6px;vertical-align:top"></div>').addClass('combobox-g').insertAfter(tb);
			cc.combobox('resize');
		})
	</script>
</head>

<body>
	<input id="cc" name="LineWidth" style="width:200px;" data-options="
   required: true,
   panelHeight: 'auto',
   editable: false,
   valueField: 'value',
   textField: 'text',
   value: '',
   data: [
      { value:'0', text:'<hr style=&quot;border-top: 0px solid&quot;>' },
      { value:'1', text:'<hr style=&quot;border-top: 1px solid&quot;>' },
      { value:'2', text:'<hr style=&quot;border-top: 2px solid&quot;>' },
      { value:'3', text:'<hr style=&quot;border-top: 3px solid&quot;>' },
      { value:'4', text:'<hr style=&quot;border-top: 4px solid&quot;>' },
      { value:'5', text:'<hr style=&quot;border-top: 5px solid&quot;>' }
   ]
">
</body>

</html>

Please call the 'textbox' method to get the inputing box and then set its 'inputmode' attribute.

Code:

var input = $('#tt').textbox('textbox');
input.attr('inputmode','none');