jQWidgets Forums

Tagged: jqxgrid foreignkey cellsformat

This topic contains 3 replies, has 2 voices, and was last updated by mohamedazher 11 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Problem with applying cellsformat in foreignkey or key/value columns Posts
June 19, 2014 at 11:52 am Problem with applying cellsformat in foreignkey or key/value columns #56086

mohamedazher
Participant

Hi,

There seems to be a problem when trying to apply cellsformat to a column where foreign key is referenced. The cellsformat does not seem to apply.

I have modified the foreignkey example below to show the employee id (and not the name). I tried applying cellsformat :’p’ but it does not seem to work.

It works when i remove the values parameter.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example shows how to create a Grid with a Foreign Key column</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var employeesSource =
{
datatype: “xml”,
datafields: [
{ name: ‘FirstName’, type: ‘string’ },
{ name: ‘LastName’, type: ‘string’ }
],
root: “Employees”,
record: “Employee”,
id: ‘EmployeeID’,
url: “../sampledata/employees.xml”,
async: false
};

var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
// update the loaded records. Dynamically add EmployeeName and EmployeeID fields.
for (var i = 0; i < records.length; i++) {
var employee = records[i];
employee.EmployeeName = employee.FirstName + ” ” + employee.LastName;
employee.EmployeeID = employee.uid;
data.push(employee);
}
return data;
}
});

// prepare the data
var ordersSource =
{
datatype: “xml”,
datafields: [
// name – determines the field’s name.
// values – specifies the field’s values.
// values.source – specifies the foreign source. The expected value is an array.
// values.name – specifies the field’s name in the foreign source.
// When the ordersAdapter is loaded, each record will have a field called “EmployeeID”. The “EmployeeID” for each record will come from the employeesAdapter where the record’s “EmployeeID” from orders.xml matches to the “EmployeeID” from employees.xml.
{ name: ‘EmployeeID’, map: ‘m\\:properties>d\\:EmployeeID’, type: ‘int’, values: { source: employeesAdapter.records, name: ‘EmployeeID’ } },
{ name: ‘ShippedDate’, map: ‘m\\:properties>d\\:ShippedDate’, type: ‘date’ },
{ name: ‘Freight’, map: ‘m\\:properties>d\\:Freight’, type: ‘int’ },
{ name: ‘ShipName’, map: ‘m\\:properties>d\\:ShipName’ },
{ name: ‘ShipAddress’, map: ‘m\\:properties>d\\:ShipAddress’ },
{ name: ‘ShipCity’, map: ‘m\\:properties>d\\:ShipCity’ },
{ name: ‘ShipCountry’, map: ‘m\\:properties>d\\:ShipCountry’ }
],
root: “entry”,
record: “content”,
id: ‘m\\:properties>d\\:OrderID’,
url: “../sampledata/orders.xml”,
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}
};
var ordersAdapter = new $.jqx.dataAdapter(ordersSource);

$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: ordersAdapter,
selectionmode: ‘multiplecellsextended’,
pageable: true,
autoheight: true,
columns: [
{ text: ‘Employee Name’, datafield: ‘EmployeeID’, width: 150, cellsformat :’p’},
{ text: ‘Freight’, datafield: ‘Freight’, width: 150, },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150},
{ text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150 },
{ text: ‘Ship Name’, datafield: ‘ShipName’}
]
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”>
</div>
</div>
</body>
</html>

-Mohamed Azher

June 19, 2014 at 11:59 am Problem with applying cellsformat in foreignkey or key/value columns #56087

Peter Stoev
Keymaster

Hi Mohamed Azher,

I think you misunderstood how this feature actually works.

1. employee.EmployeeID = employee.uid; – this is wrong. uid is not generated when you set it.
2. The EmployeeID is already included in the Orders Source so you should not write any additional code about it.

Example #1: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/foreignkeycolumn.htm?arctic
Example #2: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluecolumn.htm?arctic
Example #3: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

June 19, 2014 at 12:32 pm Problem with applying cellsformat in foreignkey or key/value columns #56093

mohamedazher
Participant

Hi Peter,

Thanks for your reply.

1) employee.EmployeeID = employee.uid; – this is from the Example #1. I did not make any changes to that.
2) Yes, its already included, but i am just trying to mimic the foreign key functionality. I am matching employeeid with the source and getting the employeeid again. I am doing that as i am trying to apply cellsformat for a number column. As mentioned all this works. Only the cellsformat does not apply.

The code is the same as Example #1 i just changed the employeeid datafield and the column definition.

This is not a problem with Example #3 but only happens with remote datasource.

Hope i am clear. Please do let me know if you need any additional information.

-Mohamed Azher

June 20, 2014 at 11:09 am Problem with applying cellsformat in foreignkey or key/value columns #56148

mohamedazher
Participant

Hi,

Sorry for the trouble. The issue was with source parameter in the datafield given incorrectly

Thanks for you help.

-Mohamed Azher
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.