Related
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
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
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: [] }
);
Hi everyone I've look in all kinds of places but was unable to figure it out what i'm trying to do is get the field "Attention To:" to be populated with a default text but have the option of replacing it. here is the code I have
var dialog = {
AtttoValue: "",
LSDValue: "",
AFEValue: "",
MOCValue:"",
AcccodeValue:"",
PrintValue:"",
commit:function (dialog) { /// called when OK pressed
var results = dialog.store();
this.AtttoValue = results["txt1"];
this.LSDValue = results["txt2"];
this.AFEValue = results["txt3"];
this.MOCValue = results["txt4"];
this.AcccodeValue = results["txt5"];
this.PrintValue = results["txt6"];
},
description:
{
name: "stamp Information", // Dialog box title
elements:
[
{
type: "view",
elements:
[
{
name: "Attention To:",
type: "static_text",
},
{
item_id: "txt1",
type: "edit_text",
multiline: true,
width: 200,
height: 20
},
{
name: "Enter LSD:",
type: "static_text",
},
{
item_id: "txt2",
type: "edit_text",
multiline: true,
width: 200,
height: 20
},
{
name: "Enter AFE / Cost Code:",
type: "static_text",
},
{
item_id: "txt3",
type: "edit_text",
multiline: true,
width: 200,
height: 20
},
{
name: "Enter MOC#:",
type: "static_text",
},
{
item_id: "txt4",
type: "edit_text",
multiline: true,
width: 200,
height: 20
},
{
name: "Enter Account Code:",
type: "static_text",
},
{
item_id: "txt5",
type: "edit_text",
multiline: true,
width: 200,
height: 20
},
{
name: "Print Name:",
type: "static_text",
},
{
item_id: "txt6",
type: "edit_text",
multiline: true,
width: 200,
height: 20
},
{
type: "ok_cancel",
ok_name: "Ok",
cancel_name: "Cancel"
},
]
},
]
}
};
if(event.source.forReal && (event.source.stampName == "#C6nQNxSFN0d4NCJMeJuYYA"))
{
if ("ok" == app.execDialog(dialog))
{
;var cMsg = dialog.AtttoValue;
;event.value = "\n" + cMsg;
;event.source.source.info.afe = cMsg;
this.getField("LSD").value = "\n" + dialog.LSDValue;
this.getField("AFE").value = "\n" + dialog.AFEValue;
this.getField("MOC").value = "\n" + dialog.MOCValue;
this.getField("Acccode").value = "\n" + dialog.AcccodeValue;
this.getField("Print").value = "\n" + dialog.PrintValue;
}
}
Thanks any help would be greatly appreciated
You need to add an initialize object to the dialog object. Something like this... assuming "txt1" is the field you want to populate.
{
initialize: function(dialog) {
dialog.load({"txt1": "yourDefaultValue" });
}
}
I have a Kendo grid which is populated from a SQL database. The kendo expand works fine and returns a different kendo grid in the expand when the program first starts but if I do a new search and return different results the expand row does not work.
My code for the expand ->
function detailInitd(e) {
TextvalueFile = "manno test";
$.ajax({
type: "post",
data: JSON.stringify({
search_string: TextvalueFile,
}),
url: "/Search.aspx/File_Search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
var grid = this;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: object.d,
schema: {
model: {
path: { type: "string" },
st_size: { type: "number" },
},
},
pageSize: 20,
},
reorderable: true,
resizable: true,
navigatable: true,
selectable: "multiple",
scrollable: true,
sortable: true,
filterable: true,
columnMenu: true,
pageable: {
input: true,
numeric: true
},
columns: [
{ field: "path", title: "Path", width: 200 },
{ field: "st_size", title: "Size", width: 60 },
{ field: "st_blks", title: "BLKS", width: 60 },
{ field: "st_acctime", title: "acc Time", width: 70 },
{ field: "st_modtime", title: "mod Time", width: 75 },
]
});
}
};
My code for the original kendo grid ->
function DisplaySearch() {
}
textS.value = value;
valsearch = textS;
$.ajax({
type: "post",
data: JSON.stringify({
search_string: valsearch,
}),
url: "/Search.aspx/display_search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
$("#searchGrid").kendoGrid({
theme:"Default",
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
create_browse: {type:"number"},
},
},
pageSize: 20,
},
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr"));
},
reorderable: true,
navigatable: true,
selectable: "single",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
reordable: true,
resizable: true,
pageable: {
input: true,
numeric: true,
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
{field: "create_browse", title:"Browse", Width: 50},
],
change: function(){
var grid = this;
grid.select().each(function(){
var dataItem = grid.dataItem($(this));
testdata = dataItem.archive_header_key;
grid.expandRow(grid.element.closest("tr"));
})
},
dataBound: function () {
this.expandRow();
},
});
}
Any help would be appreciated.
There is some sample code to check if a kendoGrid is already initialized:
https://www.telerik.com/forums/grid-creation-best-practices
It works for me and fixed the expandRow issue.
function searchButtonClick() {
var gridElement = $("#grid"),
grid = gridElement.data("kendoGrid");
if (!grid) {
gridElement.kendoGrid({
...
});
} else {
grid.dataSource.read();
}
}
I think this is duplicated instances. When you are searching, and call your response() you instanciate always an kendoGrid probably, you have to do something like:
Declare an variable out of response() like:
var $searchGrid = null;
And change your response() :
function response(object) {
if($searchGrid){
$searchGrid .destroy();
$("#searchGrid").empty();
$("#searchGrid").remove();
}
$("#searchGrid").kendoGrid({
theme:"Default",
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
create_browse: {type:"number"},
},
},
pageSize: 20,
},
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr"));
},
reorderable: true,
navigatable: true,
selectable: "single",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
reordable: true,
resizable: true,
pageable: {
input: true,
numeric: true,
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
{field: "create_browse", title:"Browse", Width: 50},
],
change: function(){
var grid = this;
grid.select().each(function(){
var dataItem = grid.dataItem($(this));
testdata = dataItem.archive_header_key;
grid.expandRow(grid.element.closest("tr"));
})
},
dataBound: function () {
this.expandRow();
},
}).data("kendoGrid");;
}
Hope this help