I'm new to JavaScript.
I creating a table with cells where we can add values and I'm using HandsOnTable.
I need to create an inactive cell and we can't set the value in the inactive cell in HandsOnTable if the previous cell has a value.
It's my code :
<div id="downtimetable"></div>
<script script type="text/javascript" th:inline="javascript">
let dataFromSpringDown = [[${downtimes}]];
let dataObjDown = [];
let temp1 = {
name: ' ',
town: ' ',
tent: ' ',
izoterm: ' ',
ref: ' '
}
for(let obj of dataFromSpringDown){
let object = {
name: obj["name"],
town: obj["town"],
tent: obj["tent"],
izoterm: obj["izoterm"],
ref: obj["ref"]
};
dataObjDown.push(object);
}
dataObjDown.push(temp);
let container2 = document.getElementById('downtimetable');
let hot2 = new Handsontable(container2, {
data: dataObjDown,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
colHeaders: [
'Name',
'Town',
'Cost'
],
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true,
collapsibleColumns: true,
nestedHeaders : [
[
'Name',
'Town',
{
label: 'Cost',
colspan: 3
}
],
[
'','','Tent','Izo','Ref'
]
],
manualColumnResize : true
});
function myFunctionDown() {
var json = JSON.stringify(dataObjDown);
var xhr = new XMLHttpRequest();
xhr.open("POST","/downtime_rows_json");
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(json);
}
</script>
<button onclick="myFunctionDown()" class="btn btn-info">From table</button>
It's a table created with script:
I need to change the status to inactive in cell2 if cell1 has a value and vice versa. How I can do that?
I think we can use this script, but I don't understand how get the previous cell
hot2.updateSettings({
cells: function (row, col, prop) {
var cellProperties = {};
if (hot2.getDataAtRowProp(row, prop) === 'Town1') {
cellProperties.editor = false;
} else {
cellProperties.editor = 'text';
}
return cellProperties;
}
})
The code below will disable cell 2 and delete its value if cell 1 has a value and vice versa. In other words: you can't have values in both column 1 and 2.
hot2.addHook( 'afterChange', function( changes, src ) {
[
[row, prop, oldVal, newVal]
] = changes;
if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) && newVal?.length > 0 ) {
// delete value of cell 2 if cell 1 has a value
hot2.setDataAtCell( row, prop + 1, '' );
} else if ( prop == 1 && hot.getDataAtRowProp( row, prop - 1 ) && newVal?.length > 0 ) {
// delete value of cell 1 if cell 2 has a value
hot2.setDataAtCell( row, prop -1, '' );
}
})
hot2.updateSettings( {
cells: function ( row, col, prop ) {
cellProperties = {};
if ( prop == 1 && hot2.getDataAtRowProp( row, prop - 1 ) ) {
// this disables cell 2 if cell 1 has a value
cellProperties.readOnly = true;
} else if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) ) {
// this disables cell 1 if cell 2 has a value
cellProperties.readOnly = true;
} else {
cellProperties.readOnly = false;
}
return cellProperties;
}
})
It's working for me :
hot1.addHook('beforeRenderer', function(td, row, col, prop, value, cellProperties) {
if (prop === 'name') {
var cellMeta = this.getCellMeta(row, this.propToCol('town'));
cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
} if (prop === 'town') {
var cellMeta = this.getCellMeta(row, this.propToCol('name'));
cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
}
});
You can change the columns name, and it's will still working
Related
I am using a checkbox to display boolean data (the checkbox will be checked in the case of 'Y' and will not be checked in the case of 'N' or (null)). While the cell/data is displaying correctly in the grid, when I click on the checkbox, I would also like for the data in the cell to be changed - not just the checkbox (in other words, two way binding, but in ag grid with values that are not true/false - but rather, 'Y' and 'N', and have the check/uncheck change the very cell value(s) themselves).
I am currently using cellRenderer to display the checkbox based off of the data of the cell.
Here is the code in which I define my grid:
var columnDefs = [
{headerName: 'name', field: 'a', editable: true, valueParser: numberValueParser},
{headerName: 'read', field: 'b', editable: true, cellRenderer: checkboxCellRenderer},
{headerName: 'write', field: 'c', editable: true, cellRenderer: checkboxCellRenderer},
{headerName: 'delete', field: 'd', cellRenderer: checkboxCellRenderer},
{headerName: 'upload', field: 'e', cellRenderer: checkboxCellRenderer},
];
function createRowData() {
var rowData = [];
for (var i = 0; i<20; i++) {
rowData.push({
a: Math.floor( ( (i + 323) * 25435) % 10000),
b: Math.floor( ( (i + 323) * 23221) % 10000)<5000,
c: Math.floor( ( (i + 323) * 468276) % 10000)<5000,
d: Math.floor( ( (i + 323) * 468276) % 10000)<5000,
e: Math.floor( ( (i + 323) * 468276) % 10000)<5000
});
}
return rowData;
}
function numberValueParser(params) {
return Number(params.newValue);
}
function formatNumber(number) {
// this puts commas into the number eg 1000 goes to 1,000,
// i pulled this from stack overflow, i have no idea how it works
return Math.floor(number).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}
function checkboxCellRenderer (params){
var input = document.createElement("input")
input.type = "checkbox";
input.checked = params.value
return input
}
var gridOptions = {
defaultColDef: {
valueFormatter: function (params) {
return formatNumber(params.value);
},
cellClass: 'align-right'
},
columnDefs: columnDefs,
rowData: createRowData(),
enableColResize: true
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
gridOptions.api.sizeColumnsToFit();
});
Much like like this working plunker,https://plnkr.co/edit/cV5wFLY4nnyQgVIcnGrF?p=preview
Sure you can click on the checkbox and the check inside the box will go away, but that won't necessarily also change the value of the cell as well. In both these examples (both my code and the plunker I provided), you have to double click on the cell and manually change the value of the cell yourself - for the cell value to be changed. I would like for the checkbox to be able to change the cell-value.
Any help/suggestions would be much appreciated!
Plunker main.js checkboxCellRenderer function modify :
function checkboxCellRenderer (params){
if(params.value !== 'Y' && params.value !== 'N'){
params.setValue(params.value === true || params.value === 'Y' ? 'Y' : 'N');
}else{
var input = document.createElement("input");
input.type = "checkbox";
input.value = params.value === true || params.value === 'Y' ? 'Y' : 'N';
input.checked = params.value === true || params.value === 'Y' ? true : false;
input.onclick = function(){
params.setValue(this.checked === true ? 'Y' : 'N');
}
return input;
}
}
Working plunker : https://plnkr.co/edit/qMXxp2axYbeLwssAuueZ?p=preview
I have a function in React which renders options in checkbox form.
I want to add another option by appending it to this list.
My render function
typeof this.state.vendorsOccasionTypesList != 'undefined'
? this.state.vendorsOccasionTypesList.map(function(row, i) {
if (
row.ifActive == '1' &&
row.cityId == that.props.sessionData.CityId
) {
var mainName = row.name;
var id = row.contractorVendorsTypeId;
var mainName1 = mainName.replace('BookEventZ', '');
options.push({ value: id, label: mainName1 });
options.concat({ value: 57, label: 'mainName1' });
}
}, this)
: null;
I have 2 header rows in my grid.The problem is, that because of this, there is another row in my Grid, unter my row with data. Here's my grid after rendering:
grid = new dojox.grid.DataGrid({
id : OwnId,
store : gridStore,
onStyleRow : function (row) {
if (row.index === 14) {
var color = "color:red;";
row.customStyles += color;
}
},
structure : structure,
onHeaderCellClick: function(e) {
if (!dojo.hasClass(e.cell.id, "staticHeader")) {
e.grid.setSortIndex(e.cell.index);
e.grid.onHeaderClick(e);
}
},
onHeaderCellMouseOver: function(e) {
if (!dojo.hasClass(e.cell.id, "staticHeader")) {
dojo.addClass(e.cellNode, this.cellOverClass);
}
}
});
So how can I eliminate/hide this empty rows ? Any Suggestions?
I'm creating structure like this:
var _gridStyle = 'text-align: center;';
var _dateColumn = true;
var _gridStructure = [];
console.log(params);
if (params.connectorNames !== "undefined") {
// setting grid structure
_gridStructure.push([]);
for (var i = 0; i < params.connectorNames.length; i++) {
_gridStructure[0].push({
name : "test",
headerClasses : "staticHeader"
});
}
_gridStructure.push([]);
for (var i = 0; i < metricNames.length; i++) {
// if data column is required
if (_dateColumn === true && i === 0) {
_gridStructure[1].push({
field : "Datum",
name : "Datum",
width : "5%",
styles : _gridStyle
});
_dateColumn = false;
i--;
} else {
_gridStructure[1].push({
field : metricNames[i],
name : metricNames[i].replace("ANZAHL_", ""),
styles : _gridStyle,
});
}
}
}
okay I added
onStyleRow: function(e) {
dojo.style(e.node.children[0].children[0].rows[0],'display','none');
}
to my grid... and the empty cells are gone. Change index of rows[0] to "1" if the first datacolumn is filled with data.
I wrote the code below to search for values in a spreadsheet. For some reason, when I try to search vertically it searches horizontally instead.
I thought that changing valores[cc][0] to valores[0][cc] would do that but it's not working.
Any idea what I am doing wrong?
function onEdit(e){
var a = e.source.getActiveSheet();
var SearchText = "4"
//x = mainSearch( a, 3, 1, "horizontal", SearchText);
x = mainSearch( a, 1, 1, "vertical", SearchText);
}
//mainSearch( targetSheet, row, column, alignment, searchText)
function mainSearch( folha, linha, coluna, procTipo, procTexto) {
if ( procTipo = "horizontal" ) {
var alcance = folha.getRange( linha, coluna, folha.getLastRow(), 1);
}
else if ( procTipo = "vertical" ) {
var alcance = folha.getRange( linha, coluna, 1, folha.getLastColumn());
}
else {
Browser.msgBox("mainSerch com procTipo errado");
}
var valores = alcance.getValues();
for(cc=0;cc<valores.length;++cc) {
if ( procTipo = "horizontal" ) {
Browser.msgBox("Horizontal --> " + valores[cc][0]);
if ( valores[cc][0] == procTexto ) {
return (cc + linha);
}
}
else if ( procTipo = "vertical" ) {
Browser.msgBox("Vertical --> " + valores[0][cc]);
if ( valores[0][cc] == procTexto ) {
return (cc + coluna);
}
}
}
return 0;
}
The problem is here:
if ( procTipo = "horizontal" ) {
When you execute procTipo = "horizontal", you're assigning "horizontal" to procTipo. You should only test its value:
if ( procTipo == "horizontal" ) {
There are three other place where you'll have to change = to ==.
Some people prefer to use === because it doesn't do any type coercion, but in this situation == will work equally well.
You'll have to adjust the iteration limit in order to search through valores properly in the vertical case. Currently you have this:
for(cc=0;cc<valores.length;++cc) {
Replace it with these two lines:
var limit = (procTipo == 'horizontal' ? valores.length : valores[0].length);
for (var cc = 0; cc < limit; ++cc) {
I want to remove the columns which have total = 0.
So I've tried in different ways.
First, I assigned ID to all columns, for example; every <td> is of column will have their ID eg: First columns <td ID = 'col_1'> , second column all <td ID = 'col_2'> etc. And then in when footer callback I've tried to remove if this column total is ZERO then this $("col_"+i).remove(); this code removed table headers only so I've tried again with $("col_"+i).empty() but again it's just empty. <th> only
Then I've tried to hide the columns by creating dynamic but I don't get any values.
"footerCallback": function ( row, data, start, end, display )
{
var api = this.api(), data;
var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0;};
var col_gonna_invis = '[';
for(i=1;i<length_of_coloumns;i++)
{
total_salary = api.column( i ).data().reduce( function (a, b) {return intVal(a) + intVal(b);},0 );
$('#total_cont_'+i).html(total_salary);
if(total_salary == 0)
{
col_gonna_invis += '{"targets": [ '+i+' ], "visible": false, "searchable": false },';
}
}
col_gonna_invis += ']';alert(col_gonna_invis);
},
"aoColumnDefs": col_gonna_invis;
Please someone help me fix this issue or please someone tell me how to hide or remove columns which footer total is 0.
Thank you in advance.
I will suggest you use the visible() API method along with the sum() plugin :
Enhance the API with a column().sum() method :
jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
return this.flatten().reduce( function ( a, b ) {
if ( typeof a === 'string' ) {
a = a.replace(/[^\d.-]/g, '') * 1;
}
if ( typeof b === 'string' ) {
b = b.replace(/[^\d.-]/g, '') * 1;
}
return a + b;
}, 0 );
} );
now, in initComplete() you can very easy hide columns which have a total or sum() of 0 :
var table = $('#example').dataTable({
//...
initComplete : function() {
var api = this.api(),
colCount = api.row(0).data().length;
for (var i=0; i<colCount; i++) {
if (api.column(i).data().sum() == 0) {
api.column(i).visible(false);
}
}
}
});
demo -> http://jsfiddle.net/qer7e5os/