EasyUI Forum
September 13, 2025, 02:43:35 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Propertygrid and toggle buttons  (Read 7445 times)
Fabrice
Jr. Member
**
Posts: 62


View Profile
« on: August 30, 2014, 08:53:45 AM »

In a propertygrid i wouldlike to show icon-ok or icon-cancel in place of boolean value, it work's fine with a formatter. i want an editor with two buttons, first with icon-ok and second with icon-cancel and want the editor 'endEdit' automatically when user click on one of these two buttons.
How can i do this?
Logged
Fabrice
Jr. Member
**
Posts: 62


View Profile
« Reply #1 on: August 31, 2014, 01:15:44 AM »

I find this solution :
 
Code:
$.extend($.fn.datagrid.defaults.editors, {
        toggle: {
            init: function (container, options) {
                var input1 = "<a id='toggle_on' name='" + options.on.toString() + "' href='#' class='easyui-linkbutton' onclick='btntoggle_click()' data-options=\"toggle:true,group:'g1',iconCls:'icon-ok'\">Yes</a>";
                var input2 = "<a id='toggle_off' name='" + options.off.toString() + "' href='#' class='easyui-linkbutton' onclick='btntoggle_click()' data-options=\"toggle:true,group:'g1',iconCls:'icon-cancel'\">No</a>";
                var div = '<div style="padding:5px 0;">' + input1 + input2 + '</div>';
                var btn = $(div).appendTo(container);
                container.find('a.easyui-linkbutton').linkbutton();
                return btn;
            },
            getValue: function (target) {
                var options = $('#toggle_on').linkbutton('options');
                if (options.selected == true)
                    return $('#toggle_on')[0].name;
                return $('#toggle_off')[0].name;
            },
            setValue: function (target, value) {
                if (value == $('#toggle_on')[0].name)
                    $('#toggle_on').linkbutton('select');
                else
                    $('#toggle_off').linkbutton('select');
            },
        }
    });

function btntoggle_click(e) {
        setTimeout(function () {
            $(document).trigger('mousedown');
        }, 0);
    }

function formatter_toggle(value, row, index) {
    if (value==true) {
            return '<img src="assets/easyui/themes/icons/ok.png">';
}
else {
            return '<img src="assets/easyui/themes/icons/cancel.png">';
    }
}

Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!