To Start, here is my ComboBoxItem field
{
name: "State",
type: "ComboBoxItem",
canEdit: true,
valueMap: {
WI: "Wisconsin",
IL: "Illinois",
MN: "Minnesota",
MI: "Michigan"
},
addUnknownValues: false,
allowEmptyValue: false,
completeOnTab: true
}
I'm getting very different behavior out of a ComboBoxItem when it is in a ListGrid vs when it's in a DynamicForm.
In a DynamicForm if you were to type in a value that does NOT have a match in the valueMap and then leave the field, it would return to the previous value.
In an editable ListGrid if you were to type in a value that does NOT have a match in the valueMap and then leave the field, it would keep what ever characters you typed and try to save the edits with that string.
Walkthrough
The code used in the walkthrough
isc.VLayout.create({
height: 500,
width: 900,
margin: 100,
members: [
isc.ListGrid.create({
height: "100%",
width: "100%",
canEdit: true,
modalEditing: true,
extraSpace: 5,
fields: [
{ name: "Name", canEdit: true, },
{
name: "State",
type: "ComboBoxItem",
canEdit: true,
valueMap: {
WI: "Wisconsin",
IL: "Illinois",
MN: "Minnesota",
MI: "Michigan"
},
addUnknownValues: false,
//allowEmptyValue: false,
completeOnTab: true
}
],
data: [
{ Name: "Evan", State: "WI" },
{ Name: "Erik", State: "IL" },
{ Name: "Philip", State: "MI" },
]
}),
isc.DynamicForm.create({
height: "100%",
width: "100%",
border: "1px solid #ababab",
canEdit: true,
fields: [
{ name: "Name", canEdit: true, },
{
name: "State",
type: "ComboBoxItem",
canEdit: true,
valueMap: {
WI: "Wisconsin",
IL: "Illinois",
MN: "Minnesota",
MI: "Michigan"
},
addUnknownValues: false,
allowEmptyValue: false,
completeOnTab: true
}
],
values: { Name: "Evan", State: "WI" }
})
]
});
It would appear that addUnknownValues has a different effect on the two instances.
I solved the issue by moving addUnknownValues to the ListGridField's editorProperties
this is the updated ListGridField item
{
name: "State",
type: "ComboBoxItem",
canEdit: true,
valueMap: {
WI: "Wisconsin",
IL: "Illinois",
MN: "Minnesota",
MI: "Michigan"
},
editorProperties:{
addUnknownValues: false,
allowEmptyValue: false,
completeOnTab: true
}
}
Related
I have a grid with a row widget :
{
xtype: 'gridpanel',
margin: '10 0 0 0',
reserveScrollbar: true,
enableColumnHide: false,
shallowGrouping: true,
flex: 1,
emptyText: 'No data available',
plugins: [
{
ptype: 'columnsmanager'
},
{
ptype: 'gridfilters'
},
{
ptype: 'gridexporter'
},
{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
bind: {
store: '{record.allocations}'
},
plugins: [
{
ptype: 'gridfilters'
}
],
viewConfig: {
stripeRows: true,
isRowWidget: true
},
columns:
[
{
xtype: 'datecolumn',
text: 'Date',
dataIndex: 'creationDate',
format: 'Y-m-d H:i',
filter: 'date',
width: 120
},
{
xtype: 'gridcolumn',
text: 'Portfolio',
dataIndex: 'portfolioShortName',
filter: 'string',
width: 250
}
{
...
}
]
}
}
],
selModel: {
selType: 'rowmodel',
mode: 'SINGLE',
},
listeners: {
afterrender: 'onGridAfterRender',
selectionchange: 'onGridSelectionChange'
},
bind: {
store: '{Orders}'
},
rowViewModel: true,
columns: [ ... ]
}
The property 'portfolioShortName' is defined in a model
{
name: 'portfolioShortName',
mapping: 'portfolio.shortName'
}
Which is a nested object of another object
hasMany: {model: 'Xxx.model.oms.Order', name: 'allocations', associationKey:'allocations'}
The problem is when I click on the row expander ExtJs make a http call to get the file and triggers a http error 404, the error is triggered but the fields are visible.
I tried without 'hasMany' in the parent object and using 'tpl' or 'renderer' in the grid but this does not work. The issue is only for nested object, properties are displayed properly.
I'm trying to make an area chart using apexcharts with nuxt (vue2), but the area is not getting filled, and the options i set in chartOptions for fill are getting used by the line itself instead of the area, as below:
this is my apexchart component:
<client-only>
<apexcharts
type="area"
width="70%"
ref="realtimeChart"
:options="chartOptions"
:series="series">
</apexcharts>
</client-only>
this is my chartOptions:
chartOptions: {
chart: {
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
},
},
id: "basic-bar",
colors: ["#FFA07A"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100],
},
},
forecastDataPoints: {
count: 28,
strokeWidth: 4,
dashArray: 5,
},
title: {
text: "doesnt matter",
align: "center",
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"],
opacity: 0.5,
},
},
xaxis: {
type: "date",
tickAmount: 40,
},
yaxis: [
{
title: {
text: "Mt CO2eq/we",
},
forceNiceScale: true,
},
]
},
Can anyone help ?
I was declaring type: "line" in my series. thats all.
I am creating simple bar chart using Chartjs in Vue
<bar-chart
:data="[40, 19, 3, 5,]"
:labels="['0-30 days', '31-60 days', '61-90 days', '90+']"
:colors="['blue', 'blue', 'blue', 'blue']"
></bar-chart>
and the code for this is
createChart(chartData: object) {
const canvas = document.getElementById('bar') as HTMLCanvasElement;
const myopt = {
deferred: {
xOffset: '50%',
delay: 250,
},
plugins: {
datalabels: {
align: 'top',
anchor: 'end',
color: 'blue',
},
},
legend: {
display: true,
},
title: {
display: true,
text: 'Chart.js - Different Bar Colors',
},
tooltips: { enabled: true },
responsive: true,
hover: { mode: null },
elements: {
point: {
radius: 0,
},
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '',
},
offset: false,
color: 'rgba(0, 0, 0, 0)',
gridLines: {
drawOnChartArea: false,
},
}],
yAxes: [{
id: 'y-axis-0',
mirror: false,
stacked: true,
offset: false,
callback(label:any, index:any, labels:[]) {
return `${label}%`;
},
ticks: {
beginAtZero: true,
min: 0,
},
gridLines: {
display: true,
color: 'rgba(0, 0, 0, 0)',
drawOnChartArea: false,
},
}],
},
};
const options = {
type: 'bar',
data: chartData,
options: myopt,
};
new Chart(canvas, options);
}
the chart which this is generating is not equidistant sharing image for reference
position and width of the bar is incorrect and also I want to know if there is any way by which i can customize labels for y axis e.g. instead of 40,35,30... it will be ** 40k,35k,30k** in y axis
If any one has worked on this case please help
You can make use of the tick callback for your K at the end (https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats)
var ctx2 = document.getElementById("stack-chart");
var stackChart1 = new Chart(ctx2, {
type: 'bar',
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: (val) => (val + 'k')
}
}]
},
legend: {
display: false,
labels: {
fontSize: 20,
fontColor: '#595d6e',
}
},
tooltips: {
enabled: false
}
},
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
backgroundColor: "#5e63b4",
data: [20, 30, 40, 50, 60]
}]
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="stack-chart" width="1360" height="450"></canvas>
I am using datatables and I have like 20 columns. I tried to force scrolling horizontal but it is not working and it tries to draw the table without scroll in a single page without the scroll bar.
How can this be done?
I have (I removed already some columns):
activitiesTable = $('#activitiesTable').DataTable({
scrollX: true,
ScrollXInner: "200%",
ajax: {
url: "{!! route('listOfActivitiesPerUserAjax') !!}",
type: "POST",
},
columns: [
{ name: 'manager_id', data: 'manager_id' },
{ name: 'manager_name', data: 'manager_name', width: '150px' },
{ name: 'user_id', data: 'user_id' },
{ name: 'user_name', data: 'user_name' , width: '150px'},
{ name: 'project_id', data: 'project_id' },
{ name: 'project_name', data: 'project_name' },
{ name: 'year', data: 'year' },
{ name: 'jan_com', data: 'jan_com', width: '30px', searchable: false },
{ name: 'jan_otl', data: 'jan_otl', width: '10px', searchable: false },
{ name: 'feb_com', data: 'feb_com', width: '30px', searchable: false },
{ name: 'feb_otl', data: 'feb_otl', width: '10px', searchable: false },
{ name: 'mar_com', data: 'mar_com', width: '30px', searchable: false },
{ name: 'mar_otl', data: 'mar_otl', width: '10px', searchable: false },
{ name: 'apr_com', data: 'apr_com', width: '30px', searchable: false },
{ name: 'apr_otl', data: 'apr_otl', width: '10px', searchable: false },
{ name: 'may_com', data: 'may_com', width: '30px', searchable: false },
{ name: 'may_otl', data: 'may_otl', width: '10px', searchable: false },
{ name: 'jun_com', data: 'jun_com', width: '30px', searchable: false },
{ name: 'jun_otl', data: 'jun_otl', width: '10px', searchable: false },
{ name: 'jul_com', data: 'jul_com', width: '30px', searchable: false },
{ name: 'jul_otl', data: 'jul_otl', width: '10px', searchable: false },
{ name: 'aug_com', data: 'aug_com', width: '30px', searchable: false },
{ name: 'aug_otl', data: 'aug_otl', width: '10px', searchable: false },
{ name: 'sep_com', data: 'sep_com', width: '30px', searchable: false },
{ name: 'sep_otl', data: 'sep_otl', width: '10px', searchable: false },
{ name: 'oct_com', data: 'oct_com', width: '30px', searchable: false },
{ name: 'oct_otl', data: 'oct_otl', width: '10px', searchable: false },
{ name: 'nov_com', data: 'nov_com', width: '30px', searchable: false },
{ name: 'nov_otl', data: 'nov_otl', width: '10px', searchable: false },
{ name: 'dec_com', data: 'dec_com', width: '30px', searchable: false },
{ name: 'dec_otl', data: 'dec_otl', width: '10px', searchable: false }
],
columnDefs: [
{
"targets": [0,2,4,6], "visible": false, "searchable": false
}
],
order: [[2, 'asc']],
initComplete: function () {
var columns = this.api().init().columns;
this.api().columns().every(function () {
var column = this;
// this will get us the index of the column
index = column[0][0];
//console.log(columns[index].searchable);
// Now we need to skip the column if it is not searchable and we return true, meaning we go to next iteration
if (columns[index].searchable == false) {
return true;
}
else {
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('keyup change', function () {
column.search($(this).val(), false, false, true).draw();
});
}
});
}
});
Yes, the docs is a bit vague on this point. ScrollXInner (i.e sScrollXInner) was a legacy <1.10.x option no longer supported. In 1.10.x you must either :
Wrap the table into an element with a fixed width
<div style="width: 500px;">
<table id="example"></table>
</div>
http://jsfiddle.net/Lyje8wat/
or (less pretty) set the width of the .dataTables_wrapper element :
div.dataTables_wrapper {
width: 500px;
}
http://jsfiddle.net/s7hdqw29/
In both cases you will neeed to set scrollX :
var table = $('#example').dataTable({
scrollX: true,
...
})
I try to implement in ExtJs 3.4 a gridpanel with editable columns.
I tried to adapt this example from ExtJS but I cant get it work.
The stored values in the database are shown and as well the add button is working.
But if I click in one cell (for example column name) nothing happens, but I would expect, that the cell is 'opened' so that I can enter a new value.
Any suggestions?
CODE SNIPPET
var fm = Ext.form;
var editGrid = new Ext.grid.GridPanel({
id: 'editTable',
title: 'Edit table SAP_SYSTEM',
header: true,
renderTo: 'contentDivSystem',
height: 350,
style: 'margin-bottom: 50px',
columns: [{
hidden: true,
header: 'id',
dataIndex: 'id',
editable: false
}, {
header: 'name',
dataIndex: 'name',
editable: true,
sortable: true,
flex: 10,
editor: new fm.TextField({
xtype: 'textfield',
allowBlank: false
})
//,
//field : {
//xtype : 'textfield',
//allowBlank : false,
//}
}, {
header: 'applicationserver',
dataIndex: 'as_host',
editable: true,
flex: 10,
sortable: true,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'systemnumber',
dataIndex: 'system_number',
editable: true,
flex: 10,
sortable: true,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'client',
dataIndex: 'client',
editable: true,
sortable: true,
flex: 10,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'language',
flex: 10,
dataIndex: 'language',
editable: true,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'saprouterstring',
dataIndex: 'sap_router_string',
editable: true,
flex: 10,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'poolcapacity',
dataIndex: 'pool_capacity',
editable: true,
flex: 10,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'pool size',
dataIndex: 'pool_size',
editable: true,
flex: 10,
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 20,
align: 'center',
items: [{
icon: '../images/icons/silk/delete.png',
tooltip: 'Delete Row',
handler: function(grid, rowIndex,
colIndex) {
var rec = grid.store
.getAt(rowIndex);
if (rec.data.id !== null &&
rec.data.id !== '') {
deleteIds.push(rec.data.id);
}
grid.store.removeAt(rowIndex);
Ext.defer(layoutfunction, 10, customobject);
}
}]
}],
selType: 'cellmodel',
//plugins : [editor],
/* plugins : [ Ext.create(
'Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ], */
store: myStore,
stateful: false,
border: true,
enableColumnHide: false,
enableColumnMove: false,
//loadMask : true,
//stripeRows : true,
autoScroll: true,
tbar: [{
xtype: 'button',
icon: '../images//icons/silk/add.png',
dock: 'bottom',
listeners: {
click: function() {
var grid = Ext.getCmp('editTable');
var myNewRecord = new MyRecord({
id: '',
as_host: '',
system_number: '',
client: '',
language: '',
sap_router_string: '',
pool_capacity: '',
pool_size: '',
sap_id: ''
});
grid.store.add(myNewRecord);
Ext.defer(layoutfunction, 10, customobject);
}
},
afterrender: function(cmp) {
Ext.defer(layoutfunction, 100, customobject);
}
}, {
xtype: 'button',
icon: '../images//icons/silk/disk.png',
listeners: {
click: function() {
var grid = Ext.getCmp('editTable');
save(grid.store.data.items);
}
}
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: myStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
listeners: {
beforeChange: function(pagingToolbar, params) {
deleteIds = [];
updateIds = [];
pagingToolbar.store.baseParams = {
eventPath: 'FrontEndCRUDHandler',
eventMethod: 'getSapSystemData',
jsonInput: Ext.encode({
tableName: 'SAP_SYSTEM',
start: 0,
limit: rowLimit
})
}
},
afterlayout: function() {
Ext.defer(layoutfunction, 10, customobject);
},
afterrender: function(cmp) {
Ext.defer(layoutfunction, 100, customobject);
}
}
});
You must use Ext.grid.EditorGridPanel ;-)