jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts

March 26, 2014 at 7:41 pm in reply to: My first CRUD app / Problems My first CRUD app / Problems #51983

wfr

Participant

Thank you, Dimitar.

Have you an idea, why the delete and update is not working?

Walter

March 25, 2014 at 6:13 pm in reply to: My first CRUD app / Problems My first CRUD app / Problems #51863

wfr

Participant

Thank you for your reply,

Is is correct to do it this way?

var generaterow = function (i) {
              var row = {};
              row["bh_id"] = {};
                row["datum"] = {};
                row["bank"] = {};
                row["bank_wert"] = {};
                row["zu_an"] = {};
                row["zu_wert"] = {};
                return row;
             }

I have no errors. But no button is doing what it should. Any hints?
Walter

March 24, 2014 at 1:23 pm in reply to: My first CRUD app / Problems My first CRUD app / Problems #51752

wfr

Participant

Hi Peter,

I have still no clue what I have to do to get the app running.
I guess it’s the generaterow function.

  var generaterow = function (i) {
              var row = {};
              row["bh_id"] = bh_id;
                row["datum"] = datum;
                row["bank"] = bank;
                row["bank_wert"] = bank_wert;
                row["zu_an"] = zu_an;
                row["zu_wert"] = zu_wert;
                return row;
             }
        
            
           // for (var i = 0; i < 2; i++) {
             //   var row = generaterow(i);
               // data[i] = row;
            // }

How would the code look like if I wanted to add a empty row?

Thank you
Walter

March 19, 2014 at 1:30 pm in reply to: My first CRUD app / Problems My first CRUD app / Problems #51400

wfr

Participant

Hi Sigit,

Have you come to a solution yet?

Walter

March 16, 2014 at 10:02 am in reply to: My first CRUD app / Problems My first CRUD app / Problems #51085

wfr

Participant

Hi Dimitar,

I have updated to 1.11.0 – and yes the errors were gone. I have also solved the syntax error.
The grid and the data is shown again – so we are a little closer to the solution!

I noticed that the generaterow function is missing, so I tried to implement and modify it according to my data.

<script>
        
        var generaterow = function (bh_id) {
                var row = {};
                row["bh_id"] = bh_id;
                row["datum"] = datum;
                row["bank"] = bank;
                row["bank_wert"] = bank_wert;
                row["zu_an"] = zu_an;
                row["zu_wert"] = zu_wert;
                return row;
            }

Not sure where the error is, but the buttons still don’t work.
When pressing the ‘Add New Row’ button, it should generate a empty row.
For reference here is the complete html again:

<!DOCTYPE html> 
<html>

<head> 

	<title>Titel</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
	<script type="text/javascript" src="../../jqwidgets/scripts/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqwidgets/jqx-all.js"></script>
	<script type="text/javascript" src="../../jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/demos/sampledata/generatedata.js"></script>
    

	<script>
        
        var generaterow = function (bh_id) {
                var row = {};
                row["bh_id"] = bh_id;
                row["datum"] = datum;
                row["bank"] = bank;
                row["bank_wert"] = bank_wert;
                row["zu_an"] = zu_an;
                row["zu_wert"] = zu_wert;
                return row;
            }

        
		$(document).ready(function () 
		{				
			// prepare the data
			var source =
			{
				datatype: "json",
				cache: false,
				datafields: 
				[
				{ name: 'bh_id' },
				{ name: 'datum', type: 'date' },
				{ name: 'bank', type: 'string' },
				{ name: 'bank_wert', type: 'number' },
				{ name: 'zu_an', type: 'string' },
				{ name: 'zu_wert', type: 'number' },
				],
				id: 'bh_id',
				url: 'data.php',				
		
				// ADD ROW
				addrow: function (rowid, rowdata, position, commit) 
				{
				// synchronize with the server - send insert command
				var data = "insert=true&" + $.param(rowdata);
				$.ajax(
				{
				dataType: 'json',
				url: 'data.php',
				data: data,
				cache: false,
				success: function (data, status, xhr) 
				{
				// insert command is executed.
				commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
				commit(false);
				}
				}); 
						
				},
				
				// DELETE ROW
				deleterow: function (rowid, commit) 
				{
				// synchronize with the server - send delete command
				var data = "delete=true&" + $.param({bh_id: rowid});
				$.ajax({
				dataType: 'json',
				url: 'data.php',
				cache: false,
				data: data,
				success: function (data, status, xhr) {
				// delete command is executed.
				commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
				commit(false);
				}
				});
				},
				
				// UPDATE ROW
				updaterow: function (rowid, rowdata, commit) 
				{
				// synchronize with the server - send update command
				var data = "update=true&" + $.param(rowdata);
				$.ajax({
				dataType: 'json',
				url: 'data.php',
				cache: false,
				data: data,
				success: function (data, status, xhr) {
				// update command is executed.
				commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
				commit(false);
				}
				});
				}
			};
			
			//cellclass for cellformatting
			var cellclass = function (row, columnfield, value) 
			{
				if (value < 1) 
				{
                    
                    return 'red';
				}
				else return 'green';
			}								

			

			//Localization
			var getLocalization = function () 
			{
				var localizationobj = {};
				localizationobj.pagergotopagestring = "Seite:";
				localizationobj.pagershowrowsstring = "Anzahl Zeilen:";
				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 = ".";
				localizationobj.emptydatastring = "keine Daten angezeigt";
				var days = 
				{
					// full day names
					names: ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"],
					// abbreviated day names
					namesAbbr: ["Mon", "Dien", "Mitt", "Donn", "Fre", "Sams", "Sonn"],
					// shortest day names
					namesShort: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]
				};
				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", "Oct", "Nov", "Dez", ""]
				};
					var patterns = 
					{
						d: "dd.MM.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;
			}									
			
            //var dataAdapter = new $.jqx.dataAdapter(source, 
			//{
            //    downloadComplete: function (data, status, xhr) { },
            //    loadComplete: function (data) { },
            //    loadError: function (xhr, status, error) { }
            //});
			
			var dataAdapter = new $.jqx.dataAdapter(source); 
			
			// initialize grid
			$("#jqxgrid").jqxGrid
			(
			{
				source: dataAdapter,
				theme: 'classic',
				width: 692,
				localization: getLocalization(),
				sortable: true,
				filterable: true,
				//filtermode: 'excel' ,
				//autoshowfiltericon: false ,
				showfilterrow: true,
				autoheight: true,
				editable: true ,
				pageable: true,
				selectionmode: 'singlecell',
				showstatusbar: true,
				statusbarheight: 50,
				showaggregates: true,
				altrows: true,
				//selectionmode: 'multiplecellsadvanced' ,
				
				// define column parameter
				columns: 
				[
					{
					text: 'Datum', datafield: 'datum', width: 112, cellsformat: 'd', columntype: 'datetimeinput', filtertype: 'date' 
					},
			
					{
					text: 'Bank', datafield: 'bank', width: 100, columntype: 'combobox', filtertype: 'textbox',createeditor: function (row, column, editor) 
						{
						// assign a new data source to the combobox.
						var list = ['SPK', 'STP', 'VB', 'RK', 'SH', 'EÖ', 'FC' ];
						editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Wähle:" });
						},
						// update the editor's value before saving it.
						cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) 
							{
							// return the old value, if the new value is empty.
							if (newvalue == "") return oldvalue;
							}
					},
            
                      
					

					{ text: 'Bank-Wert', datafield: 'bank_wert', width: 150, cellsformat: 'F2', 
						cellsalign: 'right', filtertype: 'textbox', cellclassname: cellclass, aggregates: ['sum'], aggregatesrenderer: function (aggregates, column, element, summaryData) 
						{
							//var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: //100%;'>";
							var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + "' style='float: left; width: 100%; height: 100%;'>";
							$.each(aggregates, function (key, value) 
							{
								var name = key == 'sum' ? 'S' : '' ;
								
								var color = 'green';
								if (key == 'sum' && summaryData['sum'] < 0) 
								{
									color = 'red';
								}
								
							renderstring += '<div style="color: ' + color + '; position: relative; margin: 4px; text-align: right; ">' + name + ': ' + value + '</div>';
							});
							renderstring += "</div>";
							return renderstring;
						} 
					}, 
                      
					{
						text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 180, columntype: 'textbox', filtertype: 'textbox', aggregates: 
						[
							{
								'<b>Ausn.  </b>' :function (aggregatedValue, currentValue, column, record) 
								{
									var sumBank_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'bank_wert', ['sum']);
									var sumZu_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'zu_wert', ['sum']);
									return (sumBank_wert.sum + sumZu_wert.sum) * -1;
								}
							}
						]
					},                                    
					
					{
						text: 'ZU-Wert', datafield: 'zu_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', aggregates: ['sum'] 
					}
				]
			}
			);		
			
			$("#addrowbutton").jqxButton({ theme: theme });
            $("#deleterowbutton").jqxButton({ theme: theme });
            $("#updaterowbutton").jqxButton({ theme: theme });
            // update row.
            $("#updaterowbutton").bind('click', function () {
                var datarow = generaterow();
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                }
            });
            // create new row.
            $("#addrowbutton").bind('click', function () {
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                var datarow = generaterow(rowscount + 1);
                $("#jqxgrid").jqxGrid('addrow', null, datarow);
            });
            // delete row.
            $("#deleterowbutton").bind('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid").jqxGrid('deleterow', id);
			}
			});     
	});
			   
</script>

</head>
   
<body class='default'>
		<style>     
        .green { color: #187248; }        
        .red { color: #c72f2f;}
		</style>    
    
<div id="jqxgrid"></div>
   
<div style="background-color: #666; width: 694px; height: 35px; margin-top: 0px;">
            
	<div style="float: left; margin: 5px 10px 0 5px;">
	<input id="addrowbutton" type="button" value="Add New Row" />
	</div>
			
	<div style="float: left; margin: 5px 10px 0 5px;">
	<input id="deleterowbutton" type="button" value="Delete Selected Row" />
	</div>
			
	<div style="float: left; margin: 5px 10px 0 5px;">
	<input id="updaterowbutton" type="button" value="Update Selected Row" />
	</div>

</div>     
       
</body>

</html>

Thank you
Walter

March 12, 2014 at 4:01 pm in reply to: My first CRUD app / Problems My first CRUD app / Problems #50938

wfr

Participant

Hi Dimitar,

Thank you for your help.
Where do I find the 1.11.0 version?
I’ve downloaded the package 3.2.1 again, but it only contains the old version.

Walter

March 11, 2014 at 4:08 pm in reply to: My first CRUD app / Problems My first CRUD app / Problems #50864

wfr

Participant

Hi Dimitar,

Here are the syntax errors, I could solve some by myself, there are 3 left (not sure about the bracket):

16:56:25.723 
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead      
jquery-1.10.2.min.js:1

16:56:25.729 
Error: http://fairdrucker.lima-city.de/jqwidgets/scripts/jquery-1.10.2.min.js is being assigned a //# sourceMappingURL, but already has one
16:56:25.958 

SyntaxError: missing ) after condition bh_beta.html:278

There are also a lot of CSS-Errors:

16:56:25.699 Unknown property '-moz-border-radius-topleft'.  Declaration dropped. jqx.base.css:5
16:56:25.699 Unknown property '-moz-border-radius-topright'.  Declaration dropped. jqx.base.css:12
16:56:25.699 Unknown property '-moz-border-radius-bottomleft'.  Declaration dropped. jqx.base.css:19
16:56:25.699 Unknown property '-moz-border-radius-bottomright'.  Declaration dropped. jqx.base.css:26
16:56:25.699 Unknown property '-moz-border-radius-topleft'.  Declaration dropped. jqx.base.css:33
16:56:25.699 Unknown property '-moz-border-radius-topright'.  Declaration dropped. jqx.base.css:36
16:56:25.699 Unknown property '-moz-border-radius-bottomleft'.  Declaration dropped. jqx.base.css:43
16:56:25.699 Unknown property '-moz-border-radius-bottomright'.  Declaration dropped. jqx.base.css:46
16:56:25.699 Unknown property '-moz-border-radius-topright'.  Declaration dropped. jqx.base.css:53
16:56:25.699 Unknown property '-moz-border-radius-bottomright'.  Declaration dropped. jqx.base.css:56
16:56:25.700 Unknown property '-moz-border-radius-topleft'.  Declaration dropped. jqx.base.css:63
16:56:25.700 Unknown property '-moz-border-radius-bottomleft'.  Declaration dropped. jqx.base.css:66
16:56:25.700 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:73
16:56:25.700 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:80
16:56:25.700 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:93
16:56:25.700 Unknown property 'align'.  Declaration dropped. jqx.base.css:96
16:56:25.700 Unknown property 'valign'.  Declaration dropped. jqx.base.css:96
16:56:25.700 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:99
16:56:25.700 Unknown property 'user-select'.  Declaration dropped. jqx.base.css:130
16:56:25.700 Error in parsing value for 'vertical-align'.  Declaration dropped. jqx.base.css:143
16:56:25.700 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:145
16:56:25.700 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:241
16:56:25.700 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:491
16:56:25.700 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:502
16:56:25.700 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:627
16:56:25.700 Unknown property 'zoom'.  Declaration dropped. jqx.base.css:650
16:56:25.701 Unknown property 'zoom'.  Declaration dropped. jqx.base.css:662
16:56:25.701 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. jqx.base.css:728
16:56:25.701 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:909
16:56:25.701 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:922
16:56:25.701 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:935
16:56:25.701 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:947
16:56:25.701 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:1069
16:56:25.702 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:1405
16:56:25.702 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:1411
16:56:25.702 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:1417
16:56:25.702 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:1423
16:56:25.702 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:1678
16:56:25.702 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:1692
16:56:25.702 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:1714
16:56:25.702 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:1735
16:56:25.703 Unknown property 'align'.  Declaration dropped. jqx.base.css:2214
16:56:25.703 Unknown property 'valign'.  Declaration dropped. jqx.base.css:2215
16:56:25.703 Unknown property '-moz-border-radius-topleft'.  Declaration dropped. jqx.base.css:2235
16:56:25.703 Unknown property '-moz-border-radius-bottomleft'.  Declaration dropped. jqx.base.css:2238
16:56:25.703 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:2242
16:56:25.703 Unknown property '-moz-border-radius-topleft'.  Declaration dropped. jqx.base.css:2246
16:56:25.703 Unknown property '-moz-border-radius-bottomleft'.  Declaration dropped. jqx.base.css:2249
16:56:25.703 Unknown property '-moz-border-radius-topleft'.  Declaration dropped. jqx.base.css:2252
16:56:25.703 Unknown property '-moz-border-radius-bottomright'.  Declaration dropped. jqx.base.css:2255
16:56:25.703 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:2260
16:56:25.703 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:2270
16:56:25.703 Unknown pseudo-class or pseudo-element '-ms-clear'.  Ruleset ignored due to bad selector. jqx.base.css:2272
16:56:25.703 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:2342
16:56:25.704 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:2662
16:56:25.704 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:2668
16:56:25.704 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:2671
16:56:25.704 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:2679
16:56:25.704 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:2690
16:56:25.704 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:2843
16:56:25.704 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:3036
16:56:25.704 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3064
16:56:25.704 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3088
16:56:25.704 Unknown property 'zoom'.  Declaration dropped. jqx.base.css:3088
16:56:25.704 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:3088
16:56:25.704 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3090
16:56:25.704 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3093
16:56:25.704 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:3093
16:56:25.705 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3095
16:56:25.705 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:3095
16:56:25.705 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3097
16:56:25.705 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3098
16:56:25.705 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3099
16:56:25.705 Expected 'none' or URL but found 'Alpha('.  Error in parsing value for 'filter'.  Declaration dropped. jqx.base.css:3101
16:56:25.705 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3103
16:56:25.705 Expected declaration but found '*'.  Skipped to next declaration. jqx.base.css:3113
16:56:25.705 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:3153
16:56:25.705 Unknown pseudo-class or pseudo-element '-ms-reveal'.  Ruleset ignored due to bad selector. jqx.base.css:3164
16:56:25.705 Unknown pseudo-class or pseudo-element '-ms-clear'.  Ruleset ignored due to bad selector. jqx.base.css:3167
16:56:25.705 Unknown pseudo-class or pseudo-element '-ms-clear'.  Ruleset ignored due to bad selector. jqx.base.css:3170
16:56:25.705 Unknown pseudo-class or pseudo-element '-ms-value'.  Ruleset ignored due to bad selector. jqx.base.css:3173
16:56:25.705 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:3195
16:56:25.705 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:3393
16:56:25.705 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:3401
16:56:25.705 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:3460
16:56:25.705 Unknown property '-moz-background-clip'.  Declaration dropped. jqx.base.css:3463
16:56:25.705 Unknown property '-moz-box-shadow'.  Declaration dropped. jqx.base.css:3490
16:56:25.705 Unknown property '-moz-box-shadow'.  Declaration dropped. jqx.base.css:3496
16:56:25.705 Unknown property '-moz-border-radius-topleft'.  Declaration dropped. jqx.base.css:3524
16:56:25.705 Unknown property '-moz-border-radius-topright'.  Declaration dropped. jqx.base.css:3527
16:56:25.705 Unknown property '-moz-border-radius-bottomleft'.  Declaration dropped. jqx.base.css:3534
16:56:25.705 Unknown property '-moz-border-radius-bottomright'.  Declaration dropped. jqx.base.css:3537
16:56:25.706 Unknown property '-moz-box-shadow'.  Declaration dropped. jqx.base.css:3587
16:56:25.706 Unknown property '-moz-box-shadow'.  Declaration dropped. jqx.base.css:3597
16:56:25.706 Unknown property 'box-sizing'.  Declaration dropped. jqx.base.css:3598
16:56:25.706 Unknown property '-moz-box-shadow'.  Declaration dropped. jqx.base.css:3616
16:56:25.706 Unknown property '-moz-border-radius'.  Declaration dropped. jqx.base.css:3617
16:56:25.706 Error in parsing value for 'background-image'.  Declaration dropped. jqx.darkblue.css:4
16:56:25.990 Unknown property 'box-sizing'.  Declaration dropped. bh_beta.html

My Browser is the latest Firefox.
Thank you
Walter

March 10, 2014 at 4:19 pm in reply to: My first CRUD app / Problems My first CRUD app / Problems #50790

wfr

Participant

Hi Dimitar,

Sorry, I have accidentally deleted the $(document).ready() function, but it’s still not working.
I have also checked that every opening bracket has a closing bracket.
Here is the – hopefully – complete code again:

<!DOCTYPE html> 
<html>

<head> 

	<title>Titel</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
	<script type="text/javascript" src="../../jqwidgets/scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqwidgets/jqx-all.js"></script>

    

	<script>

		$(document).ready(function () 
		{				
			// prepare the data
			var source =
			{
				datatype: "json",
				cache: false,
				datafields: 
				[
				{ name: 'bh_id' },
				{ name: 'datum', type: 'date' },
				{ name: 'bank', type: 'string' },
				{ name: 'bank_wert', type: 'number' },
				{ name: 'zu_an', type: 'string' },
				{ name: 'zu_wert', type: 'number' },
				],
				id: 'bh_id',
				url: 'data.php',				
		
				// ADD ROW
				addrow: function (rowid, rowdata, position, commit) 
				{
				// synchronize with the server - send insert command
				var data = "insert=true&" + $.param(rowdata);
				$.ajax(
				{
				dataType: 'json',
				url: 'data.php',
				data: data,
				cache: false,
				success: function (data, status, xhr) 
				{
				// insert command is executed.
				commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
				commit(false);
				}
				}); 
						
				};
				
				// DELETE ROW
				deleterow: function (rowid, commit) 
				{
				// synchronize with the server - send delete command
				var data = "delete=true&" + $.param({bh_id: rowid});
				$.ajax({
				dataType: 'json',
				url: 'data.php',
				cache: false,
				data: data,
				success: function (data, status, xhr) {
				// delete command is executed.
				commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
				commit(false);
				}
				});
				},
				
				// UPDATE ROW
				updaterow: function (rowid, rowdata, commit) 
				{
				// synchronize with the server - send update command
				var data = "update=true&" + $.param(rowdata);
				$.ajax({
				dataType: 'json',
				url: 'data.php',
				cache: false,
				data: data,
				success: function (data, status, xhr) {
				// update command is executed.
				commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
				commit(false);
				}
				});
				}
			};
			
			//cellclass for cellformatting
			var cellclass = function (row, columnfield, value) 
			{
				if (value < 1) 
				{
				return 'red';
				}
				else return 'green';
			}								

			

			//Localization
			var getLocalization = function () 
			{
				var localizationobj = {};
				localizationobj.pagergotopagestring = "Seite:";
				localizationobj.pagershowrowsstring = "Anzahl Zeilen:";
				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 = ".";
				localizationobj.emptydatastring = "keine Daten angezeigt";
				var days = 
				{
					// full day names
					names: ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"],
					// abbreviated day names
					namesAbbr: ["Mon", "Dien", "Mitt", "Donn", "Fre", "Sams", "Sonn"],
					// shortest day names
					namesShort: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]
				};
				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", "Oct", "Nov", "Dez", ""]
				};
					var patterns = 
					{
						d: "dd.MM.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;
			}									
			
            
			
			var dataAdapter = new $.jqx.dataAdapter(source); 
			
			// initialize grid
			$("#jqxgrid").jqxGrid
			(
			{
				source: dataAdapter,
				theme: 'classic',
				width: 692,
				localization: getLocalization(),
				sortable: true,
				filterable: true,
				
				showfilterrow: true,
				autoheight: true,
				editable: true ,
				pageable: true,
				selectionmode: 'singlecell',
				showstatusbar: true,
				statusbarheight: 50,
				showaggregates: true,
				altrows: true,
				
				
				// define column parameter
				columns: 
				[
					{
					text: 'Datum', datafield: 'datum', width: 112, cellsformat: 'd', columntype: 'datetimeinput', filtertype: 'date' 
					},
			
					{
					text: 'Bank', datafield: 'bank', width: 100, columntype: 'combobox', filtertype: 'textbox',createeditor: function (row, column, editor) 
						{
						// assign a new data source to the combobox.
						var list = ['SPK', 'STP', 'VB', 'RK', 'SH', 'EÖ', 'FC' ];
						editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Wähle:" });
						},
						// update the editor's value before saving it.
						cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) 
							{
							// return the old value, if the new value is empty.
							if (newvalue == "") return oldvalue;
							}
					},
            
                      
					

					{ text: 'Bank-Wert', datafield: 'bank_wert', width: 150, cellsformat: 'F2', 
						cellsalign: 'right', filtertype: 'textbox', cellclassname: cellclass, aggregates: ['sum'], aggregatesrenderer: function (aggregates, column, element, summaryData) 
						{
							//var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: //100%;'>";
							var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + "' style='float: left; width: 100%; height: 100%;'>";
							$.each(aggregates, function (key, value) 
							{
								//var name = key == 'sum' ? 'S' : '' ;
								var name = '';
								var color = 'green';
								if (key == 'sum' && summaryData['sum'] < 0) 
								{
									color = 'red';
								}
								
							renderstring += '<div style="color: ' + color + '; position: relative; margin: 4px; text-align: right; ">' + name + ': ' + value + '</div>';
							});
							renderstring += "</div>";
							return renderstring;
						} 
					}, 
                      
					{
						text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 180, columntype: 'textbox', filtertype: 'textbox', aggregates: 
						[
							{
								'<b>Ausn.  </b>' :function (aggregatedValue, currentValue, column, record) 
								{
									var sumBank_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'bank_wert', ['sum']);
									var sumZu_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'zu_wert', ['sum']);
									return (sumBank_wert.sum + sumZu_wert.sum) * -1;
								}
							}
						]
					},                                    
					
					{
						text: 'ZU-Wert', datafield: 'zu_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', aggregates: ['sum'] 
					}
				]
			}
			);		
			
			$("#addrowbutton").jqxButton({ theme: theme });
			$("#deleterowbutton").jqxButton({ theme: theme });
			$("#updaterowbutton").jqxButton({ theme: theme });
			// update row.
			$("#updaterowbutton").bind('click', function () {
			var datarow = generaterow();
			var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
			var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
			if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
			var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
			$("#jqxgrid").jqxGrid('updaterow', id, datarow);
			}
			});
			// create new row.
			$("#addrowbutton").bind('click', function () {
			var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
			var datarow = generaterow(rowscount + 1);
			$("#jqxgrid").jqxGrid('addrow', null, datarow);
			});
			// delete row.
			$("#deleterowbutton").bind('click', function () {
			var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
			var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
			if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
			var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
			$("#jqxgrid").jqxGrid('deleterow', id);
			}
			});     
	});
			   
</script>

</head>
   
<body class='default'>
		<style>     
        .green { color: #187248; }        
        .red { color: #c72f2f;}
		</style>    
    
<div id="jqxgrid"></div>
   
<div style="background-color: #666; width: 694px; height: 35px; margin-top: 0px;">
            
	<div style="float: left; margin: 5px 10px 0 5px;">
	<input id="addrowbutton" type="button" value="Add New Row" />
	</div>
			
	<div style="float: left; margin: 5px 10px 0 5px;">
	<input id="deleterowbutton" type="button" value="Delete Selected Row" />
	</div>
			
	<div style="float: left; margin: 5px 10px 0 5px;">
	<input id="updaterowbutton" type="button" value="Update Selected Row" />
	</div>

</div>     
       
</body>

</html>

Thank you
Walter

March 10, 2014 at 1:06 pm in reply to: Grid aggregates accessing other column summary data Grid aggregates accessing other column summary data #50777

wfr

Participant

Hi Dimitar,

I guess you mean this example:

{ text: 'Product', datafield: 'productname', width: 170, aggregates: [{ '<b>Total</b>':
    function (aggregatedValue, currentValue, column, record) {
        var sumQuantity = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'quantity', ['sum']);
        var sumPrice = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'price', ['sum']);
        sum = sumQuantity.sum + sumPrice.sum
        var color = "green";
        if (sum < 0) {
            color = "red";
        };
        return '<span style="color: ' + color + ';">' + sum + '</span>';
    }
}]
},

I only need the sum of this field (no sum of 2 fields) and only the number without leading Text and “:” .

Thank you
Walter

March 8, 2014 at 7:02 pm in reply to: Grid aggregates accessing other column summary data Grid aggregates accessing other column summary data #50729

wfr

Participant

Hm, I’m still not sure how to remove the Text AND the following “:”
Furthermore, negative numbers should be red, positive numbers should be green.
I get always green results.

{ text: 'Bank-Wert', datafield: 'bank_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', aggregates: ['sum'], aggregatesrenderer: function (aggregates, column, element, summaryData) 
{
var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: 100%;'>";
							
$.each(aggregates, function (key, value) 
{
var name = key == 'sum' ? 'Sum' : '' ;								
var color = 'green';
if (key == 'sum' && summaryData['sum'] < 0) 
{
color = 'red';
renderstring += '<div style="color: ' + color + '; position: relative; margin: 4px; text-align: right; ">' + name + ': ' + value + '</div>';
});
renderstring += "</div>";
return renderstring;
} 
},

Cheers
Walter

March 7, 2014 at 11:14 am in reply to: Grid aggregates accessing other column summary data Grid aggregates accessing other column summary data #50666

wfr

Participant

Hi Dimitar!

Thank you very much!
I think there is a small error in this line:

return '<span style= " color: ' + color + ';" >' + sum + '</span>';
because the result is NaN (not a number?)

When entering
return sum
the result is correctly displayed.

Thank you
Walter

March 6, 2014 at 12:38 pm in reply to: Grid aggregates accessing other column summary data Grid aggregates accessing other column summary data #50604

wfr

Participant

Thanks a lot, Dimitar!

It works, but I have still a small error.
Positive numbers should be green, negative numbers should be red.

           
{ text: 'Bank-Wert', datafield: 'bank_wert', width: 150, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox', aggregates: ['sum'],
aggregatesrenderer: function (aggregates, column, element, summaryData) {
var renderstring = "<div class='jqx-widget-content jqx-widget-content-" + theme + "' style='float: left; width: 100%; height: 100%;'>";
$.each(aggregates, function (key, value) {
var name = key == 'sum' ? 'Sum' : '' ;
var color = 'red';
if (key == 'sum' && summaryData['sum'] < 0) {
color = 'red';
}
if (key == 'sum' && summaryData['sum'] > 0) {
color = 'green';
}
renderstring += '<div style="color: ' + color + '; position: relative; margin: 4px; text-align: right; overflow: hidden;">' + name + ': ' + value + '</div>';
});
renderstring += "</div>";
return renderstring;
} },

I guess it’s because of this line:
var color = 'red';

Can you help me to inplement the renderstring to this field (again: positive numbers = green, negative numbers = red):

{ text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 180, columntype: 'textbox', filtertype: 'textbox', aggregates: [{ '<b>Total</b>' :function (aggregatedValue, currentValue, column, record) {
var sumBank_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'bank_wert', ['sum']);
var sumZu_wert = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'zu_wert', ['sum']);
return sumBank_wert.sum + sumZu_wert.sum;
}
}] },

Thank you very much
Walter

March 6, 2014 at 7:38 am in reply to: Grid aggregates accessing other column summary data Grid aggregates accessing other column summary data #50569

wfr

Participant

Hi,

I have the very same problem, I would be interested how to formulate this task (since I’m a JavaScript novice).

Thanks
Walter

March 6, 2014 at 7:36 am in reply to: Problem with localization Problem with localization #50568

wfr

Participant

Thanks a lot, Peter!

Walter

February 26, 2014 at 5:43 pm in reply to: Problem with cell formatting Problem with cell formatting #50179

wfr

Participant

Ah, I just noticed, the changes only apply after editing.

Author

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →