EasyUI Forum
July 17, 2024, 09:59:46 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: [1] 2 3 ... 5
1  General Category / EasyUI for Vue / EasyUI and Vue 3.x on: August 14, 2023, 12:13:37 PM
Greetings! Will any EasyUI component for Vue work with my Vue 3.x app? Thanks in advance!
2  General Category / EasyUI for jQuery / Re: Loading combogrid columns in datagrid onShowPanel event on: November 05, 2022, 04:35:30 AM
Regretfully this does not help me. I'm aware of this way to assign combogrid columns where I'm looking for a dynamic way using onShowPanel. Later I will put an AJAX call to the server getting the combogrid columns. Please provide an answer using onShowPanel as in my first example to set the columns.
3  General Category / EasyUI for jQuery / Loading combogrid columns in datagrid on: October 30, 2022, 02:43:42 PM
Hi,

Please help loading combogrid columns inside onShowPanel event like attached example.

When clicking any product combobox, there should be a dropdown panel with 3 columns and pagination and this is not occuring for me.

https://jsfiddle.net/79ubm42f/

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin:20px 0;"></div>
<div id="dg"></div>



<script type="text/javascript">

$('#dg').datagrid({
iconCls: 'icon-edit',
singleSelect: true,
onClickCell: onClickCell,
onEndEdit: onEndEdit,
columns: [[{ field: 'itemid', title: 'Item ID', width: 80 }
, {
field: 'productid',
title: 'Product',
width: 100,
formatter: function (value, row) { return row.productname; },
editor: {
type: 'combogrid', options: {
panelWidth: 450
, valueField: 'productid',
textField: 'productname',
required: true,
onShowPanel: function () {
$(this).combogrid({
columns: [[{ field: 'field1', title: 'field1', width: 80 }, { field: 'field2', title: 'field2', width: 80 }, { field: 'field3', title: 'field3', width: 80 }]]
, pagination: true
});
}
}
}
},
{ field: 'listprice', title: 'listprice', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 2 } } }
, { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 2 } } }
, { field: 'attr1', title: 'attr1', width: 250, editor: 'textbox' }
, { field: 'status', title: 'status', width: 60, align: 'center', editor: { type: 'checkbox', options: { on: 'P', off: '' } } }
]]
, data: [
{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": "10.00", "status": "P", "listprice": "36.50", "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": "12.00", "status": "P", "listprice": "18.50", "attr1": "Spotted Adult Female", "itemid": "EST-10" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "38.50", "attr1": "Venomless", "itemid": "EST-11" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "26.50", "attr1": "Rattleless", "itemid": "EST-12" },
{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": "12.00", "status": "P", "listprice": "35.50", "attr1": "Green Adult", "itemid": "EST-13" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "158.50", "attr1": "Tailless", "itemid": "EST-14" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "83.50", "attr1": "With tail", "itemid": "EST-15" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "23.50", "attr1": "Adult Female", "itemid": "EST-16" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "89.50", "attr1": "Adult Male", "itemid": "EST-17" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": "92.00", "status": "P", "listprice": "63.50", "attr1": "Adult Male", "itemid": "EST-18" }
]
});


function onClickCell(index, field) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
if (ed) {
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function () {
$('#dg').datagrid('selectRow', editIndex);
}, 0);
}
}
}

var editIndex = undefined;

function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onEndEdit(index, row) {
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
}


</script>
</body>
</html>

Thanks for advice!
4  General Category / EasyUI for jQuery / Ribbon extension to indicate selected "mother" tab when looking at another tab. on: September 16, 2022, 03:09:05 AM
Hi, I use ribbon extension and want the tab of the selected menu (mother tab) to indicate its current having that selection, when user looks at another tab (non mother tab).

So when the user selects a menu objects, it gets "selected". However when user clicks another tab, its no longer visible under witch tab the active and selected menu object is. Therefore it would be good to highlight the "mother tab" when a "non mother tab" gets selected. Possibly by changing the background colour of the "mother tab" or similar.  

Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ribbon - jQuery EasyUI</title>

<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

<link rel="stylesheet" type="text/css" href="ribbon.css">
<link rel="stylesheet" type="text/css" href="ribbon-icon.css">
<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',
id: 'paste',
text: 'Paste',
iconCls: 'icon-paste-large',
iconAlign: 'top',
size: 'large',
menuItems: [{
id: 'paste',
text: 'Paste',
iconCls: 'icon-paste'
}, {
id: 'paste-special',
text: 'Paste Special...',
iconCls: 'icon-paste'
}]
}, {
type: 'toolbar',
dir: 'v',
tools: [{
id: 'cut',
text: 'Cut',
iconCls: 'icon-cut'
}, {
id: 'copy',
text: 'Copy',
iconCls: 'icon-copy'
}, {
id: 'format',
text: 'Format',
iconCls: 'icon-format'
}]
}]
}, {
title: 'Editing',
dir: 'v',
tools: [{
type: 'splitbutton',
id: 'find',
text: 'Find',
iconCls: 'icon-find',
menuItems: [{
id: 'find',
text: 'Find',
iconCls: 'icon-find'
}, {
id: 'go',
text: 'Go to...',
iconCls: 'icon-go'
}]
}, {
id: 'replace',
text: 'Replace',
iconCls: 'icon-replace'
}, {
type: 'menubutton',
id: 'select',
text: 'Select',
iconCls: 'icon-select',
menuItems: [{
id: 'selectall',
text: 'Select All',
iconCls: 'icon-selectall'
}, {
id: 'select-object',
text: 'Select Objects',
iconCls: 'icon-select'
}]
}]
}]
}, {
title: 'Home2',
groups: [{
title: 'Clipboard2',
tools: [{
type: 'splitbutton',
id: 'paste2',
text: 'Paste2',
iconCls: 'icon-paste-large',
iconAlign: 'top',
size: 'large',
menuItems: [{
id: 'paste2',
text: 'Paste2',
iconCls: 'icon-paste'
}, {
id: 'paste-special2',
text: 'Paste Special2...',
iconCls: 'icon-paste'
}]
}, {
type: 'toolbar',
dir: 'v',
tools: [{
id: 'cut2',
text: 'Cut2',
iconCls: 'icon-cut'
}, {
id: 'copy2',
text: 'Copy2',
iconCls: 'icon-copy'
}, {
id: 'format2',
text: 'Format2',
iconCls: 'icon-format'
}]
}]
}]
}, {
title: 'Insert',
groups: [{
title: 'Table',
tools: [{
type: 'menubutton',
id: 'table',
text: 'Table',
iconCls: 'icon-table-large',
iconAlign: 'top',
size: 'large'
}]
}, {
title: 'Illustrations',
tools: [{
id: 'picture',
text: 'Picture',
iconCls: 'icon-picture-large',
iconAlign: 'top',
size: 'large'
}, {
id: 'clipart',
text: 'Clip Art',
iconCls: 'icon-clipart-large',
iconAlign: 'top',
size: 'large'
}, {
type: 'menubutton',
id: 'shapes',
text: 'Shapes',
iconCls: 'icon-shapes-large',
iconAlign: 'top',
size: 'large'
}, {
id: 'smartart',
text: 'SmartArt',
iconCls: 'icon-smartart-large',
iconAlign: 'top',
size: 'large'
}, {
id: 'chart',
text: 'Chart',
iconCls: 'icon-chart-large',
iconAlign: 'top',
size: 'large'
}]
}]
}]
};

$(function () {
$('#rr').ribbon({
data: data
, onClick: function (name, target) {
var selected = $('.l-btn-selected');
for (var obj of selected) {
console.log($(obj).linkbutton('options').id);
$(obj).linkbutton('unselect');
}
$('#' + $(target).linkbutton('options').id).linkbutton("select");
}
});

});



</script>
</head>
<body>
<div id="rr" style="width:100%;">
</div>
<div id="content" style="width:100%;">
</div>
</body>
</html>

Thanks for advice!
5  General Category / EasyUI for jQuery / Re: How-to render plugin-objects in a table on: September 10, 2022, 01:46:57 AM
Yes thats works. Many thanks for this fine help! Smiley
6  General Category / EasyUI for jQuery / How-to render plugin-objects in a table on: September 05, 2022, 11:34:41 PM
Hello,

I need to render different plugins ordered as table within a layout panel and below you find an example.

The expected outcome is a center layout with a 3x3 table with cells like so:

row:1,col:2 panel test1 containing a propertygrid
row:2,col:3 panel test2
row:3,col:1 propertygrid test3

https://jsfiddle.net/uvLrtgpm/#&togetherjs=1OS43x2rsx

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="pg">pg</div>

<script type="text/javascript">

(function ($) {
$.fn.myeasyUI = function (opts) {
var ret = main(opts, this);
return ret;
};

function main(opts, $element) {
if (!opts || !opts.plugin) { return $element; }
try {
$element[opts.plugin](opts.plugincontent);
} catch (error) {
console.log(error);
var c = $('<div/>').appendTo($element);
$element.text('aaaa');
}


if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin == 'layout') {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div></div>').appendTo(p);
} else if (opts.plugin == 'panel') {
var c = $('<div></div>').appendTo($element);
c.panel(o);
}
main(o, c);
});
}
return $element;
}

$.fn.table = function (opts) {
var table = $('<table/>', { border: 1, width: '100%' });
for (i = 0; i < opts.rows; i++) {
var row = $('<tr/>');
for (ii = 0; ii < opts.cols; ii++) {
var content = opts.tablecontent.filter(function (obj) { return obj.row === i && obj.col === ii; })[0];
var dat = $('<td/>', { width: 1 / opts.cols * 100 + '%' });
if (content) {
var c = $('<div/>').appendTo(dat);
main(content, c);
}
row.append(dat);
}
table.append(row);
}
$(this).append(table);
return this;
};

})(jQuery);

var data = { total: 7, 'rows': [{ name: 'Name', value: 'Bill Smith', group: 'ID Settings', editor: 'text' }, { name: 'Address', value: '', group: 'ID Settings', editor: 'text' }, { name: 'Age', value: '40', group: 'ID Settings', editor: 'numberbox' }, { name: 'Birthday', value: '01/02/2012', group: 'ID Settings', editor: 'datebox' }, { name: 'SSN', value: '123-456-7890', group: 'ID Settings', editor: 'text' }, { name: 'Email', value: 'bill@gmail.com', group: 'Marketing Settings', editor: { type: 'validatebox', options: { validType: 'email' } } }, { name: 'FrequentBuyer', value: false, group: 'Marketing Settings', editor: { type: 'checkbox', options: { on: true, off: false } } }] }

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'table', plugincontent: {
rows: 3, cols: 3
, tablecontent: [
{ id: 'test1', row: 0, col: 1, plugin: 'panel', plugincontent: { fit: false, height: 100, width: 300, title: 'test1', plugin: 'propertygrid', plugincontent: { fit: true, showGroup: true, data: data } } }
, { id: 'test2', row: 1, col: 2, plugin: 'panel', plugincontent: { fit: false, height: 100, width: 300, title: 'test2' } }
, { id: 'test3', row: 2, col: 0, plugin: 'propertygrid', plugincontent: { title: 'test3', fit: true, showGroup: true, data: data } }
]
}
}]
});

</script>
</body>
</html>


However propertygrid test3 is not getting rendered.

Please advice how to render any easyUI component in a table.

Many thanks in advance!
7  General Category / EasyUI for jQuery / Re: EasyUI components rendered by JSON on: September 05, 2022, 11:32:20 PM
Hi poeziafree,

Yes, this is an interesting plugin to work with and I'm yet only experimenting what can be the use. Lets see and revert when something can be shown.


BR
8  General Category / EasyUI for jQuery / Re: Stacked panels in json rendered layout on: September 02, 2022, 02:40:03 PM
Hi Jarry,

When resizing the browser window, propertygrid should follow and currently id does not. When adding fit:true something odd happens to the height of the panels. Please have a look at the following code example:

https://jsfiddle.net/47qjuvcx/1/

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="pg">pg</div>

<script type="text/javascript">

(function ($) {
$.fn.myeasyUI = function (opts) {
var ret = main(opts, this);
return ret;
};

function main(opts, $element) {
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);

if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin == 'layout') {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div>').appendTo(p);
} else if (opts.plugin == 'panel') {
var c = $('<div></div>').appendTo($element);
c.panel(o);
}

main(o, c);

// $element[opts.plugin]()

});
}
return $element;
}

})(jQuery);

var data = { "total": 7, "rows": [{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" }, { "name": "Address", "value": "", "group": "ID Settings", "editor": "text" }, { "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" }, { "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" }, { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" }, { "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": { "type": "validatebox", "options": { "validType": "email" } } }, { "name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": { "type": "checkbox", "options": { "on": true, "off": false } } }] }

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ fit: true , title: 'Panel1', width: '100%', height: 200, plugin: 'propertygrid', plugincontent: { data: data } },
{ fit: true, title: 'Panel2', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } },
{ fit: true, title: 'Panel3', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } }
]
}]
});

</script>
</body>
</html>
Please advice how to get the panel and property grid to follow the browser with.

Many thanks in advance!
9  General Category / EasyUI for jQuery / Re: Stacked panels in json rendered layout on: August 31, 2022, 08:35:53 AM
Hi Jarry,

That code produces the stacked panels however panel content can't be rendered. Recursion by main(o, c) is left out.

In this example there's an added propertygrid to each of the tree panels. Expected outcome is three stacked panels containing a property grid each like so:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="pg">pg</div>

<script type="text/javascript">

(function ($) {
$.fn.myeasyUI = function (opts) {
var ret = main(opts, this);
return ret;
};

function main(opts, $element) {
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);

if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin == 'layout') {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div>').appendTo(p);
main(o, c);
} else if (opts.plugin == 'panel') {
var p = $('<div></div>').appendTo($element);
p.panel(o);
} else {
main(o, c);
}

// main(o, c);

// $element[opts.plugin]()

});
}
return $element;
}

})(jQuery);

var data = { "total": 7, "rows": [{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" }, { "name": "Address", "value": "", "group": "ID Settings", "editor": "text" }, { "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" }, { "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" }, { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" }, { "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": { "type": "validatebox", "options": { "validType": "email" } } }, { "name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": { "type": "checkbox", "options": { "on": true, "off": false } } }] }

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ title: 'Panel1', width: '100%', height: 200, plugin:'propertygrid', plugincontent: { data: data }},
{ title: 'Panel2', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } },
{ title: 'Panel3', width: '100%', height: 150, plugin: 'propertygrid', plugincontent: { data: data } }
]
}]
});

</script>
</body>
</html>


Please propose how to render also the propertygrid into the panels.

Thanks' in advance for help!
10  General Category / EasyUI for jQuery / Stacked panels in json rendered layout on: August 29, 2022, 04:03:54 PM
Hello,

In this example I use JSON rendering a layout where expected outcome is tree stacked panels (Panel1,Panel2,Panel3) in the "center" layout like so:

https://jsfiddle.net/wqdLef8r/#&togetherjs=HeSQ1cLuLE

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="pg">pg</div>

<script type="text/javascript">

(function ($) {
$.fn.myeasyUI = function (opts) {
var ret = main(opts, this);
return ret;
};

function main(opts, $element) {
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);

if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
if (opts.plugin == 'layout') {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div>').appendTo(p);
} else if (opts.plugin == 'panel') {
var p = $element[opts.plugin](o);
}

main(o, c);

$element[opts.plugin]()

});
}
return $element;
}

})(jQuery);

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'center', title: 'center layout', split: true, plugin: 'panel', contentarray: [
{ title: 'Panel1', width: '100%', height: 200 },
{ title: 'Panel2', width: '100%', height: 150 },
{ title: 'Panel3', width: '100%', height: 150 }
]
}]
});

</script>
</body>
</html>

However only the last panel is getting rendered. Please advise how can I get these panels stacked on top of each other?

Many thanks for your help!
11  General Category / EasyUI for jQuery / Re: EasyUI components rendered by JSON on: August 27, 2022, 12:44:41 PM
Hi Jarry,

Indeed that code works fine.

Many thanks for your valuable help!
12  General Category / EasyUI for jQuery / Re: EasyUI components rendered by JSON on: August 26, 2022, 01:09:37 PM
Hi Jarry,

Yes this works for layout however gives an error for tabs and accordion.

Following code has west, center and east regions. Its expected to give tabs and accordion with propertygrid in center and east but this gives an error.

https://jsfiddle.net/oc0wrzxq/#&togetherjs=s7RtukD3mi

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="pg">pg</div>

<script type="text/javascript">

var data = {
"total": 7, "rows": [
{ "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" },
{ "name": "Address", "value": "", "group": "ID Settings", "editor": "text" },
{ "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" },
{ "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" },
{ "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" },
{
"name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
"type": "validatebox",
"options": {
"validType": "email"
}
}
},
{
"name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": {
"type": "checkbox",
"options": {
"on": true,
"off": false
}
}
}
]
};

(function ($) {
$.fn.myeasyUI = function (opts) {
return main(opts, this);
};

function main(opts, $element) {
console.log(opts);
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);
if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
$element[opts.plugin]('add', o);
var p = $element[opts.plugin]('panel', o.region);
var c = $('<div></div>').appendTo(p);
main(o, c);
// $element[opts.plugin]('add', main(o, $element));
});
}
return $element;
}
})(jQuery);

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'west', width: '33%', title: 'west', split: true, plugin: 'propertygrid', plugincontent: { showGroup: true, scrollbarSize: 0, data:data }
}, {
region: 'center', title: 'center', split: true, plugin: 'accordion', plugincontent: {}, contentarray: [{ title: 'accordion1', height: 300, content: 'accordion1' }, { title: 'accordion2', height: 300, plugin: 'propertygrid', plugincontent: { showGroup: true, scrollbarSize: 0, data: data } }]
}, {
region: 'east', split: true, title: 'east', width: '33%', plugin: 'tabs', plugincontent: { fit: true, tabHeight: 20 }, contentarray: [{ title: 'tab1', content: 'tab1' }, { title: 'tab2', plugin: 'propertygrid', plugincontent: { showGroup: true, scrollbarSize: 0, data: data } }]

}]
});
</script>
</body>
</html>

Please advice how to get this to work for also tabs and accordions.

Many thanks for your help!
13  General Category / EasyUI for jQuery / EasyUI components rendered by JSON on: August 23, 2022, 05:30:14 AM
Hello,

I'm creating a recursive JSON to render a page with different easyUI components. In this example I use following JSON where expected outcome is a layout with "west" and "center" region that both has a propertygrid like so:

Code:
{
"plugin": "layout",
"plugincontent": { "fit": true },
"contentarray": [
{
"region": "west",
"split": true,
"title": "west",
"content": "west",
"width": "50%",
"plugin": "propertygrid",
"plugincontent": {
"url": "myeasyUI_propertygrid_data1.json",
"method": "get",
"showGroup": true,
"scrollbarSize": 0
}
},
{
"region": "center",
"height": "20%",
"title": "center",
"content": "center",
"split": true,
"plugin": "propertygrid",
"plugincontent": {
"url": "myeasyUI_propertygrid_data1.json",
"method": "get",
"showGroup": true,
"scrollbarSize": 0
}
}
]
}


This is my page code. I see it does the recursion however only the last propertygrid gets rendered.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic PropertyGrid</h2>

<div id="pg">pg</div>

<script type="text/javascript">

(function ($) {
$.fn.myeasyUI = function (opts) {
return main(opts, this);
};

function main(opts, $element) {
console.log(opts);
if (!opts || !opts.plugin) { return $element; }
$element[opts.plugin](opts.plugincontent);
if (opts.contentarray instanceof Object) {
$.each(opts.contentarray, function (i, o) {
$element[opts.plugin]('add', main(o, $element));
});
}
return $element;
}
})(jQuery);

$('#pg').myeasyUI({
plugin: 'layout'
, plugincontent: { fit: true }
, contentarray: [{
region: 'west', split: true, title: 'west', content: 'west', width: '50%', plugin: 'propertygrid', plugincontent: { url: 'myeasyUI_propertygrid_data1.json', method: 'get', showGroup: true, scrollbarSize: 0 }
}, {
region: 'center', height: '20%', title: 'center', content: 'center', split: true, plugin: 'propertygrid', plugincontent: { url: 'myeasyUI_propertygrid_data1.json', method: 'get', showGroup: true, scrollbarSize: 0 }
}]
});
</script>
</body>
</html>
https://jsfiddle.net/yh7uqjpz/#&togetherjs=249Mn2Trhh
Many thanks for your help!
14  General Category / EasyUI for jQuery / Re: Maximizing portal panel not working as expected on: January 21, 2021, 06:04:40 PM
I tested and getting the same result. Have double checked and it's using the latest  ver. 1.0.1.

What am I missing?
15  General Category / EasyUI for jQuery / Maximizing portal panel not working as expected on: January 17, 2021, 08:07:00 AM
Maximizing portal panel just gets a bit higher instead of getting maximized across the window.

How can I get portal panel to be maximized across the window?

I added
Code:
maximizable: true
to
Code:
$(function(){
$('#pp').portal({
border:false,
fit:true
});
add();
});
function add(){
for(var i=0; i<3; i++){
var p = $('<div/>').appendTo('body');
p.panel({
title:'Title'+i,
content:'<div style="padding:5px;">Content'+(i+1)+'</div>',
height:100,
closable:true,
collapsible: true,
maximizable: true
});
$('#pp').portal('add', {
panel:p,
columnIndex:i
});
}
$('#pp').portal('resize');
}
Please advice.
Pages: [1] 2 3 ... 5
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!