Recent Posts

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'
});

Please set the 'showEvent' property value to 'click'. This means that the menu won't show until the 'click' event is triggered.

Code:

<a href="javascript:void(0)" class="easyui-menubutton"
data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false,showEvent:'click'">
</a>

Hi Jarry.

It's excatly the same i do.

Problem is, when you go to the site on an  iphone, and click on menu button, the three dots, it open and close the menu again.

It doesn't work on iphone/ipad. Have tried it on both Safari and Chrome, same error

Try your demo/mobile demos/menu/basic. Same problem. Can't show menu on iphone/ipad