How to change row color in datatables? - javascript

I am using datatables and currently stuck in changing a row to another color if value = INACTIVE, already tried many things but it has really weird error, my codes are :
"createdRow": function (row, data, dataIndex) {
if (data[9] = "INACTIVE") {
$(row).addClass("yellow");
} else {
$(row).addClass("white");
}
}
This code change all color row, but i want only change value INACTIVE
Thanks for the help!

You have a typo in your code.
In your if statement use == instead of =.
"createdRow": function (row, data, dataIndex) {
if (data[9] == "INACTIVE") {
$(row).addClass("yellow");
} else {
$(row).addClass("white");
}
}

In the condition, you are assigning the value "INACTIVE" to the data[9] instead of comparing the value. Subsequently, the condition only checks whether data[9] has some value, which is true, and class .yellow is always added.
So the condition should be like this if (data[9] == "INACTIVE") or rather if (data[9] === "INACTIVE") to perform check without type conversion.

In your if statement you are using a single '=' which is used for assignment. You should use double '=' to compare if the value is the same and triple '=' to compare if the value and the data types are the same.
You are also only checking index 9 of data. In your function you seem to also be passing in the index, you should instead change your code to something like this.
if ( data[ dataIndex ] === "INACTIVE" )

Related

Material UI checkbox toggle value based off input from object

I have an unchecked checkbox. I am trying to change the value of it based off of data from an object. The object is from an SQL select boolean column 'T' or 'F'. If the value is 'T' then the box would be checked vise versa. I tried using a useState() that viewed the value but that didn't work.
const [checkBoxState, setCheckBoxState] = React.useState(false);
//check to see if values are 't' or 'f' to change them to vaiable formats
function handleCheckState(databaseCondition) {
if (databaseCondition == "T") {
setCheckBoxState = true;
}
console.log(checkBoxState);
return checkBoxState;
}
This is the useState() I tried using.
<Checkbox checked={handleCheckState(data["validcycle"])} />
Here is the checkbox I want to toggle on/off based off that sql column.
Friend, you forgot to enclose hook in brackets, example : setState(value)
const [checkBoxState, setCheckBoxState] = React.useState(false)
function handleCheckState(databaseCondition) {
if (databaseCondition == 'T') setCheckBoxState(true)
else setCheckBoxState(false)
return checkBoxState
}
you must change the state using:
setCheckBoxState(true);
instead of:
setCheckBoxState = true;
the better approach is simply like this:
<Checkbox checked={databaseCondition === "T"} />

Tabulator: reformat cell on 'cellEdited' event

I am new at using Tabulator.js but I am willing to learn and use it deeply. I was indeed looking for a good tableGenerator library for a main project. So far, it seems to be pretty nice.
I am currently using a CND link for version 5.0.7.
Now here is my problem: I try to format cell with a background-color depending on the cell value (the cell name is status and the value can be either true or false). It works at the creation of the table. But it doesn't work if I change the cell value afterwards.
I created a method called statusFormatter:
statusFormatter: (cell) => {
if (cell.getValue() == true) {
cell.getElement().style.backgroundColor = "#A6A6DF";
}
return cell.getValue();
},
I call this method on the cellEdited event:
mainTable.on("cellEdited", function (cell) {
clientTabulator.statusFormatter(cell);
});
I suppose there is something wrong with the return in the method. But I don't know what to return when it is the style that I need.
Hope someone can help...
Change your statusFormatter function as
statusFormatter: function (cell, formatterParams, onRendered) {
let position = cell.getRow().getPosition();
// switch row even and odd color
let backgroundColor = cell.getValue() ? "#A6A6DF" : position % 2 ? "#efefef" : "#fff";
cell.getElement().style.backgroundColor = backgroundColor;
return cell.getValue();
}

Based on condition add true or false

I've 5 cells in a table. If the value are empty for those cells i need to disable them.
I can do something like this for each cells which work's.
function cellOne(params) {
if (params.value === null || params.value === undefined) {
return false
} else {
return true;
}
}
"CellOne": { disabled:cellOne }
is there any other way to check null value of each cell and add disable property instead of creating multiple function for each cells. Please help
You don't need to go for typescript code.You can do it in the template itself.
<your-cell [disabled]="!params.value"></your-cell>
Your function would return the same thing as :
function cellOne(params) {
return params.value != null
}
which you can easily inline instead of having a separate function for that.
To check for params that might be null or undefined too, you can use :
return params && params.value != null

Using Filter Function to Find Values Equal to False and Setting to True

In my Angular app I have a function that drills down to an array, and then uses a filter function to pull out values in a new array where "completed" is "false".
This is working as expected. And the way our data is, there is always one object in the array that has the property for "completed" set to "false", so I can target [0] to get to that. So, from there all I need to do is set it to "true". However, for whatever reason, how to accomplish this last step is eluding me.
This is my whole function, and what I've tried thus far:
private completeLastWorkflowStatus() {
let currentService = this.checkDiscipline();
for (let service of this.client.services) {
if (service.service === currentService) {
let targetWorkflow = service.workflow;
let inCompleteWorkflow = targetWorkflow.filter(workflow => workflow.completed === false);
console.log(inCompleteWorkflow);
if (inCompleteWorkflow[0].completed === false) {
inCompleteWorkflow[0].completed === true;
console.log(inCompleteWorkflow[0].completed);
}
}
}
}
For the last console.log listed above, I still get "false" as the value. What am I missing here? How can I set the value of "completed" to "true" for this one object in the array?
inCompleteWorkflow[0].completed === true; is not assignment. Do inCompleteWorkflow[0].completed = true;

Compare two arrays and using ng-style to mark equal entries in the arrays

I have a list which shows a query of words from a db, from there i can click on one word and it gets pushed to another list which i can save than. With this i can create different wordlists. What i want to do is to give the words another color if i have already pushed them on my new list.
To do so i use a function in my controller to compare the two lists with and angular.foreach. If wordFromQuery._id === wordOnNewList._id i gave the words another background color with ng-style.
Here is my code:
View
ng-repeat="word in searchWords" ng-click="addWordToSet(word)" ng-class="isInside(word)" ng-style="{ background: choosenWords.value == 'exist' ? 'lightgreen' : 'white' }"
I iterate over the words query (searchWords) and with addWordtoSet(word) i push them to my other array (this works great). isInside(word) will do the angular.foreach to compare the two arrays and the ng-style should provide different styles, according to the if-statement from the isInside function.
Controller
$scope.isInside = function (word) {
angular.forEach($scope.currentWordlist, function (item) {
if (item._id === word._id) {
$scope.choosenWords = {value: 'exist'};
} else {
$scope.choosenWords = {value: 'notOnList'};
}
});
};
The angular.forEach compares the words from both arrays. currentWordList is the array in which i push with addWordToSet
What happens is that one word on the searchword array gets the green color (and its set of by +1, so if the word in arraypos. 0 would be right the arraypos. 1 gets the green color).
I suspect that i did it all wrong with the ng-class element, but i didnt found another good opportunity to get the word._id another way. Did i do something obviously wrong here?
I would appreciate tips or hints. Thanks!
UPDATE
It works quite fine with the addWordToSet function:
$scope.addWordToSet = function (word) {
var exists = false;
angular.forEach($scope.currentWordlist, function (item) {
if (item._id === word._id) {
exists = true;
}
});
if (exists === false) {
$scope.currentWordlist.push(word);
}
};
The only thing i need i think is not doing this on click but instantly without clicking anything. is my ng-class="isInside(word)" the right choice for that?
You can assign a color to a variable inside the same function and use it in the view.
$scope.isInside = function (word) {
angular.forEach($scope.currentWordlist, function (item) {
if (item._id === word._id) {
$scope.choosenWords = {value: 'exist'};
$scope.color = 'lightgreen'
} else {
$scope.choosenWords = {value: 'notOnList'};
$scope.color = 'white'
}
});
};
ng-style="{'background-color':color}"
View:
ng-repeat="word in searchWords" ng-click="addWordToSet(word)" ng-class="isInside(word)" ng-style="{'background-color':color}" }"
Try
$scope.choosenWords.value = 'exist';
Also initialize choosenWords at the start of the controller.
If this doesn't work check the order of priority of execution of the ng modules.
Is the controller initialized through a partial?
I sat together with a friend and we came up with a working version of this problem, so here is the solution in case someone has a similar problem and hand.
In the Controller we used the following function:
$scope.isSelected = function (word) {
var found = false;
angular.forEach($scope.currentWordlist, function (item) {
if (item._id === word._id) {
found = true;
}
});
return found;
};
It uses the foreach to compare the arrays and if there are ids that are a match the found bool returns true.
In the View we used the following:
ng-class="isSelected(word) ? 'marked' : 'unmarked'"
which uses the marked or unmarked css class for, in my case, coloring the matched words in green (marked). All other words are getting the background color white.
here is the CSS:
.marked {
background: $lightgreen;
}
.unmarked {
background: $nicewhite;
}
In my case i use scss and colorvariables, but you can, of course use all other colors like red; or #fff. The result of this are two arrays that are views. The first one is a searchquery from a DB which shows all words. The second is a new array in which you can push words by clicking on one of the words. If you do so the word gets pushed AND it gets a green background. Thats it, i hope this is good information.

Categories