I am trying to use this spreadsheet control.
I want to Add new row with same drop down values in Spreadsheet
var sheet = [ {
ranges: [{ dataSource: tradeData }],
fieldAsColumnHeader: true,
columns: [
{ width: 70 }, { width: 80 }, { width: 100 }, { width: 100 },
{ width: 70 }, { width: 120 }, { width: 80 }, { width: 120 },
{ width: 140 }, { width: 80 }, { width: 120 }, { width: 120 }
],
rows: [
{
index: 1,
cells: [
{ index: 3, value: '', validation: { type: 'List', value1: trade_types.toString() } },
{ index: 5, value: '', validation: { type: 'List', value1: securities.toString() } },
{ index: 11, value: '', validation: { type: 'List', value1: reason_for_trades.toString() } }]
}
]
}
];
var spreadsheet = new ej.spreadsheet.Spreadsheet({
showRibbon: false,
showFormulaBar: false,
showSheetTabs: false,
sheets: sheet,
created: () => {
spreadsheet.cellFormat({ textAlign: 'left' }, 'A2:L2');
},
cellEdit: function (args) {
if (args.address.includes('A')) { args.cancel = true; }
}
});
spreadsheet.appendTo('#spreadsheet');
I want to add new row to this spreadsheet. Also, I want to populate the same cell dropdownlist in the new row. How can I achieve it?
Your requirement can be achieved by inserting the rows with predefined rowsModel values using the insertRow method in the contextMenuItemSelect event. For your convenience, we have prepared the sample based on our suggestion, please find the link below.
https://stackblitz.com/edit/3qcicp?file=index.js
We have already demonstrated this in our knowledge base documentation itself. You can find its link below.
https://www.syncfusion.com/kb/13863/how-to-insert-rows-in-the-used-range-with-predefined-values-using-context-menu-option-in
Related
I want to open calendar in one of the columns and when use select date, I want to display in MM/dd/yyyy. I want to validate date too on button click.
var sheet = [
{
ranges: [{
dataSource: tradeData
}],
fieldAsColumnHeader: true,
columns: [{
width: 70
}, {
width: 80
}, {
width: 100
}, {
width: 100
},
{
width: 70
}, {
width: 120
}, {
width: 80
}, {
width: 120
},
{
width: 140
}, {
width: 80
}, {
width: 120
}, {
width: 120
}
],
rows: [{
index: 1,
cells: [{
index: 3,
value: '',
validation: {
type: 'List',
value1: trade_types.toString()
}
},
{
index: 8,
value: '',
validation: {
type: 'List',
value1: counter_parties.toString()
}
},
{
index: 10,
value: '',
validation: {
type: 'List',
value1: settlement_methods.toString()
}
}
]
}]
}
];
var spreadsheet = new ej.spreadsheet.Spreadsheet({
showRibbon: false,
showFormulaBar: false,
showSheetTabs: false,
sheets: sheet,
created: () => {
//Add Data validation to range.
}
});
spreadsheet.appendTo('#spreadsheet');
I have below Syncfusion JavaScript Spreadsheet.
I have external button on the page, I want to validate and highlight the rows which are invalid on button click. How can I do this?
var sheet = [
{
ranges: [{
dataSource: tradeData
}],
fieldAsColumnHeader: true,
columns: [{
width: 70
}, {
width: 80
}, {
width: 100
}, {
width: 100
},
{
width: 70
}, {
width: 120
}, {
width: 80
}, {
width: 120
},
{
width: 140
}, {
width: 80
}, {
width: 120
}, {
width: 120
}
],
rows: [{
index: 1,
cells: [{
index: 3,
value: '',
validation: {
type: 'List',
value1: trade_types.toString()
}
},
{
index: 8,
value: '',
validation: {
type: 'List',
value1: counter_parties.toString()
}
},
{
index: 10,
value: '',
validation: {
type: 'List',
value1: settlement_methods.toString()
}
}
]
}]
}
];
var spreadsheet = new ej.spreadsheet.Spreadsheet({
showRibbon: false,
showFormulaBar: false,
showSheetTabs: false,
sheets: sheet,
created: () => {
//Add Data validation to range.
}
});
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Get the data of the spreadsheet.
//Validate data like if the cell value is null or empty, if the value is Invalid,
//the highlight the cell with Yellow color(Default is yellow color)
};
Your requirement can be met by adding the data validation to the range of cells by using the addDataValidation method. And highlight the invalid data for the validation applied range by using the addInvalidHighlight method. For your convenience, we have prepared the sample based on your requirements. You can find it at the below link.
Sample Link: https://stackblitz.com/edit/c18zk5?file=index.js,index.html
Documentation Link: https://ej2.syncfusion.com/documentation/spreadsheet/cell-range/#data-validation
API Links:
https://ej2.syncfusion.com/documentation/api/spreadsheet/#addinvalidhighlight
https://ej2.syncfusion.com/documentation/api/spreadsheet/#adddatavalidation
Good Day Developers!
I'm facing issue in JSON object received from MVC controller to AJAX success request.
The response which received is below.
[
{"name":"ERP Developer","value":2},
{"name":"Software Engineer","value":2},
{"name":"Dot Net Developer","value":2},
{"name":"Apex Developer","value":0},
{"name":"test","value":1}
]
But i want to make it like below.
{
"name": [
"ERP Developer",
"Software Engineer"
],
"Value": [
5,
10
]
}
Problem: Because i'm creating Bar chart using ECHARTS library but i want series name instead of number please see below image for reference.
function loadBarChart(data,title = "JobData",subtext = "Artistic Milliners") {
//var BarDBData = data;
var BarDBData = data;
//var BarDBData = JSON.parse('{"name":["ERP Developer","TEST"],"test":[5,10]}');
console.log(BarDBData);
var chartDom = document.getElementById('BarChart');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: title,
subtext: subtext
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
// prettier-ignore
//data: ["ERP Developer", "Software Engineer"],
data: BarDBData,
axisLabel: { interval: 0, rotate: 30 }
}
],
yAxis: [
{
type: 'value'
}
],
dataZoom: [
{
show: true,
start: 04,
end: 100
},
{
type: 'inside',
start: 44,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series: [
{
name: "test",
type: 'bar',
data: BarDBData,
//data: [2.0, 4.9, 4, 9, 4],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
}
}
]
};
option && myChart.setOption(option);
}
you can just map through array and extract values into another array
const result = {}
const arr = [{"name":"ERP Developer","value":2},{"name":"Software Engineer","value":2},{"name":"Dot Net Developer","value":2},{"name":"Apex Developer","value":0},{"name":"test","value":1}]
arr.forEach(row => {
for (let i in row) {
if (result[i]) {
result[i].push(row[i])
} else {
result[i] = [row[i]]
}
}
})
console.log(result)
Just reduce() it into the desired shape:
const response = [
{"name":"ERP Developer","value":2},
{"name":"Software Engineer","value":2},
{"name":"Dot Net Developer","value":2},
{"name":"Apex Developer","value":0},
{"name":"test","value":1}
];
const mapped = response.reduce(
(acc,x) => {
acc.name.push( x.name );
acc.Value.push( x.value );
return acc;
},
{ name: [], Value: [] }
);
function BindDataToGrid() {
var grid = new dhx.Grid("grid_container", {
columns: [
{ width: 150, id: "ProductCode", header: [{ text: "<span class='title'>Product Code</span>" }] },
{ width: 200, id: "ProductName", header: [{ text: "Product Name" }] },
{ width: 200, id: "ProductManufacturedDate", header: [{ text: "Manufacturing Date" }] },
{ width: 150, id: "ProductPrice", header: [{ text: "Price" }] },
//Add custom column here for edit and delete purpose
],
headerRowHeight: 50,
width: 800,
height: 400,
data: dataset,
resizable: true
});
}
i want custom columns after product price column.
Please help me .
For the custom displaying content in the grid column you may try to use the template for the grid column. As in the following sample:
https://docs.dhtmlx.com/suite/samples/grid/02_configuration/02_cell_templates.html
I have a chart retrieving data from my store, the four bits of information are the following
Model Code
Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'meta_id'
},
{
name: 'title'
},
{
name: 'viewed'
},
{
name: 'glances'
}
]
}
});
Now I have the viewed field and the glances field as the numeric fields in the chart, and the title field as the category title in the chart.
I want to render the title name of the field when I hover over it, reason id this. The titles are too long to fit in the x-axis of the chart so in place of the titles I am putting 'meta_id'. So when I hover over the x-axis meta_id field I want the title name to be shown
so for example
meta_id 100 will equal title value ###
Here's is my chart code so far
{
xtype: 'chart',
centered: true,
height: '150%',
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'meta_id'
],
grid: true,
label: {
rotate: {
degrees: 0
},
font: '7px'
},
title: 'Clips'
},
{
type: 'numeric',
fields: [
'viewed'
],
grid: true,
position: 'left',
title: 'Amount'
}
],
series: [
{
type: 'bar',
renderer: function(sprite, config, rendererData, index) {
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
}
],
legend: {
xtype: 'legend'
}
}
As you can see in the above code I have a render function but I dont know what to put into it
Use tips for series
series: [
{
type: 'bar',
tips: {
trackMouse: true,
width: 74,
height: 38,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
}
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
]