ForeignKey Question (XML and or JSON)

[DavidSimmonsParticipant]

In your new example for Foreign Keys can I use JSON instead of XML? If so, what would have to change other than url and datatype? Does map work the same way with JSON?

This example shows how to create a Grid with a Foreign Key column

$(document).ready(function () {
var theme = getTheme();
var employeesSource =
{
datatype: “xml”,
datafields: [
{ name: ‘FirstName’ },
{ name: ‘LastName’ }
],
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 field.
for (var i = 0; i d\\:EmployeeID’, text: ‘EmployeeName’, id: ‘EmployeeID’, source: employeesAdapter.records },
{ name: ‘ShippedDate’, map: ‘m\\:properties>d\\:ShippedDate’, type: ‘date’ },
{ name: ‘Freight’, map: ‘m\\:properties>d\\:Freight’, type: ‘float’ },
{ 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: 670,
source: ordersAdapter,
theme: theme,
selectionmode: ‘multiplecellsextended’,
pageable: true,
autoheight: true,
columns: [
{ text: ‘Employee Name’, datafield: ‘EmployeeID’, width: 150 },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150},
{ text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150 },
{ text: ‘Ship Name’, datafield: ‘ShipName’}
]
});
});

[DimitarParticipant]

Hello DavidSimmons,

You are correct, you need only change the datatype and the url.

Best Regards,
Dimitar

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

[DavidSimmonsParticipant]

Here is what I am trying using your example but trying to move to JSON… The Sales column is the employee’s id from the employee table. I am not sure about the map statement. I would appreciate any help…

EmployeeJSON.php
[{“EmployeeID”:”1″,”0″:”1″,”FirstName”:”John”,”1″:”John”,”LastName”:”Doe”,”2″:”Doe”},
{“EmployeeID”:”2″,”0″:”2″,”FirstName”:”Jane “,”1”:”Jane “,”LastName”:”Doe”,”2″:”Doe”}]

$(document).ready(function () {
var theme = “ui-start”;

var employeesSource = {
datatype: “json”,
datafields: [
{ name: ‘FirstName’ },
{ name: ‘LastName’ }
],
root: “Employees”,
record: “Employee”,
id: ‘EmployeeID’,
url: “EmployeeJSON.php”,
async: false
};

var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i d\\:EmployeeID’, text: ‘EmployeeName’, id: ‘EmployeeID’, source: employeesAdapter.records },
{ name: ” }

],
url: “CompanyData.php”,
sort: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
};

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
source: dataAdapter,
theme: theme,
sortable: true,
sorttogglestates: 1,
altrows: true,
pageable: true,
pagesize: 30,
enablehover: false,
autoheight: true,
editable: true,
selectionmode: “singlecell”,
filterable: true,
showtoolbar: true,
columns: [
{ text: ‘ID’, dataField: ‘ID’, width: 80, editable: false },
{ text: ‘Company’, dataField: ‘Company’, width: 200, editable: true },
{ text: ‘Address’, dataField: ‘Address’, width: 200, editable: true },
{ text: ‘City’, dataField: ‘City’, width: 200, editable: true },
{ text: ‘State’, dataField: ‘State’, width: 200, editable: true },
{ text: ‘Zip’, dataField: ‘Zip’, width: 100, editable: true },
{ text: ‘Phone’, dataField: ‘Phone’, width: 100, editable: true },
{ text: ‘Fax’, dataField: ‘Fax’, width: 100, editable: true },
{ text: ‘Email’, dataField: ‘Email’, width: 200, editable: true },
{ text: ‘Sales’, dataField: ‘Sales’, width: 100, editable: true},
{ text: ”, dataField: ”, width: 1000, editable: false }
]
});
});

[DimitarParticipant]

Hi DavidSimmons,

Please try out the following example, which is based on the demo but uses your file EmployeeJSON:

<!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.8.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/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var employeesSource =
             {
                 datatype: "json",
                 datafields: [
                     { name: 'FirstName' },
                     { name: 'LastName' }
                 ],
                 id: 'EmployeeID',
                 url: "EmployeeJSON.json",
                 async: false
             };
            var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
                autoBind: true,
                beforeLoadComplete: function (records) {
                    var data = new Array();
                    // update the loaded records. Dynamically add EmployeeName field. 
                    for (var i = 0; i < records.length; i++) {
                        var employee = records[i];
                        employee.EmployeeName = employee.FirstName + " " + employee.LastName;
                        data.push(employee);
                    }
                    return data;
                }
            });
            // prepare the data
            var ordersSource =
            {
                datatype: "xml",
                datafields: [
                // id - determines the id of a record in the foreign collection(employees.xml) which should match to the record's name in the source collection(orders.xml).
                // text - determines the display field from the foreign collection.
                // source - determines the foreign collection.
                    {name: 'EmployeeID', map: 'm\\:properties>d\\:EmployeeID', text: 'EmployeeName', id: 'EmployeeID', source: employeesAdapter.records },
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { 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: "../../demos/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: 670,
                source: ordersAdapter,
                theme: theme,
                selectionmode: 'multiplecellsextended',
                pageable: true,
                autoheight: true,
                columns: [
                    { text: 'Employee Name', datafield: 'EmployeeID', 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>

On a side note, please check out the forum topic Code Formatting to see how to format source code properly.

Best Regards,
Dimitar

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

[DavidSimmonsParticipant]

I s use JSON for my ordersSource as well. How to I deal with the map statement? Will it work with JSON?

{ name: ‘EmployeeID’, map: ‘m\\:properties>d\\:EmployeeID’, text: ‘EmployeeName’, id: ‘EmployeeID’, source: employeesAdapter.records },

[DimitarParticipant]

Hi DavidSimmons,

Yes, there is no difference in using either XML or JSON due to jqxDataAdapter. And you do not need to change the map.

Best Regards,
Dimitar

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

[BrabbyMember]

Hi.
I try to use a foreign key test with jsonp, but it wont work.

Can you explain and help?

http://jsfiddle.net/GkNRb/1/

Best Regards
Brabby

[Author]

Posts