Title: Propertygrid and toggle buttons
Post by: Fabrice 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?
Title: Re: Propertygrid and toggle buttons
Post by: Fabrice on August 31, 2014, 01:15:44 AM
I find this solution : $.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">';
}
}
|