[Jerry PenguinParticipant]

Great Tip …

[Jerry PenguinParticipant]

Hello,
I have the same problem, as soon as I have used the columns format in columns. When I use a value other than “d” in columnsformat I get the same error when using aggregates. Therefore, I have created a localizationObject with the following function, this also works with your format:

/* #################################################################################################
 * #                                                                                               #
 * # Deutsche Lokalisierung als jqx localizationObject erstellen und uebergeben        ### START ###
 * # jf_getLocalizationDE() return localizationobj{}                                               #
 * #                                                                                               #
 * ################################################################################################# */
var jf_getLocalizationDE = function () {
	var localizationobj = {};
	localizationobj.pagergotopagestring = "Gehe zu:";
	localizationobj.pagershowrowsstring = "Zeige Zeile:";
	localizationobj.pagerrangestring = " von ";
	localizationobj.pagernextbuttonstring = "voriger";
	localizationobj.pagerpreviousbuttonstring = "nächster";
	localizationobj.sortascendingstring = "Sortiere aufsteigend";
	localizationobj.sortdescendingstring = "Sortiere absteigend";
	localizationobj.sortremovestring = "Entferne Sortierung";
	localizationobj.firstDay = 1;
	localizationobj.percentsymbol = "%";
	localizationobj.currencysymbol = " €";
	localizationobj.currencysymbolposition = "after";
	localizationobj.decimalseparator = ",";
	localizationobj.thousandsseparator = ".";
	var days = {
		// full day names
		names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
		// abbreviated day names
		namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
		// shortest day names
		namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
	};
	localizationobj.days = days;
	var months = {
		// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
		names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
		// abbreviated month names
		namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez", ""]
	};
	var patterns = {
		//d: "dd.MM.yyyy",
		// here is your date format:
		d: "MMM yyyy",
		D: "dddd, d. MMMM yyyy",
		t: "HH:mm",
		T: "HH:mm:ss",
		f: "dddd, d. MMMM yyyy HH:mm",
		F: "dddd, d. MMMM yyyy HH:mm:ss",
		M: "dd MMMM",
		Y: "MMMM yyyy"
	}
	localizationobj.patterns = patterns;
	localizationobj.months = months;
	localizationobj.todaystring = "Heute";
	localizationobj.clearstring = "Löschen";
	return localizationobj;
}

The string for your aggregate should be:

renderstring += '<div id="AggDatum_von" style="position: relative; margin: 4px; overflow: hidden;">' + dateFormat(parseInt(value.replace(/\./g, "")), "mmm-yyyy") + '</div>';

My column is defined as:

					{
						text:			'Datum von',
						datafield:		'Datum_von',
						// use only this cellsformat !!! otherwise Error!
						cellsformat:		'd',
						cellsalign:		'right',
						width:			100,
						aggregates:
							[
								{
									'mindate':		function (aggregatedValue, currentValue)
										{
											if (aggregatedValue == 0) {
												aggregatedValue = currentValue;
											} else {
												if (dates.compare(currentValue, aggregatedValue) == -1) {
													aggregatedValue = currentValue;
												}
											}
											return new Date(aggregatedValue);
										}
								}
							],
						aggregatesrenderer: function (aggregates)
							{
								var renderstring = "";
								$.each(aggregates, function (key, value) {
									//renderstring += '<div id="AggDatum_von" style="position: relative; margin: 4px; overflow: hidden;">' + dateFormat(parseInt(value.replace(/\./g, "")), "dd.mm.yyyy") + '</div>';
									// your renderstring:
									renderstring += '<div id="AggDatum_von" style="position: relative; margin: 4px; overflow: hidden;">' + dateFormat(parseInt(value.replace(/\./g, "")), "mmm-yyyy") + '</div>';
								});
								return renderstring;
							},
					},

My js function for dates are:

/* #################################################################################################
 * # dateFormat()                                                                      ### START ###
 * #################################################################################################
 *
 * Date Format 1.2.3
 * (c) 2007-2009 Steven Levithan <stevenlevithan.com>
 * MIT license
 *
 * Includes enhancements by Scott Trenda <scott.trenda.net>
 * and Kris Kowal <cixar.com/~kris.kowal/>
 *
 * Accepts a date, a mask, or a date and a mask.
 * Returns a formatted version of the given date.
 * The date defaults to the current date/time.
 * The mask defaults to dateFormat.masks.default.
 *
 * Source:	http://stevenlevithan.com/assets/misc/date.format.js
 *
 * Blog:	http://blog.stevenlevithan.com/archives/date-time-format (incl. Documenation)
 *
 * ################################################################################################# */

var dateFormat = function () {
	var	token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
		timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
		timezoneClip = /[^-+\dA-Z]/g,
		pad = function (val, len) {
			val = String(val);
			len = len || 2;
			while (val.length < len) val = "0" + val;
			return val;
		};

	// Regexes and supporting functions are cached through closure
	return function (date, mask, utc) {
		var dF = dateFormat;

		// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
		if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
			mask = date;
			date = undefined;
		}

		// Passing date through Date applies Date.parse, if necessary
		date = date ? new Date(date) : new Date;
		if (isNaN(date)) throw SyntaxError("invalid date");

		mask = String(dF.masks[mask] || mask || dF.masks["default"]);

		// Allow setting the utc argument via the mask
		if (mask.slice(0, 4) == "UTC:") {
			mask = mask.slice(4);
			utc = true;
		}

		var	_ = utc ? "getUTC" : "get",
			d = date[_ + "Date"](),
			D = date[_ + "Day"](),
			m = date[_ + "Month"](),
			y = date[_ + "FullYear"](),
			H = date[_ + "Hours"](),
			M = date[_ + "Minutes"](),
			s = date[_ + "Seconds"](),
			L = date[_ + "Milliseconds"](),
			o = utc ? 0 : date.getTimezoneOffset(),
			flags = {
				d:    d,
				dd:   pad(d),
				ddd:  dF.i18n.dayNames[D],
				dddd: dF.i18n.dayNames[D + 7],
				m:    m + 1,
				mm:   pad(m + 1),
				mmm:  dF.i18n.monthNames[m],
				mmmm: dF.i18n.monthNames[m + 12],
				yy:   String(y).slice(2),
				yyyy: y,
				h:    H % 12 || 12,
				hh:   pad(H % 12 || 12),
				H:    H,
				HH:   pad(H),
				M:    M,
				MM:   pad(M),
				s:    s,
				ss:   pad(s),
				l:    pad(L, 3),
				L:    pad(L > 99 ? Math.round(L / 10) : L),
				t:    H < 12 ? "a"  : "p",
				tt:   H < 12 ? "am" : "pm",
				T:    H < 12 ? "A"  : "P",
				TT:   H < 12 ? "AM" : "PM",
				Z:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
				o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
				S:    ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
			};

		return mask.replace(token, function ($0) {
			return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
		});
	};
}();

// Some common format strings
dateFormat.masks = {
	"default":      "ddd mmm dd yyyy HH:MM:ss",
	shortDate:      "m/d/yy",
	mediumDate:     "mmm d, yyyy",
	longDate:       "mmmm d, yyyy",
	fullDate:       "dddd, mmmm d, yyyy",
	shortTime:      "h:MM TT",
	mediumTime:     "h:MM:ss TT",
	longTime:       "h:MM:ss TT Z",
	isoDate:        "yyyy-mm-dd",
	isoTime:        "HH:MM:ss",
	isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",
	isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};

// Internationalization strings
dateFormat.i18n = {
	dayNames: [
		"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
		"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
	],
	monthNames: [
		"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
		"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
	]
};

// For convenience...
Date.prototype.format = function (mask, utc) {
	return dateFormat(this, mask, utc);
};
/* #################################################################################################
 * # dateFormat()                                                                      ### ENDE  ###
 * ################################################################################################# */
/* #################################################################################################
 * # diverse Datums Funktionen                                                         ### START ###
 * #################################################################################################
 *
 * Source:	http://stackoverflow.com/questions/497790
 *
 * ################################################################################################# */
var dates = {
    convert:function(d) {
        // Converts the date in d to a date-object. The input can be:
        //   a date object: returned without modification
        //  an array      : Interpreted as [year,month,day]. NOTE: month is 0-11.
        //   a number     : Interpreted as number of milliseconds
        //                  since 1 Jan 1970 (a timestamp) 
        //   a string     : Any format supported by the javascript engine, like
        //                  "YYYY/MM/DD", "MM/DD/YYYY", "Jan 31 2009" etc.
        //  an object     : Interpreted as an object with year, month and date
        //                  attributes.  **NOTE** month is 0-11.
        return (
            d.constructor === Date ? d :
            d.constructor === Array ? new Date(d[0],d[1],d[2]) :
            d.constructor === Number ? new Date(d) :
            d.constructor === String ? new Date(d) :
            typeof d === "object" ? new Date(d.year,d.month,d.date) :
            NaN
        );
    },
    compare:function(a,b) {
        // Compare two dates (could be of any type supported by the convert
        // function above) and returns:
        //  -1 : if a < b
        //   0 : if a = b
        //   1 : if a > b
        // NaN : if a or b is an illegal date
        // NOTE: The code inside isFinite does an assignment (=).
        return (
            isFinite(a=this.convert(a).valueOf()) &&
            isFinite(b=this.convert(b).valueOf()) ?
            (a>b)-(a<b) :
            NaN
        );
    },
    inRange:function(d,start,end) {
        // Checks if date in d is between dates in start and end.
        // Returns a boolean or NaN:
        //    true  : if d is between start and end (inclusive)
        //    false : if d is before start or after end
        //    NaN   : if one or more of the dates is illegal.
        // NOTE: The code inside isFinite does an assignment (=).
       return (
            isFinite(d=this.convert(d).valueOf()) &&
            isFinite(start=this.convert(start).valueOf()) &&
            isFinite(end=this.convert(end).valueOf()) ?
            start <= d && d <= end :
            NaN
        );
    }
}
/* #################################################################################################
 * # diverse Datums Funktionen                                                         ### ENDE  ###
 * ################################################################################################# */
/* #################################################################################################
 * # DateDiff( dfrom, dto, selector ) Doku. sie unten bzw. in den Links                ### START ###
 * #################################################################################################
 *
 * Source:	http://forum.jswelt.de/tutorials-javascript/49954-datums-zeitdifferenzen-berechnen-function-datedif.html#post313995
 *
 * Forum: 	http://forum.jswelt.de/tutorials-javascript/49954-datums-zeitdifferenzen-berechnen-function-datedif.html
 *
 * ################################################################################################# */
function DateDiff(dfrom,dto,selector){
//dfrom: Startdatum als String, "" für das aktuelle Datum/Zeit oder Date-Object
//dto:   Enddatum als String, "" für das aktuelle Datum/Zeit  oder Date-Object
//selctor: 'ms' Millisekunden, 's' Sekunden, 'm' Minuten, 'h' Stunden,
// 'd' tage, 'w' wochen, 'y' ganze Jahre
	var r,dfy,dy;
	var osl = {ms:1,s:1000,m:60000,h:3600000,d:86400000,w:604800000,y:-1};
	var df = typeof(dfrom)=="object" ? dfrom : dfrom=="" ? new Date() : new Date(dfrom);
	var dt = typeof(dto)=="object" ? dto : dto=="" ? new Date() : new Date(dto);
	var sl = osl[selector] || 1;
	var sz= sl >= osl['d'] ? (df.getTimezoneOffset()-dt.getTimezoneOffset())*60000 : 0;
	if(sl > 0) return (dt.getTime() - df.getTime() +sz)/sl;
	else { dfy = df.getFullYear();
	dy =			 dt.getFullYear() - dfy;
	dt.setFullYear(dfy);
	return (dt.getTime() < df.getTime()) ? dy -1 : dy; }
}
/* #################################################################################################
 * # DateDiff( dfrom, dto, selector ) Doku. sie unten bzw. in den Links                ### ENDE  ###
 * ################################################################################################# */

The localizationObject should be defined in jqxGrid as:

				localization:		jf_getLocalizationDE(),

I hope this helps you further …

Have a nice weekend…

Jörn

[Jerry PenguinParticipant]

Hi Part13an,

I have had a similar problem and have solved it with the following code. It determines min Date in a column and writes it as “aggregate” into the status line with “aggregatesrenderer”:

						aggregates:
							[
								{
									'mindate':		function (aggregatedValue, currentValue)
										{
											if (aggregatedValue == 0) {
												aggregatedValue = currentValue;
											} else {

												if (dates.compare(currentValue, aggregatedValue) == -1) {
													aggregatedValue = currentValue;
												}
											}
											return new Date(aggregatedValue);
										}
								}
							],
						aggregatesrenderer: function (aggregates)
							{
								var renderstring = "";
								$.each(aggregates, function (key, value) {
									renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + dateFormat(parseInt(value.replace(/\./g, "")), "dd.mm.yyyy") + '</div>';
								});
								return renderstring;
							},

greetings
Jörn

[Jerry PenguinParticipant]

Hi Dimitar,

I have found a solution:

			var dataAdapter = new $.jqx.dataAdapter(source, 
				{
					beforeLoadComplete: function (records) {
						for (var i = 0; i < records.length; i++) {
							var _AnzTage	= Math.round(DateDiff(records[i]['Datum_von'], records[i]['Datum_bis'], "d")) + 1;
							records[i]['AnzTage'] = _AnzTage;
							//console.log("AnzTage1=" + _AnzTage);
							//console.log("AnzTage2=" + records[i]['AnzTage']);
							var _TagesVerbrauch	= records[i]['Verbrauch'] / _AnzTage;
							records[i]['TagesVerbrauch'] = _TagesVerbrauch;
							//console.log("TagesVerbrauch1=" + _TagesVerbrauch);
							//console.log("TagesVerbrauch2=" + records[i]['TagesVerbrauch']);
						}
					}
				}
			);

It works fine, I can sort the columns and I can use the build in cellsformat in columns with my localization objects.

Thanks and have a nice weekend

Greetings Jörn

[Jerry PenguinParticipant]

Hi Dimitar,

Thanks for the quick reply, it works, I have built the following function:

Ready: function () {
	Var rows = $ ( '# jqxGrid') jqxGrid ( 'getrows');
	For (var i = 0; i <rows.length; i ++) {
	Var _AnzTage = Math.round (DateDiff (rows [i] .Date_from, rows [i] .Date_bis, "d")) + 1;
		$ ( '# JqxGrid'). JqxGrid ( 'setcellvalue', i, 'days', _daysdays);
		//Console.log ( "AnzTage =" + _AnzTage);
	}
},

But I have now the problem that for each line I use the method setcellvalue the “updaterow” function of my source object is called and an update is written to the MySQL database.

Now my question:
Can I define a function in the source object that calculates a field while reading the JSON data?
I have neither found a method in the API of jqxGrid nor in the jqxDataAdapter API such as “selectrow”, since there is a way, such as:

datafields: [
	{ name: 'ZigID' },
	{ name: 'Datum_von', type: 'date' },
	{ name: 'Datum_bis', type: 'date' },
	{ name: 'Verbrauch' },
	{ name: 'AnzTage' },
	{ name: 'TagesVerbrauch' = 'Verbrauch' / 'AnzTage'}

Thanks in advance

Greetings Jörn

[Jerry PenguinParticipant]

Hi Dimitar,
is it possible to see a Demo for such a callback function.
My problem is, that i work with date columns in different localization.
In the computed columns I have computed date fields, date-diffs and average usage of counts.
I need to sort the computed numbers columns.
But I have no idea who to implement a callback function.
I have tried to use $(“#jqxGrid”).jqxGrid(‘setcellvalue’, index, “TagesVerbrauch”,usage); in the cellrenderer function, but this gives a loopback.

Thanks in advance
Jörn

[Jerry PenguinParticipant]

[Author]

Posts