We Keep Coding

Tabulator: autoColumnsDefinitions using custom cell formatter and dynamically defined fields?

I have an ajax Tabulator in which I'd like to use a custom cell formatter on columns which are dynamically (but similarly) defined.
Let's say I have a dataset of People with "Event" columns, where the ajax response can contain up to 50 Event fields, named Event1,Event2...Event50.
I could manually repeat the definitions using the Column Definition Array or Field Name Lookup Object approaches, like:
autoColumnsDefinitions:{
PersonID: { title:"ID #", align:"right"},
Event1: {formatter: eventFormatter},
Event2: {formatter: eventFormatter},
...[variable # of Event cols here]...
},
...
function eventFormatter(cell){
// format event here
}
However, using a callback seems more appropriate. When I try something like this, my eventFormatter is never invoked, and no errors or warnings are raised.
autoColumnsDefinitions:function(definitions){
definitions.forEach((column) => {
if(column.field.match(/Event/)) {
column = {
formatter:eventFormatter
}
}
Is it possible to apply a custom cell formatter to fields that are not explicitly named prior to data loading?

Your must update 'column' with formatter as
autoColumnsDefinitions: function (definitions) {
return definitions.map((column) => {
if (column.field.match(/(name|title)/)) {
column.formatter = titleFormatter;
}
return column;
});
}
See JSFiddle

How to change row color in datatables?

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" )

Filter ng-repeat by status

I have a dropdown with values in it. They're accessed through the .value property. I have an ng-repeat on a div that is repeating a lot of data. That data has statuses. When a user selects to filter by a status in the dropdown, I want to filter the ng-repeat by whatever status they chose and the status in the ng-repeat. Here's a better example of what I mean:
data-ng-repeat="stackoverflow in overflows| filter:stackoverflow.property.status===status.value"
In my case, I need to access stackoverflow.property.status and compare it to whatever status is in the drop down.

You'll want to do something like the following:
<span ng-repeat="stackoverflow in overflows | filter: { status : selectedStatus }"></span>
selectedStatus will be the value of ng-model on your dropdown.

You could have something like this
ng-repeat="stackoverflow in overflows | filter: { locations: [{ status: status.value }] }"

Under the circumstances, it ended up just being easier to write my own function and filter by it. In this case, I have a function search that I pass to filter. Works great for me.
I followed an answer that I found on another question. You can view it here: http://jsfiddle.net/suCWn/
$scope.search = function (shop) {
if ($scope.selectedCityId === undefined || $scope.selectedCityId.length === 0) {
return true;
}
var found = false;
angular.forEach(shop.locations, function (location) {
if (location.city_id === parseInt($scope.selectedCityId)) {
found = true;
}
});
return found;
};`
Here's the question: Angularjs filter nested object

OpenUI5 binding property with a function, instead of direct access

I would like to bind a property (flag_baz in this case) from a JSONModel to a checkbox.
Thing is that the json model looks like this.
{
foo: "Foo",
bar:"Bar",
flag_baz : "X"
}
in this case X means "true" and an empty string means "false"
What i would like to do is evaluate a function for binding from model to the checkbox (that would translate "X"/"" to true/false) and evaluate some other function when binding from the checkbox to the model (that would translate from true/false back to "X"/"").
i would like to have something like this:
var checkBox = new Checkbox();
checkBox.bindProperty("checked", "flag_baz", funcFromStringToBool, funcFromBoolToString);
i know the funcFromStringToBool is called a formatter.
how would i add the funcFromBoolToString function?
Hope this makes sense.
Thx in advance.

Well in case some cares i've found the answer on my own.
All bindings can use a type like so
checkBox.bindProperty("checked", {
path : "flag_baz",
type : new BooleanStringType()
});
the BooleanStringType class would look like this:
sap.ui.model.SimpleType.extend("BooleanStringType", {
//called when going from model to ui
formatValue : function(flag_baz){
return flag_baz === "X";
},
//called when going from ui back to the model
parseValue : function(flag_baz){
return flag_baz ? "X" : "";
},
validateValue : function(flag_baz){
//some validation if needed
}
});

Angularjs filtering over array of objects in ngRepeat doesn't restore items with empty search property

Please, consider the following example:
Template:
<body ng-controller="MainCtrl">
Search: <input ng-model="search.$" ><br>
Search by tag: <input ng-model="search.tag" >
<p ng-repeat="item in items | filter:search">
<span>{{item.content}}</span> <span>{{item.tag}}</span>
</p>
</body>
Script:
app.controller('MainCtrl', function ($scope, $filter, filterFilter) {
$scope.items = [
{content:'3333113', tag:['a','b','c']},
{content:'111111g', tag:['b','c','d']},
{content:'345345', tag:[]},
{content:'2221122', tag:['c','d','e']},
{content:'2221122', tag:[]},
{content:'333', tag:[]}
];
});
When searching via the first input ng-model="search.$" with any data everything is Ok.
When searching via the seond input ng-model="search.tag" search does work by tags like a, b, but when it is cleared the restored array lacks the items which had empty search value, e.g. {content:'2221122', tag:[]} in this example.
jsBin example
Why does it happen ? Is there an easy way to avoid it ?

Short answer:
here is a working code: http://jsbin.com/AwunOyAt/2
You need a directive to make search.tag undefined when it's empty:
Directive:
app.directive('modelUndefined', function(){
return {
require: 'ngModel',
link: function(scope,elm,attrs,ngModel){
ngModel.$parsers.push(function(val){
return val === "" ? undefined : val;
});
}
}
});
html:
<input ng-model="search.tag" model-undefined>
Long answer:
From the docs of filter:filter:
In HTML Template Binding
{{ filter_expression | filter:expression:comparator }}
Parameters#expression
Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object. That's equivalent to the simple substring match with a string as described above.
As you can see, the filter expression can be an object with more then one predicates.
how to trace it?
Initially ngModel won't set search.tag until there is an input so it's still undefined.
First I pass an input into search.$, the search object looks like so:
$scope.search = {
'$' : 'something'
}
Then I'll pass something into search.tag, the search object:
$scope.search = {
'$' : 'something',
'tag': 'anything'
}
But when I clear it then the search object still have the tag property
$scope.search = {
'$' : 'something',
'tag': ''
}
filter:filter filters based on both predicates, this is the source code:
case "object":
// jshint +W086
for (var key in expression) {
(function(path) {
if (typeof expression[path] == 'undefined') return;
predicates.push(function(value) {
return search(path == '$' ? value : (value && value[path]), expression[path]);
});
})(key);
In our case the expression is the search object , and the paths are $ and tag.
See this line: if (typeof expression[path] == 'undefined') return;
If we set search.tag = undefined , the filter ignores it.
But If we set search.tag = '' this tag path is added to the predicates check array.
How to enforce ngModel to make search.tag undefined when it's empty?
See the directive above, you need to use ngModelController#$parsers to change the way the view value is converted when it updates the model.

I do not know if it helps but I put in the following:
<p>{{search.tag == undefined}}</p>
It then showed that initially it is undefined und later on it is an empty string (if you empty the input). The search results then kind of make sense.

Looks like there is a change in AngularJS version 1.2.10. Using https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js does not eliminate empty entries.