Thanks a lot. Works fine.
I was unsure about how loadFilter() method works

Juan Antonio

Hello.
I have a server that respond to my ajax request with this format:

Code:

[ item1 , item2 , item3 ... ]

And I need to populate combobox.
So use this onLoadSuccess method:

Code:

      
<input class="easyui-combobox" name="domain" id="domain" style="width:90%;"
             data-options="
             url:'/webapp/services/serviceX',
             method:'get',
             valueField:'id',
             textField:'text',
             panelHeight:'auto',
             onLoadSuccess: function() {
              let res=[];
              data=$('#domain').combobox('getData');
              if( typeof(data[0].id)!=='undefined' ) return; // to avoid infinite onLoadSuccess recursion
              for(n=0;n<data.length;n++) { res.push( { 'id': n, 'text': data[n] }); }
              $('#domain').combobox('loadData',res);
             }
      ">

But seems too dirty. What's the right way to do this task?
Thanks in advance.
Juan Antonio

Works fine, but "showEye" facility is now lost :-(

Juan Antonio

Hi all,
I have a problem with passwordbox:

I need to make a video for a  webapp that uses easyui in client side
The problem: when typeing password data to acces framework, sometimes characters are visible in some videoframes, making password visible for everyone that watches it.

I've tried to set checkInterval and lastDelay to minimum values ( ¿4 msecs javascript's setTimeout()'s minimum val? ) and problem seems to reduce...but still persist: if I make the screen video capture in a system under heavy load, some frames on the video still contains typed characters

So I need a way to NOT show anyway typed characters in a passwordbox, but just show "*" with no delay at all

¿Is it possible?
Thanks in advance

Juan Antonio

Mmmmh doesn't work for me :-(. The problem is that $.messager.progress fires up an async task (timer) to handle its internals

Also, I use a global beforeSend options for every ajax calls to insert special headers, so no easy way of insert specific messages into each progress bar and/or omit them on ajax calls that doesn't need progressbar

This seems to work fine:

Code:

function doSomeThingWithAjax() {
    $.when( function() {
        $.messager.progress({height:75, text:'Working'}); 
    })
    .then( function() {
        $.ajax({
            type: 'GET',
            url: myUrl,
            data: { ...        },
            dataType: 'json',
            success: function (result) { .... },
            error: function() {....},
       });
    })
    .then( function() {
              $.messager.progress('close');
   });
}

Hello.
I think this is a classic problem, but don't know the right way to solve

Need to show a progressbar and hide it when an ajax call gets done (either success or fail).
In some scenarios ajax call finishes _before_ progressbar is shown, thus the progress bar never closes.
Whats the right way to write this code?

Code:

function doSomeThingWithAjax() {
    $.messager.progress({height:75, text:'Working'});
    $.ajax({
        type: 'GET',
        url: myUrl,
        data: { ...        },
        dataType: 'json',
        success: function (result) { .... },
        error: function() {....},
        complete: function() {
              $.messager.progress('close');
        }
    });
}

Thanks in advance
Juan Antonio

As interim solution i have this code. Not so elegant but...

Code:

function vwls_setAlphaOSD(alpha,tableid) {
    alpha=parseFloat(alpha);
    if (alpha<0.0) alpha=0.0; if (alpha>1.0) alpha=1.0;
    // store new value
    ac_config.ls_alpha=alpha;
    // change css to activate new value
    console.log ("new alpha is "+alpha);
    if (typeof(tableid)!=="undefined") {
        var rgb1=hexToRGB(ac_config.ls_rowcolor1);
        var rgb2=hexToRGB(ac_config.ls_rowcolor2);
        var a=parseFloat(ac_config.ls_alpha);
        $(".datagrid-btable tr:odd").css('background-color',"rgba("+rgb1.r+","+rgb1.g+","+rgb1.b+","+a+")");
        $(".datagrid-btable tr:even").css('background-color',"rgba("+rgb2.r+","+rgb2.g+","+rgb2.b+","+a+")");
    }
}

The only problem is that this code affects all datagrids. So need to properly insert #tableid into jquery selector.
Also this is not a rowStyler change, just a css one

So I ask again: what's the right way to change datagrid rowStyler in runtime?

Juan Antonio

Hi all.

I have a datagrid with own row styler:

Code:

/**
 * rowStyler function for livestream datagrids
 * @param {int} idx Row index
 * @param {object} row Row data
 * @return {string} proper row style for given idx
 */
function lsRowStyler(idx,row) {
	var c=( (idx&0x01)===0)?ac_config.ls_rowcolor1:ac_config.ls_rowcolor2;
	var rgb=hexToRGB(c);
	var a=parseFloat(ac_config.ls_alpha);
	return "background-color:rgba("+rgb.r+","+rgb.g+","+rgb.b+","+a+")";
}

Where ac_config stores several configuration parameters.

Additionaly I have an event driven method to change alpha:

Code:

function vwls_setAlphaOSD(alpha,dg) {
    alpha=parseFloat(alpha);
    if (alpha<0.0) alpha=0.0; if (alpha>1.0) alpha=1.0;
    // store new value
    ac_config.ls_alpha=alpha;
    // change css to activate new value
    // **** How can I do this?
    console.log ("new alpha is "+alpha);
    if (typeof(dg)!=="undefined") $(dg).datagrid('options').rowStyler=lsRowStyler;
}

What I want is repaint datagrid rows according new color alpha parameter, _without_ reloading entire datagrid

Is this possible?
If so, what's the right way to do

Thanks in advance
Juan Antonio

Works like a charm.
Thanks

BTW, perhaps it could be usefull to improve $.messager.progress by providing a method to ask progress to server and retrieve (and show) response into progress bar

Something like:

Code:

                $.messager.progress({
                    title: '<?php _e("Downloading");?>',
                    msg: '<?php _e("Downloading new version into server");?>: '+name+'-'+release,
                    interval: 2000, // ask server for progress every 2 seconds
                    callback: progressMonitor
                });
....
                function progressMonitor(){
                    $.ajax({
                        url:"/agility/server/adminFunctions.php",
                        dataType:'json',
                        data: {
                            Operation: 'progress',
                            Suffix: suffix
                        },
                        success: function(data) {
                            var value=data.progress;
                            if(value!=="Done"){
                                var bar=$.messager.progress('bar');
                                bar.progressbar('setValue', value);  // set new progress value
                                // setTimeout(progressMonitor,2000);
                            } else {
                                $.messager.progress('close');
                            }
                        }
                    });
                }

Hi all,
Is there any way to remove percent sign '%' from progress bar in $.messager.progress , to provide own messages?

Using jeasyui-1.4.2 ( too old, I know, but have some old plugins and... )

Thanks in advance
Juan Antonio

As aside note: this works for me:

Code:

dg.datagrid('moveField',{'head':1,'from':'Club',to:'Dorsal'});
var opts=dg.datagrid('options');
dg.datagrid(opts);

By redeclareing datagrid, header gets rendered as desired... but seems to me too heavy to redeclare and render datagrid every time that a column is changed, and not sure on collateral efects in dom tree

Juan Antonio

Hi all.

I have a (multirow header) datagrid whoose column ordering is context dependend.

Based on question about columns dnd:
http://www.jeasyui.com/forum/index.php?topic=279.0

I've extended datagrid in this way:

Code:

$.extend($.fn.datagrid.methods, {
    // move Field 'from' at header index 'head' before field 'to'
    moveField: function(jq,data){
        return jq.each(function(){
            var columns = $(this).datagrid('options').columns;
            var cc = columns[data.head];
            var c = _remove(data.from);
            if (c){
                _insert(data.to,c);
            }
            function _remove(field){
                for(var i=0; i<cc.length; i++){
                    if (cc[i].field == field){
                        var c = cc[i];
                        cc.splice(i,1);
                        return c;
                    }
                }
                return null;
            }
            function _insert(field,c){
                var newcc = [];
                for(var i=0; i<cc.length; i++){
                    if (cc[i].field == field){
                        newcc.push(c);
                    }
                    newcc.push(cc[i]);
                }
                columns[data.head] = newcc;
            }
        });
    }
}

Works fine... but header columns don't move, just datagrid content
Here comes a sample image capture:
after

Code:

dg.datagrid('moveField',{'head':1,'from':'Club',to:'Dorsal'});

you can see contents moved, but header remains unchanged

What am i missing? Any way to re-render datagrid header?

Thanks in advance
Juan Antonio

Works great, thanks.
Anyway to make sure new title is reflected in 'options', and to add as a dg method, i made a little change:

Code:

$.extend($.fn.datagrid.methods, {
    setTitle: function(jq,data) {  // data: { 'field':fieldname, 'title':newtitle }
        return jq.each(function() {
            // set datagrid 'options' array
            var cols=$(this).datagrid('options').columns[0]; // no extra headers in my code
            for (var n=0; n<cols.length;n++) {
                if (cols[n].field!==data.field) continue; // not found: continue
                cols[n].title=data.title; // found: set new title
                break; // no need to continue iteration
            }
            // change rendered layout
            var panel = $(this).datagrid('getPanel');
            var fld = $('td[field='+data.field+']',panel);
            if(fld.length) $('span', fld).eq(0).html(data.title);
        });
    }

});

Perhaps now not too much complicated elaborate a more generic 'setTitles' method :-)... but out of my scope.
Thanks for the code

Juan Antonio

Hi all,

I want to change the title in a datagrid column according context.
I've tried this code, but no luck:

Code:

function changeTitle(dg,field,title) {
  var cols=dg.datagrid('options').columns[0]; // no extra headers in my code
  for (var n=0; n<cols.length;n++) {
    if (cols[n].field!==field) continue; // not found: continue
    cols[n].title=title; // found: set new title
    break; // no need to continue iteration
  }
  dg.datgrid('fitColumns');
}

What am I doing wrong? What's the right way (tm) to change column title in a datagrid
Thanks in advance
Juan Antonio

!Fine!
Thanks for yout time.
Cheers

Juan Antonio