Cellformat with date not working if the data has null

[mohanaraoParticipant]

Hi,

We are having an issue when using the cell format with date format not working if any row has a null value in it.

Please look at working example where the dob and dobAnother columns in the plunker

Plunker link

Actual grid configuration is below

(function() {
‘use strict’;

angular
.module(‘jqWidgetsDemo’)
.controller(‘demoController’, DemoController);

DemoController.$inject = [‘$scope’];

function DemoController ($scope) {
// Grid data.
var data = [];
var firstNames = [“Nancy”, “Andrew”, “Janet”, “Margaret”, “Steven”, “Michael”, “Robert”, “Laura”, “Anne”];
var lastNames = [“Davolio”, “Fuller”, “Leverling”, “Peacock”, “Buchanan”, “Suyama”, “King”, “Callahan”, “Dodsworth”];
var titles = [“Sales Representative”, “Vice President, Sales”, “Sales Representative”, “Sales Representative”, “Sales Manager”, “Sales Representative”, “Sales Representative”, “Inside Sales Coordinator”, “Sales Representative”];
var address = [“507 – 20th Ave. E. Apt. 2A”, “908 W. Capital Way”, “722 Moss Bay Blvd.”, “4110 Old Redmond Rd.”, “14 Garrett Hill”, “Coventry House”, “Miner Rd.”, “Edgeham Hollow”, “Winchester Way”, “4726 – 11th Ave. N.E.”, “7 Houndstooth Rd.”];
var city = [“Seattle”, “Tacoma”, “Kirkland”, “Redmond”, “London”, “London”, “London”, “Seattle”, “London”];
var country = [“USA”, “USA”, “USA”, “USA”, “UK”, “UK”, “UK”, “USA”, “UK”];
var dob = [null,1478716082000,1478716082000,1478716082000,1478716082000,1478716082000,1478716082000,1478716082000,1478716082000]
var dobAnother = [1478716082000,1478716082000,1478716082000,1478716082000,1478716082000,1478716082000,1478716082000,1478716082000,1478716082000]

for (var i = 0; i < firstNames.length; i++) {
var row = {};
row[“firstname”] = firstNames[i];
row[“lastname”] = lastNames[i];
row[“title”] = titles[i];
row[“address”] = address[i];
row[“city”] = city[i];
row[“country”] = country[i];
row[“dob”] = null;
if(dob[i] !== null){
row[“dob”] = new Date(dob[i]);
}
row[“dobAnother”] = null;
if(dobAnother[i] !== null){
row[“dobAnother”] = new Date(dobAnother[i]);
}
data[i] = row;
}
$scope.people = data;
$scope.columns =
[
{ text: ‘Name’, datafield: ‘firstname’, width: 120 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 120 },
{ text: ‘Dob’ ,datafield:’dob’ , width:120, cellsformat: ‘MM/dd/yyyy’},
{ text: ‘Dob Another’ ,datafield:’dobAnother’ , width:120, cellsformat: ‘MM/dd/yyyy’},
{ text: ‘Title’, datafield: ‘title’, width: 180 },
{ text: ‘Address’, datafield: ‘address’, width: 180},
{ text: ‘City’, datafield: ‘city’, width: 90 },
{ text: ‘Country’, datafield: ‘country’ },
];
}
})();

[mohanaraoParticipant]

Plunker link is the below

https://plnkr.co/edit/5aQdcq?p=preview

[mohanaraoParticipant]

Also, I want to use the unix date format instead of converting it to date object. Is there a way to achieve that

[HristoParticipant]

Hello mohanarao,

You should use the DataAdapter and set type ‘date’ for these fields.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[mohanaraoParticipant]

Hi Hristo,

Is there any alternative syntax to use data adapter part from the jquery way?

Because we would like to not to use $ syntax.

var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });

Also with this dataAdapter we have to repeat the same column information two times. one in the source and another in columns

[HristoParticipant]

Hello mohanarao,

Unfortunately, it is not possible for now but we create a new integration with the new Angular 2 (4) and there it is not needed to use “$” sign.
Please, take a look at this example:
http://www.jqwidgets.com/angular/angular-grid/angular-grid-bindingtojsarray.htm

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts