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
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 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
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'
]
}
]
I have a kendo grid with create, edit and delete buttons. I also have a next button outside the grid. What I want to do is prevent the user from clicking on the next button, if the user doesn't at least create/edit one record first.
<div ng-show="showActivePage === 'PageTwo'" ng-controller="inputFiscalYearController" >
<div kendo-grid="myGrid" k-options="gridOptionsFiscalYear" ></div>
<div ng-click="showActivePage = 'PageThree'"> Next </div>
<div ng-click="showActivePage = 'PageOne'"> Back </div>
</div>
app.controller('inputFiscalYearController', ['$scope', function ($scope) {
$scope.isDisabled = false;
$scope.gridOptionsFiscalYear = {
toolbar: ["create"],
editable: true,
pageable: true,
edit: function(){
alert();
},
columns: [
{
field: "Name",
title: "Name",
width: "250px",
},
{
field: "Surname",
title: "Surname",
width: "250px",
},
{
title: "",
command: ["edit", "destroy"],
width: "105px"
},
],
editable: "inline",
dataSource: {
data: [
],
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
id: { editable: false },
Name: {
type: "string",
validation: {
required: {
message: "*Required"
}
}
},
Surname: {
type: "string",
validation: {
required: {
message: "*Required"
}
}
},
}
}
}
},
}
}]);
I'm not familiar with kendo-ui, but I do know Angular. Couldn't you just do:
<div ng-click="showActivePage = 'PageThree'" disabled="!gridOptionsFiscalYear.data.length"> Next </div>
I'm presuming that gridOptionsFiscalYear.data is where new records will be created.
Edit: didn't have the required negation on the length.