Recent Posts

[Uncaught TypeError: can't access property "jQuery3310104949804947211292" of undefined]

Code:

    $.extend($.fn.datagrid.defaults.filters, {
        tagbox: {
            init: function (container, options) {
                var input = $('<input>').appendTo(container);
                input.tagbox(options);
                return input;
            },
            getValue: function (target) {
                return $(target).tagbox('getValues');
            },
            setValue: function (target, value) {
                if (value) {
                    $(target).tagbox('setValues', value);
                } else {
                    $(target).tagbox('clear');
                }
            },
            resize: function (target, width) {
                $(target).tagbox('resize', width);
            }
        }
    });

Work but in delete tag - error Uncaught TypeError: can't access property "jQuery3310104949804947211292" of undefined

[Uncaught TypeError: can't access property "resize", this.filter is undefined]

Fix DataGrid Filter Row
1) Fix bug Uncaught TypeError: can't access property "resize", this.filter is undefined
2) Fix filterMenuIconCls is class eg. "far fa-check"

Hi.

Want to use the aicon on a tree/treegrid, as on buttons etc.

data.json
[
    {
        "id": 1,
        "text": "Text 1",
        "iconCls": "aicontest-testicon1",
        "children": [
            {
                "id": 2,
                "text": "Text",
                "iconCls": "aicontest-testicon2"
               }
        ]
    }
]

Then the treenodes just have the default icons

But if i create 2 buttons, they get the test1 and test2 icons

<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'aicontest-testicon1',width:80">Test1</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'aicontest-testicon2',width:80">Test2</a>


AND then the tree nodes also get the test1 and test2 icons. Like something not loading.


Need a quick fix if possible.

Regards Jesper

Works ;-)

Please override the 'blur' event handler.

Code:

$('#ROL_DUR').timespinner({
	showSeconds: false
	, value: ''
	, inputEvents: $.extend({}, $.fn.timespinner.defaults.inputEvents, {
		blur: (e) => {
			$.fn.timespinner.defaults.inputEvents.blur.call(this,e);
			console.log(">>> blur handler wurde getriggert");
		}
	})
});

Of course - me bad.
 

Please set the 'text-align:right' css style for the toolbar.

Code:

<div id="tb" style="text-align: right;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>

In this example I would like the toolbar to appear on the right hand side of the datagrid but I just cannot see how.
Can anybody point me in the right direction?
Many thanks

<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
        url="data/datagrid_data.json"
        title="DataGrid with Toolbar" iconCls="icon-save"
        toolbar="#tb">
    <thead>
        <tr>
            <th field="itemid" width="80">Item ID</th>
            <th field="productid" width="80">Product ID</th>
            <th field="listprice" width="80" align="right">List Price</th>
            <th field="unitcost" width="80" align="right">Unit Cost</th>
            <th field="attr1" width="150">Attribute</th>
            <th field="status" width="60" align="center">Stauts</th>
        </tr>
    </thead>
</table>
<div id="tb">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>

I have the following html:
<div class="col-md-3">
          <div class="form-group">
            <input class="easyui-timespinner form-control" style="width:100%;" id="ROL_DUR" label="Arbeitszeit:" labelPosition="top" required>
            <div class="invalid-feedback">Geben Sie die Dauer der Durchführung ein!</div>
            <!-- <div class="valid-feedback">Die Dauer der Durchführung wurde eingetragen</div> -->
          </div>
        </div>

in js I tried this:
 $('#ROL_DUR').timespinner({
         showSeconds: false
        ,value: ''
      });

    const cInputROL_DUR = $('#ROL_DUR').timespinner('textbox');
    console.log("textbox type:", cInputROL_DUR.prop("tagName"), "id:", cInputROL_DUR.attr("id"));
    console.log("--- cInputROL_DUR - length: " + cInputROL_DUR.length);

    if (cInputROL_DUR.length) {
      $('#ROL_DUR').timespinner('textbox').on('blur', function() {

        console.log(">>> blur handler wurde getriggert"); // Test

        const newValue = $('#ROL_DUR').timespinner('getValue');
        console.log("--- blur on ROL_DUR: " + newValue);

and this:

const realInput = $('#ROL_DUR').timespinner('textbox')[0]; // echtes <input>
if (realInput) {
  realInput.addEventListener('blur', function() {
    const newValue = $('#ROL_DUR').timespinner('getValue');
    console.log(">>> blur feuert! Wert:", newValue);

nothing works.

How can I implement a eventListener when the field is left by the cursor?

TriStateBox is a jQuery EasyUI component that renders a three-state selector (1/0/null) inside a standard textbox shell.

It preserves EasyUI labeling, sizing, and form behavior while replacing text input with three equal-width buttons.

Values map to Y, N, and ? with customizable labels via symY, symN, and symU.

Public API: getValue(), setValue(v), clear(), reset(), enable(), disable(), resize(w), destroy().

It normalizes JSON inputs (1, 0, null, '1', '0') and fires onChange(oldVal, newVal) on state changes.

Code:

$('#test').tristatebox({
  label: 'Label:'
, labelPosition: 'before'
, labelAlign: 'left'
, value: null
, onChange: function (o, n) { console.log('TriState change:', o, '→', n); }
});

Code:

$(`#test2`).tristatebox({
  value: 0
, symY: 'label Yes'
, symN: 'label No'
, symU: 'off'
});