Print Page - insert icon dynamically and conditionally

Title: insert icon dynamically and conditionally
Post by: gordis gmbh on October 05, 2016, 12:33:29 AM

I am trying to insert an icon dynamically only to COMBOBOXES but the icon gets inserted to all the textboxes, dateboxes as well.
Also, the onLoadSuccess for combobox gets called twice.

Please see the attached screenshot and the problem-demo here: http://jsfiddle.net/tk19zpd0/14/

What am I doing wrong?

Thanks.

Title: Re: insert icon dynamically and conditionally
Post by: stworthy on October 05, 2016, 04:50:44 AM

The icons should be cloned before creating the combobox. Please look at this updated example http://jsfiddle.net/tk19zpd0/16/. It works fine.

Code:

var icons = $.extend([],opts.icons);
icons.unshift({
	iconCls:'icon-reload',
	handler: function(e){
		console.log('reload combobox..');
	}
});
$(cb).combobox({icons:icons});

Title: Re: insert icon dynamically and conditionally
Post by: gordis gmbh on October 05, 2016, 08:53:19 AM

OK, thanks very much for the clone tipp.

How can I extend the combobox plugin to get this refresh icon added by default to all the comboboxes including combobox-editors but EXCLUDING comboboxes in filter panel?

The idea is to have an event which will be called when reload icon is clicked. I have the event already defined:

Code:

$.fn.combobox.defaults = $.extend({}, $.fn.combobox.defaults, {
	onReloadIconClicked: function(cb) {
		$(cb).combobox('reload');
	}
});

// currently I am inserting the icon manually with the handler as follows:
function _insertRefreshIcon(cb) {
    var opts = cb.combobox('options');
  if(cb.hasClass('combobox-f') && opts.addRefreshIcon == true) {
	if(cb.parent().hasClass('datagrid-filter-c')) {
		return; // don't add refresh icon for filter comboboxes! 
  	}
    if(opts.icons.length == 0 || (opts.icons[0] && opts.icons[0].iconCls != 'icon-reload')) {
      	var icons = $.extend([],opts.icons);
    	icons.unshift({
    		iconCls:'icon-reload',
    		handler: function(e){
    			opts.onReloadIconClicked.call(this, cb);
    		}
    	});
    	$(cb).combobox({icons:icons});
    }
  }
}

Title: Re: insert icon dynamically and conditionally
Post by: gordis gmbh on October 10, 2016, 02:50:17 AM

When an icon is inserted in 'icons' array as shown above in function '_insertRefreshIcon', the combobox-data (locally or remote via url) gets loaded again.

Is there an alternate way to define the icons other than "$(cb).combobox({icons:icons});" so that the reloading of data can be avoided?

Thanks for looking into it.

Title: Re: insert icon dynamically and conditionally
Post by: stworthy on October 10, 2016, 08:58:34 AM

Please try to add this code to your page.

Code:

<style>
.datagrid-filter-c .combo .icon-reload{
    display: none;
}
</style>
<script type="text/javascript">
$.extend($.fn.combobox.defaults, {
    icons:[{
        iconCls: 'icon-reload',
        handler: function(){
            var combo = $(this).closest('.combo').prev();
            combo.combobox('reload');
        }
    }]
})
</script>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: gordis gmbh on October 05, 2016, 12:33:29 AM