css-format with angular

Webix JS
1

Hi, Here is my scenario.
In webix datatable I have column called votes and this column gets updated every second. I want to blink the cell to green (once) when new value for votes is > old value and when new value is smaller i want to blink it to red( once). In short i am after ticking effects as votes goes up and down.
I have two problems so far

  1. even if i define my format function in controller Webix datatable is not loading and error i get is “Uncaught ReferenceError: mark_update is not defined”
  2. how to get the access to the previous value of the updated cell so that i can compare them?

Thanks
Toshendra

2

(1) Can you share a snippet or demo link, where problem can be checked
mark_update - this name is not a part of webix.js, so error somehow related to your code.

(2) there is no way unfortunately, you can use a code which will make a copy of data property just after loading, so each item will have value and old_value properties.

3

in Style I have

.rating {
text-align: center;
}

	.highlight{
		background-color:#FFAAAA;
	}
	
</style>

HTML Body Code




Rating

Year

Votes

Title




Add Row

Controller code

‘use strict’;

/* App Module */

webix.i18n.decimalFormat = webix.Number.numToStr({
groupDelimiter: ‘,’,
groupSize: 3,
decimalDelimiter: ‘.’,
decimalSize: 2
});

var app = angular.module(‘webixApp’, [ “webix” ]);

app.controller(“webixTestController”, function ($scope) {
function mark_update(value) {
if (value > 0)
return “highlight”;
};
$scope.records = [
{ id:1, title:“The Shawshank Redemption”, year:1994, votes:678790, rating:9.2, rank:1},
{ id:2, title:“The Godfather”, year:1972, votes:511495, rating:9.2, rank:2},
{ id:3, title:“The Godfather: Part II”, year:1974, votes:319352, rating:9.0, rank:3},
{ id:4, title:“The Good, the Bad and the Ugly”, year:1966, votes:213030, rating:8.9, rank:4},
{ id:5, title:“My Fair Lady”, year:1964, votes:533848, rating:8.9, rank:5},
{ id: 6, title: “12 Angry Men”, year: 1957, votes: 164558, rating: 8.9, rank: 6 }
];
$scope.addRecord = function () {
var record = $$(“grid”).getItem(4);
record[“votes”] = 80;
$$(“grid”).updateItem(4, record);

  $scope.records.push({
	title:"New Record",
	rating:999,
	votes:0,
	year:2013
});

};

$scope.random = function () {
$scope.records.forEach(function (v, k) {
$scope.$apply(
function () {

              v.votes = Math.random();
              $$("grid").updateItem(v.id, v);
          }
      );
  });

}

setInterval(function () {
console.log(‘wtf’);
$scope.random();
}, 1000);

});

Hope this helps
Thanks
Toshendra

4 
             <body >
    <div webix-ui type="space" ng-controller="webixTestController">
    <!--<div height="45">
        <div webix-ui view="toolbar" style="width: 100%;">
            <div view="toggle" width="80 px" height="35 px" click='webix.$$("newsView").show()' type="iconButton" align="center" icon="cog" label="News"></div>
        </div>
    </div>-->
    <div view="cols" type="wide" margin="10">
        <div webix-ui view="datatable" webix-data="records" select="row" resize-column="true" id="grid">
            <div view="column" id="rating" sort="int" css="rating">Rating</div>
            <div view="column" id="year" sort="int">Year</div>
            <div view="column" id="votes" sort="int" format="decimalFormat" css-format="mark_update">Votes</div>
            <div view="column" id="title" sort="string" fillspace="1">Title</div>
        </div>
    </div>
    <div height="35">
        <button ng-click="addRecord()">Add Row</button>
    </div>
</div>
<!--<div webix-ui view="window" id="newsView" move="true"  height="300" width="400" position="center" ng-controller="newsController">
    <div view="head">
        <div view="toolbar" stack="cols" background="Blue">
            <div view="label" label="News"></div>
            <div view="icon" icon="times-circle" css="alter"  click='closeSelf'></div>
        </div>
    </div>
    <div view="rows">
        <div>testing testing</div>
    </div>
</div>-->
5

I prepared a demo to show my issue
http://webix.com/snippet/eb7ffc41

6

Check the updated snippet

http://webix.com/snippet/35709971

  • helper function assigned to the scope
  • obj[column] used instead of value
7

Thanks Maksim, It works but can you explain what are those function arguments.
function(value, obj, row, column)
Value ?
Obj (DataTable)?
row (row number) ?
column (column Number)?

8
  • value of current cell ( with formatting applied )
  • all data of the row ( object with values for all cells in the current row )
  • row id
  • column id