 Show Posts
|
|
Pages: 1 [2] 3 4 5
|
|
18
|
General Category / EasyUI for jQuery / Listen to a change in propertygrid value
|
on: December 19, 2020, 09:25:03 AM
|
Is there a way to listen for a change of a value in propertygrid? In this case I want the grid report to the right to be refreshed when there is a change to the "From date". {
title: '', iconCls: 'stair-small'
, showGroup: true
, columns: [[
{ field: 'name', title: 'Name', width: 130, sortable: true }
, { field: 'value', title: 'Value', width: 130, resizable: true, align: 'left' }
]]
, data: {
"rows": [
{ name: "From date", value: nextdate, editor: "datebox" }
, { name: "User", value: '', editor: "" }
, { name: "FX-board members", group: 'Send changes via mail to', value: 'On', editor: { type: 'checkbox', options: { on: 'On', off: 'Off' } } }
, { name: "System-owners", group: 'Send changes via mail to', value: 'On', editor: { type: 'checkbox', options: { on: 'On', off: 'Off' } } }
, { name: "SC-controllers", group: 'Send changes via mail to', value: 'On', editor: { type: 'checkbox', options: { on: 'On', off: 'Off' } } }
]
}
}Many thanks for advice! |
|
|
|
|
19
|
General Category / EasyUI for jQuery / Re: Horizontal scroll in EasyUI Ribbon Extension
|
on: December 19, 2020, 09:06:26 AM
|
Absolutely, Here's a code example <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ribbon - jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="ribbon.css">
<link rel="stylesheet" type="text/css" href="ribbon-icon.css">
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.ribbon.js"></script>
<script type="text/javascript">
var data = {
selected:0,
tabs:[{
title:'Home',
groups:[{
title:'Clipboard',
tools:[{
type:'splitbutton',
name:'paste',
text:'Paste',
iconCls:'icon-paste-large',
iconAlign:'top',
size:'large',
menuItems:[{
name:'paste',
text:'Paste',
iconCls:'icon-paste'
},{
name:'paste-special',
text:'Paste Special...',
iconCls:'icon-paste'
}]
},{
type:'toolbar',
dir:'v',
tools:[{
name:'cut',
text:'Cut',
iconCls:'icon-cut'
},{
name:'copy',
text:'Copy',
iconCls:'icon-copy'
},{
name:'format',
text:'Format',
iconCls:'icon-format'
}]
}]
},{
title:'Font',
tools:[{
type:'toolbar',
tools:[{
type:'combobox',
valueField:'text',
textField:'text',
data:[{text:'Arial',selected:true},{text:'Century'},{text:'Tahoma'}],
width:100,
panelHeight:'auto',
editable:false
},{
type:'combobox',
valueField:'text',
textField:'text',
data:[{text:'8'},{text:'12',selected:true},{text:'14'}],
width:60,
panelHeight:'auto',
editable:false
}]
},{
type:'toolbar',
style:{marginLeft:'5px'},
tools:[{
name:'increase-font',
iconCls:'icon-increase-font'
},{
name:'decrease-font',
iconCls:'icon-decrease-font'
}]
},{
type:'toolbar',
style:{clear:'both',marginTop:'2px'},
tools:[{
name:'bold',
iconCls:'icon-bold',
toggle:true
},{
name:'italic',
iconCls:'icon-italic',
toggle:true
},{
name:'underline',
iconCls:'icon-underline',
toggle:true
},{
name:'strikethrough',
iconCls:'icon-strikethrough',
toggle:true
},{
name:'superscript',
iconCls:'icon-superscript',
toggle:true
},{
name:'subscript',
iconCls:'icon-subscript',
toggle:true
}]
},{
type:'toolbar',
style:{clear:'both'},
tools:[{
name:'case-font',
iconCls:'icon-case-font'
},{
name:'grow-font',
iconCls:'icon-grow-font'
},{
name:'shrink-font',
iconCls:'icon-shrink-font'
}]
}]
},{
title:'Paragraph',
dir:'v',
tools:[{
type:'toolbar',
tools:[{
name:'slign-left',
iconCls:'icon-align-left',
toggle:true,
group:'p1'
},{
name:'align-center',
iconCls:'icon-align-center',
toggle:true,
group:'p1'
},{
name:'align-right',
iconCls:'icon-align-right',
toggle:true,
group:'p1'
},{
name:'align-justify',
iconCls:'icon-align-justify',
toggle:true,
group:'p1'
}]
},{
type:'toolbar',
style:{marginTop:'2px'},
tools:[{
name:'bullets',
iconCls:'icon-bullets'
},{
name:'numbers',
iconCls:'icon-numbers'
}]
}]
},{
title:'Editing',
dir:'v',
tools:[{
type:'splitbutton',
name:'find',
text:'Find',
iconCls:'icon-find',
menuItems:[{
name:'find',
text:'Find',
iconCls:'icon-find'
},{
name:'go',
text:'Go to...',
iconCls:'icon-go'
}]
},{
name:'replace',
text:'Replace',
iconCls:'icon-replace'
},{
type:'menubutton',
name:'select',
text:'Select',
iconCls:'icon-select',
menuItems:[{
name:'selectall',
text:'Select All',
iconCls:'icon-selectall'
},{
name:'select-object',
text:'Select Objects',
iconCls:'icon-select'
}]
}]
}]
},{
title:'Insert',
groups:[{
title:'Table',
tools:[{
type:'menubutton',
name:'table',
text:'Table',
iconCls:'icon-table-large',
iconAlign:'top',
size:'large'
}]
},{
title:'Illustrations',
tools:[{
name:'picture',
text:'Picture',
iconCls:'icon-picture-large',
iconAlign:'top',
size:'large'
},{
name:'clipart',
text:'Clip Art',
iconCls:'icon-clipart-large',
iconAlign:'top',
size:'large'
},{
type:'menubutton',
name:'shapes',
text:'Shapes',
iconCls:'icon-shapes-large',
iconAlign:'top',
size:'large'
},{
name:'smartart',
text:'SmartArt',
iconCls:'icon-smartart-large',
iconAlign:'top',
size:'large'
},{
name:'chart',
text:'Chart',
iconCls:'icon-chart-large',
iconAlign:'top',
size:'large'
}]
}]
}]
};
$(function(){
$('#rr').ribbon({
data:data
});
});
</script>
</head>
<body>
<div id="rr" style="width:100%;">
</div>
</body>
</html> in witch I have with of ribbon set to 100% so it always on top as a nice ribbon. Pic 1 and 2 shows wide browser where ribbon follows the with nicely. In Pic 3 the ribbon breaks into 2 rows witch is what i want to prevent. In Pic 4 I simulate how the tabs plugin works with adding right and left scrolling option. A browser scroll might work but also that makes a line break so I have to scroll both horizontal and vertical. horizontal is OK but vertical not. Hope I managed to explain better now and sorry for being unclear earlier. |
|
|
|
|
21
|
General Category / EasyUI for jQuery / dialog as jquery popup function
|
on: November 07, 2020, 08:33:27 AM
|
I'm looking for a way to make jquery popup filling it with text, datagrid or any easyui plugin content. Code I want to write is: using(['my_popup', 'datagrid','propertygrid'], function () {
$.my_popup().datagrid({});
$.my_popup().propertygrid({});
$.my_popup().text({});
});
my_popup function looks like this: (function ($) {
jQuery.my_popup = function (opt) {
using(['dialog'], function () {
var ret = $('<div/>').dialog(opt);
});
return this;
};
})(jQuery);
however it does not display the datagrid, propertygrid or text in the popup but says $.my_popup(...).datagrid is not a function.Please advice. |
|
|
|
|
23
|
General Category / EasyUI for jQuery / DataGrid Filter-Row label text
|
on: September 27, 2020, 05:05:08 AM
|
Using the datagrid enableFilter I would like to add a text to the label, or actually a button. My code is now function dg_filter_bar(dg) {
if (!dg.length) { dg = get_dg_index(dg)[0] }
var dg_options = dg.datagrid('options');
if (dg.datagrid('isFilterEnabled')) {
dg.datagrid('removeFilterRule').datagrid('disableFilter').datagrid('reload');
return;
}
var cols = JSON.parse(JSON.stringify(dg_options.columns[0]));
cols.splice(0, 1);
cols.splice(cols.length - 1, 1);
///*
var zFilterRow = [];
$.each(cols, function (i, o) {
var options;
if (o.title === "" || o.field === "") { return true; }
options = dg_fld_options(dg, dg_options, o);
zFilterRow.push({
field: o.field
, type: 'combogrid'
, options: options
});
});
zFilterRow.push({ field: 'edt', type: 'label' });
zFilterRow.push({ field: 'men', type: 'label', text:'myLabelText' });
zFilterRow.push({ field: 'del', type: 'label' });
dg.datagrid('enableFilter', zFilterRow);
// */
} giving result as in attached pic. However my text "myLabelText" wont show-up. Thanks for advice! |
|
|
|
|
26
|
General Category / EasyUI for jQuery / Re: To close combogrid from toolbar
|
on: August 05, 2020, 07:00:05 AM
|
I just managed with the flowing code: , toolbar: [{ iconCls: 'menu-small' }, { text: "<div id='abc'>abc</div>" }, {
text: "x", onClick: function () {
var panel = $(this).closest('.combo-panel');
panel.panel("close");
}
}]Thanks and my apologies if disturbing :-) |
|
|
|
|
27
|
General Category / EasyUI for jQuery / To close combogrid from toolbar
|
on: August 05, 2020, 05:10:42 AM
|
I want to close my combogrid from a toolbar button (x). I found a way doing this by putting css('display', 'none'). However this way it's not possible to reopen combogrid without having the dropdown recreated. , toolbar: [{ iconCls: 'menu-small' }, { text: "<div id='abc'>abc</div>" }, {
text: "x", onClick: function () {
var el = $(this).closest('.combo-p');
el.css('display', 'none');
}
}]Any suggestions? |
|
|
|
|
30
|
General Category / EasyUI for jQuery / Propertygrid formatter function as in Datagrid
|
on: July 11, 2020, 02:25:04 PM
|
I use the formatter function in Datagrid to acomplish a visibility on NULL values like so and in the picture. toPush['formatter'] = function (value, row, index) {
if (value === null) {
return '<span style="background-color:rgba(255,255,0,0.2);">NULL</span>';
} else {
return value;
}
};
The row gets edited via a Propertygrid witch also inherits the formatter function from Datagrid. However NULL values are not any longer formatted by Propertygrid. How can I accomplish this formatting in Propertygrid? |
|
|
|
|
