[njengaParticipant]

Thanks.

If you tweak the pivot settings in the example as follows:
(1) totals: added
(2) rows: limited to lastName
(3) columns: limited to productName

`pivotValuesOnRows: false,
totals: {rows: {subtotals: false, grandtotals: false}, columns: {subtotals: false, grandtotals: true}},
rows: [{ dataField: ‘lastname’ }],
columns: [
{ dataField: ‘productname’ }
],
values: [
{ dataField: ‘price’, ‘function’: ‘sum’, text: ‘Price sum’, formatSettings: { prefix: ‘$’, decimalPlaces: 2, align: ‘right’, } },
{ dataField: ‘items’, ‘function’: ‘sum’, text: ‘Items sum’ }
]`
This will result in a new Totals column on Price Sum and Items Sum.
Now, what I want to achieve is an additional column whos value is calculated from one of these Totals column values the e.g. = Totals:Price Sum * 10% (or some other formula) – of course for each row.

[njengaParticipant]

Got it! thanks!

[njengaParticipant]

I meant how do I get the valueMember selected by the user.
I’ve used the following to gt the value selectd (saved the editor from init):

cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
  if (addNewRow) {
    newLineOfBusinessOid = deptCellEditor.jqxDropDownList('val');
  }
}

Thanks!

[njengaParticipant]

Thanks Hristo.
The initeditor option works:
`initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: “department”, valueMember: “oid”});
}`

However, how do I get the valueMember?

[njengaParticipant]

Thanks Hristo
The code looks like this – the data adapters are loaded from the DB for existing rows, that’s working fine.
The 3 dropdown lists are shown below

`$(“#detailGrid”).jqxGrid({
source: detail_dataAdapter,
width: 925,
height: 500,
rowsheight: 20,
showtoolbar: true,
editable: true,
enabletooltips: true,
selectionmode: ‘multiplecellsadvanced’,
ready: function () {
$(‘#detailGrid’).jqxGrid(‘hidecolumn’, ‘Update’);
},
rendertoolbar: function (toolbar) {
var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input id=”addrowbutton” type=”button” value=”Add New Row” />’);
$(“#addrowbutton”).jqxButton();
$(“#addrowbutton”).on(‘click’, function () {
var commit = $(“#detailGrid”).jqxGrid(‘addrow’, null, {
allocation: 100
// these are the dropdowns that I need to set values (????) when a new row is added. They hav JSON data adapters loading from the DB for existing rows.
department: ????
effectiveDt: ????
endDt: ????
})
});
},
columns: [
{text: ‘DEPARTMENT’, datafield: ‘department’, width: 250, columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {
source = createDepartmentsDropDownList(true);
editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: “department”, valueMember: “oid”});
}
},
{text: ‘ % ‘, datafield: ‘allocation’, width: 70, align: ‘right’, cellsalign: ‘right’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value < 0 || value > 100) {
return {result: false, message: “Quantity should be in the 0-100 interval”};
}
return true;
},
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({decimalDigits: 0, digits: 3});
}
},
{text: ‘EFFECTIVE DT’, datafield: ‘effectiveDt’, width: 110, columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {
source = getDatesDropdownListSource(‘EFFECTIVE_DT’);
editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: “periodStartDate”, valueMember: “oid”});
},
},
{text: ‘END DT’, datafield: ‘endDt’, width: 110, columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {
source = getDatesDropdownListSource(“END_DT”);
editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: “periodStartDate”, valueMember: “oid”});
},
}
]
});`

Regards.

[njengaParticipant]

Thanks.

Console shows the following error msg:

Error in ajaxx call to db:SyntaxError: Unexpected token S
textStatus: parsererror

[njengaParticipant]

Thanks Vladmir.

No error in the php error log

The fieldname is in fact ‘lastName’ – its just some kind of copy/paste error parsed by the forum.

I also created the exact CRUD sample below – still getting the same issue i.e. table displays data but the buttons on the html page do not work and the rows are not editable

<?php
#Include the connect.php file

include(‘connect.php’);

#Connect to the database

//connection String
$connect = mysql_connect($hostname, $username, $password)
or die(‘Could not connect: ‘ . mysql_error());

//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
print “can’t find $database”;
}

// get data and store in a json array
$query = “SELECT * FROM employees”;
if (isset($_GET[‘insert’]))
{
// INSERT COMMAND
$insert_query = “INSERT INTO employees(FirstName, LastName, Title, Address, City, Country, Notes) VALUES (‘”.$_GET[‘FirstName’].”‘,'”.$_GET[‘LastName’].”‘,'”.$_GET[‘Title’].”‘,'”.$_GET[‘Address’].”‘,'”.$_GET[‘City’].”‘,'”.$_GET[‘Country’].”‘,'”.$_GET[‘Notes’].”‘)”;
$result = mysql_query($insert_query) or die(“SQL Error 1: ” . mysql_error());
echo $result;
}
else if (isset($_GET[‘update’]))
{
// UPDATE COMMAND
$update_query = “UPDATE employees SET FirstName='”.$_GET[‘FirstName’].”‘,
LastName='”.$_GET[‘LastName’].”‘,
Title='”.$_GET[‘Title’].”‘,
Address='”.$_GET[‘Address’].”‘,
City='”.$_GET[‘City’].”‘,
Country='”.$_GET[‘Country’].”‘,
Notes='”.$_GET[‘Notes’].”‘ WHERE EmployeeID='”.$_GET[‘EmployeeID’].”‘”;
$result = mysql_query($update_query) or die(“SQL Error 1: ” . mysql_error());
echo $result;
}
else if (isset($_GET[‘delete’]))
{
// DELETE COMMAND
$delete_query = “DELETE FROM employees WHERE EmployeeID='”.$_GET[‘EmployeeID’].”‘”;
$result = mysql_query($delete_query) or die(“SQL Error 1: ” . mysql_error());
echo $result;
}
else
{
// SELECT COMMAND
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$employees[] = array(
‘EmployeeID’ => $row[‘EmployeeID’],
‘FirstName’ => $row[‘FirstName’],
‘LastName’ => $row[‘LastName’],
‘Title’ => $row[‘Title’],
‘Address’ => $row[‘Address’],
‘City’ => $row[‘City’],
‘Country’ => $row[‘Country’],
‘Notes’ => $row[‘Notes’]
);
}
echo json_encode($employees);
}
?>
———————————————————-
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Grid</title>

<link rel=”stylesheet” href=”../jqwidgets381/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../jqwidgets381/jqwidgets/styles/jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”../jqwidgets381/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../jqwidgets381/jqwidgets/jqxgrid.grouping.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = {};
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [

{ name: ‘EmployeeID’ },

{ name: ‘FirstName’ },

{ name: ‘LastName’ },

{ name: ‘Title’ },

{ name: ‘Address’ },

{ name: ‘City’ },

{ name: ‘Country’ },

{ name: ‘Notes’ }

],

id: ‘EmployeeID’,

url: ‘data.php’,

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);

}

});

},

deleterow: function (rowid, commit) {

// synchronize with the server – send delete command

var data = “delete=true&” + $.param({ EmployeeID: 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);

}

});

},

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);

}

});

}

};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid

$(“#jqxgrid”).jqxGrid(

{

width: 500,

height: 350,

source: dataAdapter,

theme: theme,

columns: [

{ text: ‘EmployeeID’, datafield: ‘EmployeeID’, width: 100 },

{ text: ‘First Name’, datafield: ‘FirstName’, width: 100 },

{ text: ‘Last Name’, datafield: ‘LastName’, width: 100 },

{ text: ‘Title’, datafield: ‘Title’, width: 180 },

{ text: ‘Address’, datafield: ‘Address’, width: 180 },

{ text: ‘City’, datafield: ‘City’, width: 100 },

{ text: ‘Country’, datafield: ‘Country’, width: 140 }

]

});

$(“#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’>

<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>

<div style=”float: left;” id=”jqxgrid”>

</div>

<div style=”margin-left: 30px; float: left;”>

<div>

<input id=”addrowbutton” type=”button” value=”Add New Row” />

</div>

<div style=”margin-top: 10px;”>

<input id=”deleterowbutton” type=”button” value=”Delete Selected Row” />

</div>

<div style=”margin-top: 10px;”>

<input id=”updaterowbutton” type=”button” value=”Update Selected Row” />

</div>

</div>

</div>

</body>

</html>

[Author]

Posts