I want to set checkbox to true based on a condition in ag-grid - checkbox

I have a button which basically imports some data. This imported data needs to be compared with the data inside already loaded ag-grid and if there is a match, set the cehckbox of that particlar row node to true.
This is the button which checks for the condition:
enableCheck() {
alert('works');
if (this.DataService.isNotBlank(this.rowDataImport)) {
for (let i = 0; i < this.rowDataImport.length; i++) {
if (this.DataService.isNotBlank(this.rowData)) {
for (let j = 0; j < this.rowData.length; j++) {
if (this.DataService.isNotBlank(this.rowData[j].calDate)) {
for (const calDates of this.rowData[j].calDate) {
if (
this.rowDataImport[i].isin === calDates.isin ||
this.rowDataImport[i].portfolioName === calDates.portfolioName ||
this.rowDataImport[i].valuationDate === calDates.valuationDate
)
{
// alert('true')
this.checkValue = true;
} else {
this.checkValue = false;
}
}
}
}
}
}
}
}
The this.checkValue is a flag which will be true if match is found.
public gridColumnDefs = [
{
headerName: 'Portfolio Name',
field: 'portfolioName',
cellRenderer: 'agGroupCellRenderer',
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
checkboxSelection: true,
pinned: 'left',
filter: true,
cellRendererParams:(params) => {
console.log(params);
if (this.checkValue) {
params.node.selected = true;
}
}
},
]
here I used cellRendererParams. But this will only for on load I guess. What to do if I want to update the ag-grid row from a value outside i.e. from import check as given above?

First of all, you should add id for each row in defaultColDef
this.defaultColDef = {
getRowNodeId: data => data.id,
};
Then you can find this id and set the checkbox to true.
Also, you can find separate field by name.
It is really easy, you should use the next combination
selectRow() {
this.gridApi.forEachNode(node => {
if (node.id == 1 || node.id == 2 || node.data.country == 'Australia') {
node.setSelected(true);
}
});
}
Working example:
https://plnkr.co/edit/ijgg6bXVleOAmNL8
In this example when we click on the button - we set the checkbox to true for two rows with id 1 and 2 and for each field that has country 'Australia'
And in your case, you are using incorrect configuration.
You should you cellRenderer
cellRenderer: params => {
if(params.value === 'Ireland') {
params.node.setSelected(true)
}
return params.value
},
One more example: https://plnkr.co/edit/PcBklnJVT2NsNbm6?preview

I manpulated a bit and did the below which worked like a charm.
this.gridApi.forEachNode(node => {
if (node.data.isin === this.rowDataImport[i].isin &&
node.data.portfolioName === this.rowDataImport[i].portfolioName &&
node.data.valuationDate === this.rowDataImport[i].valuationDate
) {
node.setSelected(true);
}

Related

angularJS -UI-grid cellTooltip for dynamic columns

I have a stored procedure that returns dynamic columns and I was able to paint the output with some help on angularJS ui-grid. Now I am trying to add "CellToolTip". Screenshot below is the output of the stored procedure in which columns 25 to 22 are dynamic (which means they can range from 150 to 0 depending on the input given to the stored procedure). The columns that start with "Tgt"are Targets which I don't want to display but show the target value when hovered over the column. I was able to successfully hide the "Tgt-"columns on the webpage with out issue.
Now I need to show them as a CellToolTip when I hover over the dynamic columns 25 to 22 with which I need help. In the screenshot example below when I hover over the cell with value 0.901 that is against column 25 and row "Vat Fill Calc F/P Ratio" attributename I would like to see "0.89". But if I hover over the cell value 0.89 that is against column 25 and row "Vat Batch data F/P" attributename I would like to see "No value" since Tgt-25 column has a NULL for that attributeName.
In my code below within the push function I added "var key = 'Tgt-' + sortedKeysArray[i];
var value = row.entity[key];". When I put break points I get error saying key is undefined. But if I hardcode the key value like "var value = row.entity["Tgt-25"];" then it works fine. I need help with making the hover values dynamic in which I would like to get the target values from their respective target columns. Thanks in advance for the help.
LRWService.getVatMakeRpt('1', '1221209', '100000028', '2020-05-08', '2020-05-08').success(function (data) {
if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {
$scope.error = true;
$scope.errorDescription = "No data found for selected criteria.";
} else {
$scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
data.VatMakeRptList.length
);
var VatMakeRptList = data.VatMakeRptList;
var keysArray = [];
keysArray = Object.keys(VatMakeRptList[0]);
var sortedKeysArray = keysArray.sort().reverse();
$scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'LineNumber', field: 'LineNumber', width: '20%', visible: true });
$scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'AttributeName', field: 'AttributeName', width: '20%', visible: true });
for (var i = 0; i < sortedKeysArray.length; i++) {
if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))
$scope.gridOptionsVatMakeRpt.columnDefs.push({
name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
var key = 'Tgt-' + sortedKeysArray[i];
// var value = row.entity["Tgt-25"];
var value = row.entity[key];
if (value != null) {
return value;
} else {
return "No Value";
}
}
});
}
}
All I had to do was move the "Key" value above the if statement.
for (var i = 0; i < sortedKeysArray.length; i++) {
var key = 'Tgt-' + sortedKeysArray[i];
if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))
$scope.gridOptionsVatMakeRpt.columnDefs.push({
name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
// var value = row.entity["Tgt-25"];
var value = row.entity[key];
if (value != null) {
return value;
} else {
return "No Value";
}
}

Filter array of objects on multiple keys

I have a react table that I am trying to filter on multiple columns using a filter function. If i filter on one column its fine but if i add another column it filters only by that and not both.
Example would be the name "Scott". I want to filter the first_name column by it and also the biz_name column by it. But when I check the box to change state for that column, it only filters on one. Here is the checkbox in which I have checked state to make sure it is working correctly.
<Checkbox
label="Business Name"
onCheck={event => {
if (event.target.checked) {
this.setState({
filterBusinessName: true
});
} else {
this.setState({
filterBusinessName: false
});
}
}}
/>
<Checkbox
label="First Name"
onCheck={event => {
if (event.target.checked) {
this.setState({
filterFirstName: true
});
} else {
this.setState({
filterFirstName: false
});
}
}}
/>
And then here is the filter function above the table:
let items = this.state.contacts
if (this.state.term && items.length > 0) {
let searchTerm = this.state.term.toLowerCase()
items = items.filter(row => {
if(this.state.filterBusinessName && row.biz_name){
return row.biz_name.toLowerCase().includes(searchTerm)
}
if(this.state.filterFirstName && row.first_name){
return row.first_name.toLowerCase().includes(searchTerm)
}
if(this.state.filterFirstName && row.first_name && this.state.filterBusinessName && row.biz_name){
return row.first_name.toLowerCase() == searchTerm || row.biz_name.toLowerCase() == searchTerm
}
})
}
I think you want something like this
let items = this.state.contacts;
if (this.state.term && items.length > 0) {
let searchTerm = this.state.term.toLowerCase();
items = items.filter(row => {
if (
this.state.filterBusinessName &&
row.biz_name &&
row.biz_name.toLowerCase().includes(searchTerm)
) {
return true;
}
if (
this.state.filterFirstName &&
row.first_name &&
row.first_name.toLowerCase().includes(searchTerm)
) {
return true;
}
return (
this.state.filterFirstName &&
row.first_name &&
this.state.filterBusinessName &&
row.biz_name &&
(row.first_name.toLowerCase() == searchTerm ||
row.biz_name.toLowerCase() == searchTerm)
);
});
}
The main difference here is that the function will only return false if it doesn't match any. Before it returned false immediately if it didn't match one of the filter checks.
There's definitely some optimisation you can do to make this more comprehensible. But it illustrates the idea. Hope that helps

angularjs dygraph how to show only positive values?

is there a way just to show positive values on my dygraph.. my Y and X axis start both at 0 ?
Is there a option I can add or I need to go trow customRange for y axis option and calculate each max/min per graph?
My options are:
var options = {
labels: labels,
showRangeSelector: true,
legend: 'always',
ylabel: units,
title: graphTitle,
includeZero: true,
axes: {
y: {
valueFormatter: function (value, opts, seriesName, dygraph, row, col) {
if (seriesName == "Mode") {
return modemMode[value];
} else if (seriesName == "Submode") {
return modemSubmode[value];
} else if (seriesName == "Sysmode") {
return modemSysmode[value];
} else if (seriesName == "Roaming") {
return modemRoaming[value];
}
return value;
}
}
},
underlayCallback: function(canvas, area, g) {
for (var i=0; i<highlightArea.length; i++) {
var left = g.toDomXCoord(highlightArea[i][0]);
var right = g.toDomXCoord(highlightArea[i][1]);
canvas.fillStyle = "rgba(217, 101, 87, 0.2)";
canvas.fillRect(left, area.y, right - left, area.h);
}
}
}
You can use the valueRange option to achieve this:
new Dygraph(div, data, {
valueRange: [0, null] // null means "calculate max from the data"
});
Here's a full example.

Angularjs toolbar commands- disable and disable buttons

I am trying to disable and enable button:
for instance: If I click on Modify button I want to disable it and Enable Save button and if I click on Save button I want to enable Modify button and disable Save button. Thank you.
Below the Angularjs code:
angular.module('virtoCommerce.catalogModule')
.controller('virtoCommerce.catalogModule.categoriesItemsListController', ['$scope', function ($scope) {
var isFieldEnabled = true;
blade.updatePermission = 'catalog:update';
... (more codes but not included)
var formScope;
$scope.setForm = function (form) { formScope = form; }
//Save the prices entered by the user.
function savePrice()
{
//TODO: Save the price information.
}
function isDirty() {
return blade.hasUpdatePermission();
};
//function enablePriceField
function enablePriceField() {
var inputList = document.getElementsByTagName("input");
var inputList2 = Array.prototype.slice.call(inputList);
if (isFieldEnabled == true) {
for (i = 0; i < inputList.length; i++) {
var row = inputList2[i];
if (row.id == "priceField") {
row.disabled = false;
}
}
} else {
for (i = 0; i < inputList.length; i++) {
var row = inputList2[i];
if (row.id == "priceField") {
row.disabled = true;
}
}
}
//Set the flag to true or false
if (isFieldEnabled == true) {
isFieldEnabled = false
} else {
isFieldEnabled = true;
}
}
var formScope;
$scope.setForm = function (form) { formScope = form; }
function canSave() {
return isDirty() && formScope && formScope.$valid;
}
//Angular toolbar commands
blade.toolbarCommands = [
{
name: "platform.commands.modify",
icon: 'fa fa-pencil',
executeMethod: function () { enablePriceField();},
canExecuteMethod: function () { return true; }
},
{
name: "platform.commands.save",
icon: 'fa fa-floppy-o',
executeMethod: function () { savePrice(); },
canExecuteMethod: canSave,
permission: blade.updatePermission
}];
}]);
I am not sure I see how your code is related to the question, but you can enable/disable a button programatically using the ngDisabled directive (see the docs).
In your controller, intialize $scope.enableSave = true (of false, as you want). Then in your html:
<button class="btn btn-primary" ng-disabled="!enableSave" ng-click="enableSave=!enableSave">Save</button>
<button class="btn btn-primary" ng-disabled="enableSave" ng-click="enableSave=!enableSave">Modify</button>
You will toggle 'enableSave' each time you click on the active (ie. not disabled) button, which will in turn disable the button you just clicked, and enable the other one.
Sorry, I had not seen... I am not familiar with virtoCommerce, but if I understand correctly you want to update the 'canExecuteMethod' ? Maybe try something like that:
$scope.enableSave = false;
function canSave() {
return isDirty() && formScope && formScope.$valid && $scope.enableSave;
}
Then for the buttons:
{
name: "platform.commands.modify",
icon: 'fa fa-pencil',
executeMethod: function () {
enablePriceField();
$scope.enableSave = true;
},
canExecuteMethod: function () { return !canSave(); }
},
{
name: "platform.commands.save",
icon: 'fa fa-floppy-o',
executeMethod: function () {
savePrice();
$scope.enableSave = false;
},
canExecuteMethod: function () { return canSave(); },
permission: blade.updatePermission
}
As a side note, if isFieldEnabled is a boolean you can replace:
if (isFieldEnabled == true) {
isFieldEnabled = false
} else {
isFieldEnabled = true;
}
By: isFieldEnabled = !isFieldEnabled;

Is there a extJS tri state/three state checkbox?

Looking for a checkbox that can hold three states.
Use:
True, False, Unknown.
Expected behavior:
[x], [ ], [~]
Anyone know of anything?
Ext 3.* Tri-state from this website
Ext 6.2.1
This code exerpt is from sencha forums
{
name: 'optionalChange',
fieldLabel: 'Optional change',
xtype: 'tri-checkbox',
value: 'null'
},
.x-checkbox-null .x-form-checkbox-default {
border: 1px inset #a0a0a0;
background: lightgrey;
box-shadow: 0 0 0 1px hsl(0, 0%, 80%);
}
/**
* Tri-state Checkbox.
* Author: ontho & nux
* Source: https://www.sencha.com/forum/showthread.php?138664-Ext.ux.form.TriCheckbox&p=619810
*
* Note! You must add `x-checkbox-null` style for yourself.
* This might work for classic theme:
.x-checkbox-null .x-form-checkbox-default {
background-position: -39px -26px;
}
*
*/
Ext.define('Ext.ux.form.TriCheckbox', {
extend: 'Ext.form.field.Checkbox',
alias: ['widget.xtricheckbox', "widget.tri-checkbox"],
triState: true, // triState can dynamically be disabled using enableTriState
values: ['null', '0', '1'], // The values which are toggled through
checkedClasses: ['x-checkbox-null', '', Ext.baseCSSPrefix + 'form-cb-checked'], // The classes used for the different states
currentCheck: 0, // internal use: which state we are in?
getSubmitValue: function()
{
return this.value;
},
getRawValue: function()
{
return this.value;
},
getValue: function()
{
return this.value;
},
initValue: function()
{
var me = this;
me.originalValue = me.lastValue = me.value;
me.suspendCheckChange++;
me.setValue(me.value);
me.suspendCheckChange--;
},
setRawValue: function(v)
{
var me = this;
if (v === false || v == 0)
v = '0';
if (v === true || v == 1)
v = '1';
if (v == null || v == '' || v === undefined)
{
if (!this.triState)
v = '0';
else
v = 'null';
}
var oldCheck = me.currentCheck;
me.currentCheck = me.getCheckIndex(v);
me.value = me.rawValue = me.values[me.currentCheck];
// Update classes
var inputEl = me.inputEl;
if (inputEl)
{
inputEl.dom.setAttribute('aria-checked', me.value == '1' ? true : false);
}
me['removeCls'](me.checkedClasses)
me['addCls'](me.checkedClasses[this.currentCheck]);
},
// this is a defaul Checkbox style setter we need to override to remove defult behaviour
updateCheckedCls: function(checked) {
},
// Returns the index from a value to a member of me.values
getCheckIndex: function(value)
{
for (var i = 0; i < this.values.length; i++)
{
if (value === this.values[i])
{
return i;
}
}
return 0;
},
// Handels a click on the checkbox
listeners: {
afterrender: function()
{
var me = this;
this.el.dom.onclick = function(){
me.toggle();
return false;
};
}
},
// Switches to the next checkbox-state
toggle: function()
{
var me = this;
if (!me.disabled && !me.readOnly)
{
var check = me.currentCheck;
check++;
if (check >= me.values.length) {
check = (me.triState == false) ? 1 : 0;
}
this.setValue(me.values[check]);
}
},
// Enables/Disables tristate-handling at runtime (enableTriState(false) gives a 'normal' checkbox)
enableTriState: function(bTriState)
{
if (bTriState == undefined)
bTriState = true;
this.triState = bTriState;
if (!this.triState)
{
this.setValue(this.value);
}
},
// Toggles tristate-handling ar runtime
toggleTriState: function()
{
this.enableTriState(!this.triState);
}
});

Resources