When I add a toggle column to a grid with a search it does not appear to function. I have modified the Grid with Search Demo to include a toggle. But when I try to search on it the drop down just gives me an "Is" option and I cannot enter anything for the search clause.
searches: [
{ field: 'recid', caption: 'ID ', type: 'int' },
{ field: 'lname', caption: 'Last Name', type: 'text' },
{ field: 'fname', caption: 'First Name', type: 'text' },
{ field: 'email', caption: 'Email', type: 'list', options: { items: ['peter#gmail.com', 'jim#gmail.com', 'jdoe#gmail.com']} },
{ field: 'auth', caption: 'Auth', type: 'toggle' }
],
columns: [
{ field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
{ field: 'fname', caption: 'First Name', size: '31%', sortable: true },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'auth', caption: 'Auth', render: 'toggle', size: '20px' }
]
jsFiddle: https://jsfiddle.net/c9r6pk7m/4/
While toggle is a valid render value, it's not a valid searches type.
See: http://w2ui.com/web/docs/1.5/w2grid.searches
You could use list instead, though I must admit, I had to "cheat" with the false value, by mapping it to {id:"0", text: "No"}.
$(function () {
$('#grid').w2grid({
name: 'grid',
show: {
toolbar: true,
footer: true
},
multiSearch: true,
searches: [
{ field: 'recid', caption: 'ID ', type: 'int' },
{ field: 'lname', caption: 'Last Name', type: 'text' },
{ field: 'fname', caption: 'First Name', type: 'text' },
{ field: 'email', caption: 'Email', type: 'list', options: { items: ['peter#gmail.com', 'jim#gmail.com', 'jdoe#gmail.com']} },
{ field: 'auth', caption: 'Auth', type: 'list', options: { items: [{id:true, text: "Yes"}, {id:"0", text: "No"}]} }
],
columns: [
{ field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
{ field: 'fname', caption: 'First Name', size: '31%', sortable: true },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'auth', caption: 'Auth', render: 'toggle', size: '20px' }
],
records: [
{ recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe#gmail.com', auth: true },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe#gmail.com', auth: true },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'peter#gmail.com', auth: true },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jim#gmail.com', auth: true },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'peter#gmail.com', auth: true },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe#gmail.com', auth: true },
{ recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jim#gmail.com', auth: false },
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe#gmail.com', auth: false },
{ recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe#gmail.com', auth: false },
{ recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe#gmail.com', auth: false },
{ recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe#gmail.com', auth: false },
{ recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe#gmail.com', auth: false },
{ recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe#gmail.com', auth: false },
{ recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe#gmail.com', auth: false },
{ recid: 25, fname: 'Ben', lname: 'Gatos', email: 'peter#gmail.com', auth: true },
{ recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe#gmail.com', auth: true },
{ recid: 27, fname: 'Shashi', lname: 'Bahh', email: 'jim#gmail.com', auth: true },
{ recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jim#gmail.com', auth: true }
]
});
});
https://jsfiddle.net/c9r6pk7m/9/
Related
I try to make the pie chart show 'customized label',change label when the mouse triggered. But except blue data everything else will overlap with 'emphasis label'.
'avoidLabelOverlap' not working.
Is there way?
enter image description here
enter image description here
this is a example
var option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'center',
formatter: function (params) {
var html = 'TEST';
return html;
}
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
Finally,I find a method.
Use mouse event to change label in center.
<!DOCTYPE html>
<html lang="Zh-TW">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="main" style="width:600px;height:600px;">
</div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'Total',
textStyle: {
fontSize: 35,
},
x: 'center',
y: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Testname',
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '50%'],
avoidLabelOverlap: true,
textAlign: 'center',
label: {
normal: {
show: true,
formatter: function (params) {
return params.name+'\n'+params.percent+'%'
},
textStyle: {
fontSize: 20
},
},
},
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
},
{
name: 'Testname',
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '50%'],
avoidLabelOverlap: true,
textAlign:'center',
label: {
normal: {
show: true,
position: 'center',
formatter: '{b}\n{c}',
align: 'center',
verticalAlign: 'middle',
textStyle: {
fontSize: 0
},
},
emphasis:{
show: true,
textStyle: {
fontSize: 35,
fontWeight: 'bold'
},
formatter: '{b}\n{c}'
},
},
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
},
]
};
myChart.setOption(option);
myChart.on('mouseover', { seriesName: 'Testname' }, () => {
myChart.setOption({
title: {
show: false
}
})
})
myChart.on('mouseout', { seriesName: 'Testname' }, () => {
myChart.setOption({
title: {
show: true
}
})
})
</script>
</body>
</html>
Thanks for the accepted answer,
My case was series label was showing like you mentioned in question, and my need was to solve the same problem while hovering the mouse through legend.
Here is my addition.
// series name: Access From
labelOptionAlter = {
series: [
{ label: {
show: false,
position: 'center'
},
}
]
};
labelOptionDefault={
series: [
{ label: {
show: true,
position: 'center'
},
}
]
};
//similar to mouseover.
myChart.on('highlight', { seriesName: 'Access From' }, () => {
myChart.setOption(labelOptionAlter)
})
//similar to mouseout
myChart.on('downplay', { seriesName: 'Access From' }, () => {
myChart.setOption(labelOptionDefault)
})
Future scholars can read more here
I think there's no way to solve this problem.
I am currently updating ConsoleTvs / Charts 6 to 7. The chart is rendering with expected data.
The chart is not rendering according to any of the set options object keys for legend point style circle, padding top 50, display 'y' & 'x' axis labelString, not display gridlines, positioning datalabels at end with start offset in bold and green :
const chart = new Chartisan({
el: '#test_chart',
url: "#chart('test_chart_route')",
hooks: new ChartisanHooks()
.colors()
.datasets(
[
{ type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' },
{ type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
{ type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' },
{ type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' },
{ type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
{ type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' },
{ type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' },
{ type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
{ type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
{ type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' },
{ type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
{ type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
]
),
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 50,
bottom: 0
},
},
aspectRatio: 1,
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
position: 'top',
labels: {
usePointStyle: true,
fontSize: 12,
},
},
elements: {
point: {
pointStyle: 'circle',
}
},
scales: {
xAxes: [{
maxBarThickness: 120,
scaleLabel: {
display: true,
labelString: "xAxes_label"
},
gridLines: {
display: false
},
ticks: {
fontSize: 10,
maxRotation: 80,
minRotation: 80,
padding: 2
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "yAxes_label"
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: true,
fontSize: 10,
suggestedMin: 0
},
}],
},
plugins: {
datalabels: {
color: '#ff0a6c',
labels: {
title: {
font: {
weight: 'bold',
size: 11,
}
},
value: {
color: 'green'
}
},
formatter: function(value, context) {
return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
},
anchor: 'end',
align: 'start',
display: 'auto',
clamp: false
}
}
}
});
I have also tried using the ChartisanHooks().options({...options...}) method with no change in set options.
Can anyone please show me in the right direction?
Instead of using the options hook, you defined options as a property. You should use .options({ ... }) but not options: { ... }.
The options hook however doesn't work for me, maybe I use an outdated Chartisan library. According to Custom Hooks, you can also merge the options to the chart as follows:
.custom(function({ data, merge }) {
return merge(data, {
options: {
...
}
}),
})
Please take a look at your amended and runnable code below and see how it works with the merge function.
const chart = new Chartisan({
el: '#test_chart',
data: {
"chart": {
"labels": ["First", "Second", "Third"]
},
"datasets": [{
"name": "Sample 1",
"values": [10, 3, 7]
},
{
"name": "Sample 2",
"values": [1, 6, 2]
}
]
},
hooks: new ChartisanHooks()
.colors()
.datasets(
[{
type: 'line',
fill: false,
borderColor: '#329865',
backgroundColor: '#329865'
},
{
type: 'line',
fill: false,
borderColor: '#1e5b3c',
backgroundColor: '#1e5b3c'
}
]
)
.custom(function({ data, merge }) {
return merge(data, {
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 50,
bottom: 0
},
},
aspectRatio: 1,
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
position: 'top',
labels: {
usePointStyle: true,
fontSize: 12,
},
},
elements: {
point: {
pointStyle: 'circle',
}
},
scales: {
xAxes: [{
maxBarThickness: 120,
scaleLabel: {
display: true,
labelString: "xAxes_label"
},
gridLines: {
display: false
},
ticks: {
fontSize: 10,
maxRotation: 80,
minRotation: 80,
padding: 2
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "yAxes_label"
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: true,
fontSize: 10,
suggestedMin: 0
},
}],
},
plugins: {
datalabels: {
color: '#ff0a6c',
labels: {
title: {
font: {
weight: 'bold',
size: 11,
}
},
value: {
color: 'green'
}
},
formatter: function(value, context) {
return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
},
anchor: 'end',
align: 'start',
display: 'auto',
clamp: false
}
}
}
});
}),
});
<script src="https://unpkg.com/chart.js#2.9.4/dist/Chart.min.js"></script>
<script src="https://unpkg.com/#chartisan/chartjs#^2.1.0/dist/chartisan_chartjs.umd.js"></script>
<div id="test_chart" style="height: 300px;"></div>
I am trying to create custom rowGrouping using 'agGroupCellRenderer'. But but after creating new row group using row group panel drag feature, grid data disappears.
https://plnkr.co/edit/cGmrnc2LecpFhttY?preview
am trying to update columnDef
columnRowGroupChanged(event) {
this.columnDefs = [
{
headerName: 'Country',
minWidth: 200,
showRowGroup: 'country',
cellRenderer: 'agGroupCellRenderer',
},
{
headerName: 'Year',
minWidth: 200,
showRowGroup: 'year',
cellRenderer: 'agGroupCellRenderer',
},
{
headerName: 'athlete',
minWidth: 200,
showRowGroup: 'athlete',
cellRenderer: 'agGroupCellRenderer',
},
{
field: 'country',
rowGroup: true,
hide: true,
},
{
field: 'year',
rowGroup: true,
hide: true,
},
{
field: 'athlete',
rowGroup: true,
hide: true,
},
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
];
}
Check Attached Image
this.gridColumnApi.purgeInfiniteCache();
this.columnDefs = [
{
headerName: 'Country',
minWidth: 200,
showRowGroup: 'country',
cellRenderer: 'agGroupCellRenderer',
},
{
headerName: 'Year',
minWidth: 200,
showRowGroup: 'year',
cellRenderer: 'agGroupCellRenderer',
},
{
headerName: 'athlete',
minWidth: 200,
showRowGroup: 'athlete',
cellRenderer: 'agGroupCellRenderer',
},
{
field: 'country',
rowGroup: true,
hide: true,
},
{
field: 'year',
rowGroup: true,
hide: true,
},
{
field: 'athlete',
rowGroup: true,
hide: true,
},
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
];
}
I can’t seem to get the button role from ion-picker.
I need to know if it was ‘done’ or ‘cancel’.
Any ideas why this is?
I am just padding this out as stackoverflow is asking me to write some more details as my post is mostly code.
They data is just coming back as follows:
{data: undefined, role: undefined}
let opts: PickerOptions = {
cssClass: 'time-picker',
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Done',
role: 'done'
}
],
columns: [
{
name: 'hour',
options: [
{ text: '01', value: '01' },
{ text: '02', value: '02' },
{ text: '03', value: '03' },
{ text: '04', value: '04' },
{ text: '05', value: '05' },
{ text: '06', value: '06' },
{ text: '07', value: '07' },
{ text: '08', value: '08' },
{ text: '09', value: '09' },
{ text: '10', value: '10' },
{ text: '11', value: '11' },
{ text: '12', value: '12' },
{ text: '13', value: '13' },
{ text: '14', value: '14' },
{ text: '15', value: '15' },
{ text: '16', value: '16' },
{ text: '17', value: '17' },
{ text: '18', value: '18' },
{ text: '19', value: '19' },
{ text: '20', value: '20' },
{ text: '21', value: '21' },
{ text: '22', value: '22' },
{ text: '23', value: '23' },
{ text: '24', value: '24' }
]
},
{
name: 'minute',
options: [
{ text: '00', value: '00' },
{ text: '15', value: '15' },
{ text: '30', value: '30' },
{ text: '45', value: '45' }
]
}
]
};
const picker = await this.pickerCtrl.create(opts);
picker.present();
picker.onDidDismiss().then(async data => {
console.log(data);
const hour = await picker.getColumn('hour');
const minute = await picker.getColumn('minute');
this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
this.isPickerOpen = false;
});
let pickerAction;
const opts: PickerOptions = {
cssClass: 'time-picker',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: value => {
pickerAction = 'cancel';
}
},
{
text: 'Done',
role: 'done',
handler: value => {
pickerAction = 'done';
}
}
],
columns: [
...
const picker = await this.pickerCtrl.create(opts);
picker.present();
picker.onDidDismiss().then(async data => {
if (pickerAction === 'done') {
const hour = await picker.getColumn('hour');
const minute = await picker.getColumn('minute');
this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
}
this.isPickerOpen = false;
});
You need to move the logic from when the event onDidDismiss() is triggered (which means that the popover has disappeared, regardless of what action made it disappear) to the actual action of clicking the Done button.
This what the handler on Done does here, telling to set the value of the selected entry in the referenced column upon the popover dismissing as a consequence of clicking the Done button.
{data: undefined, role: undefined}
let opts: PickerOptions = {
cssClass: 'time-picker',
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Done',
handler: () => {
picker.dismiss().then(async data => {
console.log(data);
const hour = await picker.getColumn('hour');
const minute = await picker.getColumn('minute');
this.onChangeFinishTime((hour.options[hour.selectedIndex].value) as number, minute.options[minute.selectedIndex].value as number);
this.isPickerOpen = false;
});
}
}
],
columns: [
{
name: 'hour',
options: [
{ text: '01', value: '01' },
{ text: '02', value: '02' },
{ text: '03', value: '03' },
{ text: '04', value: '04' },
{ text: '05', value: '05' },
{ text: '06', value: '06' },
{ text: '07', value: '07' },
{ text: '08', value: '08' },
{ text: '09', value: '09' },
{ text: '10', value: '10' },
{ text: '11', value: '11' },
{ text: '12', value: '12' },
{ text: '13', value: '13' },
{ text: '14', value: '14' },
{ text: '15', value: '15' },
{ text: '16', value: '16' },
{ text: '17', value: '17' },
{ text: '18', value: '18' },
{ text: '19', value: '19' },
{ text: '20', value: '20' },
{ text: '21', value: '21' },
{ text: '22', value: '22' },
{ text: '23', value: '23' },
{ text: '24', value: '24' }
]
},
{
name: 'minute',
options: [
{ text: '00', value: '00' },
{ text: '15', value: '15' },
{ text: '30', value: '30' },
{ text: '45', value: '45' }
]
}
]
};
const picker = await this.pickerCtrl.create(opts);
picker.present();
I have a gridpanel with two column， first column show username, second column is a actioncolumn with edit button, when click edit button, change the user password by show a window with form and input new password.
How to pass the "username" to the form and show.
I'm trying to use Store.
Is there any other way?
my code
gridpanelview.js
actioncolumn:
/*...config*/
{
xtype: 'actioncolumn',
items: [
{
handler:function(view, rowIndex, colIndex, item, e, record, row) {
var pwdwin = Ext.create('myapp.view.SetPwdWin');
var store = Ext.create(myapp.store.mystore)
mysore.setData(record)
pwdwin.show();
},
icon: 'edit.png',
tooltip: 'change passpword'
}]
}
mywindow.js:
/*...config*/
dockedItems: [
{
xtype: 'form',
dock: 'top',
reference: 'form',
height: 200,
id: 'pwd_form',
bodyPadding: 10,
header: false,
title: 'My Form',
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
xtype: 'textfield',
flex: 1,
id: 'user_name',
maxHeight: 20,
padding: 10,
fieldLabel: 'Name',
editable: false
},
{
xtype: 'textfield',
id: 'new_pwd',
padding: 10,
fieldLabel: 'Password',
inputId: 'new_pwd_value',
inputType: 'password',
allowBlank: false,
maxLength: 20,
minLength: 6
},
{
xtype: 'textfield',
id: 'confirm_pwd',
fieldLabel: 'confirm',
inputId: 'confirm_pwd_value',
inputType: 'password',
allowBlank: false,
maxLength: 20,
minLength: 6
},
{
xtype: 'button',
text: 'OK',
listeners: {
click: 'set_new_pwd'
}
}
]
}
],
set_form_username: function() {
//get Store data
form = this.getReferences().form.getForm();
//how to set username to the label
}
set_new_pwd: function(button, e, eOpts) {
//send username and new username to server
}
Try using getDockingRefItems('pwd_form') or getDockedItems()
For example:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
// way 1
w.getDockedItems()[0].items.items[0].setValue('your user name');
// way2
w.getDockingRefItems('pwd_form')[1].setValue('your user name');
w.show();
}
});
var w = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
dockedItems: [{
xtype: 'form',
dock: 'top',
reference: 'form',
height: 200,
id: 'pwd_form',
bodyPadding: 10,
header: false,
title: 'My Form',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'textfield',
flex: 1,
id: 'user_name',
maxHeight: 20,
padding: 10,
fieldLabel: 'Name',
editable: false
}, {
xtype: 'textfield',
id: 'new_pwd',
padding: 10,
fieldLabel: 'Password',
inputId: 'new_pwd_value',
inputType: 'password',
allowBlank: false,
maxLength: 20,
minLength: 6
}, {
xtype: 'textfield',
id: 'confirm_pwd',
fieldLabel: 'confirm',
inputId: 'confirm_pwd_value',
inputType: 'password',
allowBlank: false,
maxLength: 20,
minLength: 6
}, {
xtype: 'button',
text: 'OK',
listeners: {
click: 'set_new_pwd'
}
}]
}]
});
}
});