Solution.

Columns: from db (added opacity)

    {
        "field": "number",
        "styler": "columnColorStyler('ffcccc','0.5')",
        "title": "Number 1"
    },
    {
        "field": "number",
        "styler": "colColor",
        "styler": "columnColorStyler('c1ffc1','0.5')",
        "title": "Number 2"
    }


Then these 2 functions.

   function columnColorStyler(color,colorOpacity){
      return function(value){
            return 'background-color:'+hexToRGBA(color, colorOpacity)
      }
   }

   function hexToRGBA(hex, opacity) {
       return 'rgba(' + (hex).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
   }


With this, save an hex color and opacity to db for each column data

If you don't want opacity, use this only

   function columnColorStyler(color){
      return function(value){
            return 'background-color:'+color)
      }
   }

Hi.

Have problems finding a solution on this.

Populating datagrid with columns from database. The columns has individual colors depending on the type.

ajax call:
           success: function(data){
            data.forEach(col => {
               if (col.styler){
                  col.styler = eval(col.styler)
               }
            });
            $('#dgList').datagrid({
               columns:[data],
               title: data.titleName
            })
           }

Columns:

    {
        "field": "number",
        "align": "center",
        "styler": "colColor",
        "colorValue": "#ffcccc",
        "title": "Number 1",
        "formatter": "formatTooltip"
    },
    {
        "field": "number",
        "align": "center",
        "styler": "colColor",
        "colorValue": "#c1ffc1",
        "title": "Number 2",
        "formatter": "formatTooltip"
    }

But how to cell style the column based on this individual color

Found solution

var item = $('#menu_setup').menu('findItem', {id:'objID'});
$('#menu_setup').menu('setText', {
   target: item.target,
   text: 'New Text'
})

Or if you want så search by name

var item = $('#menu_setup').menu('findItem', {name:'xxx'});

Looking for a way to change the text dynamicaly

<div id="menu_setup" class="easyui-menu">
   <div id="upload" data-options="iconCls:'icon-upload'">
      <span>(1) Upload</span>
         <div>
            <div id="objID" data-options="iconCls:'icon-imageupload'">TEXT TO CHANGE</div>
         </div>
   </div>
</div>

Tried $('#objID').html('Changed text') and $('#objID').text('Changed text') whiuch both change the text but now there is no icon class and text starts from icon place. See attachement


Happy New Year

Jesper

Found the answer.

It was the onBeforeDrag and -drop i need to handle.

Hi. Have a panel with 100% width. When it expands, the site scrollbar goes over panel

See attached image 1 and 2

Hi jarry

Thanks for an sample. That was more easy than i thought.

But, it can only drag from player to team, not from team to player.

HI.

Have searched around but not found exact what i need.

Have a datagrid with players and 4 datagrids for teams.

Players dg have an ID, playerUUID and playerName column. Team dg has playerUUID and playerName columns

Want to drag from player to a team (and remove it from player). If placed wrong, drag it from team back to player. No dnd between teams.

Need it in a small project in 8 days. ;-)

Any help

Regards Jesper

Any help ??

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

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

Hi.

Need help with big problem. This code doesn't work on iphones safari or chrome or edge. On Samsung phones it works fine.

Have testet on easyui demo and this is same problem.

Any solution to get it to work on iphone

<header>
   <div class="m-toolbar">
      <div class="m-title">TEST</div>
      <div class="m-right">
         <a href="javascript:void(0)" class="easyui-menubutton" data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false"></a>
      </div>
   </div>
</header>

<div id="mm1" class="easyui-menu" style="width:200px;">
   <div data-options="iconCls:'icon-photo_portrait_16'" onclick="test()">Test</div>
</div>

Hi jarry.

Ohh i see. Just use the options

Thanks

Any help ??