Forum Replies Created

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts

  • Jerry Penguin
    Participant

    Great Tip …

    in reply to: how to froze rows as footer how to froze rows as footer #88766

    Jerry Penguin
    Participant

    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

    • This reply was modified 3 years, 9 months ago by  Jerry Penguin.
    in reply to: how to froze rows as footer how to froze rows as footer #88569

    Jerry Penguin
    Participant

    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 Penguin
    Participant

    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 Penguin
    Participant

    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 Penguin
    Participant

    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

    in reply to: JSON menu page navigation JSON menu page navigation #88380

    Jerry Penguin
    Participant
Viewing 7 posts - 1 through 7 (of 7 total)