JSON structure with Nested Grid

[RedantJParticipant]

Hey guys, I really love this code and I am re-writing one of my previous projects. I got stumped with this part:

            var orderdetailsurl = "../sampledata/orderdetails.xml";

            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };

I selected ‘inspect element’ to see what the datatype looked like. So I saw this:

  <Order OrderID="10248">
    <CustomerID>VINET</CustomerID>
    <EmployeeID>5</EmployeeID>
    <OrderDate>1996-07-04T14:25:55</OrderDate>
    <RequiredDate>1996-08-01T06:43:44</RequiredDate>
    <ShippedDate>1996-07-16T04:00:12</ShippedDate>
    <ShipVia>3</ShipVia>
    <Freight>32.3800</Freight>
    <ShipName>Vins et alcools Chevalier</ShipName>
    <ShipAddress>59 rue de l'Abbaye</ShipAddress>
    <ShipCity>Reims</ShipCity>
    <ShipRegion/>
    <ShipPostalCode>51100</ShipPostalCode>
    <ShipCountry>France</ShipCountry>
    <OrderDetails>
      <OrderDetail>
        <ProductID>11</ProductID>
        <UnitPrice>14.0000</UnitPrice>
        <Quantity>12</Quantity>
        <Discount>0</Discount>
.
.
.
</OrderDetail>
</OrderDetails>
</Order>

My question: What is the JSON equivalent of <Order OrderID=”10248″>…</Order> ?

[Peter StoevKeymaster]

Hi RedantJ,

This is XML, not JSON. We do not this sample data in JSON format.

Best Regards,
Peter Stoev

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

[RedantJParticipant]

I know it’s not XML. I’m looking for the JSON equivalent. I’m going to try a few XML-to-JSON translation websites such as this one and figure it out.

[danny7139Participant]

There isn’t an equivalent.

{
    "OrderID": 10248
    "CustomerID": "VINET",
    "EmployeeID": 5,
    .
    .
    .
  }

Than you would set the id in the dataAdapter :

var ordersSource =
            {
                datafields: [
                    { name: 'OrderID', type: 'string' },
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                datatype: "json",
                url: orderdetailsurl,
                id: "OrderID",
                async: false
            };

At least that’s how I set a unique ID.

[RedantJParticipant]

Thank you danny. That one stumped me for a while.

One thing I learned is sometimes you need to look at the data object as well as the code, because the problem may not necessarily be in the code.

[RedantJParticipant]

I figured out the code that I wanted:

	var source =
	{
		datatype: "json",
		datafields: [
			{ name: 'ID', type: 'string'},
			{ name: 'foo1', type: 'string'},
			{ name: 'foo2', type: 'string'},
			{ name: 'foo3', type: 'string'}
		],

		cache: false,
		url: './data.asp',
		root: 'Asset',
		beforeprocessing: function(data)
		{		
			if (data != null)
			{
				source.totalrecords = data[0].TotalRows;
			}
		}
	}

	var dataadapter = new $.jqx.dataAdapter(source, {
		loadError: function(xhr, status, error)
		{
			alert(error);
		}
	});

	var nestedGrids = new Array();
	var details = new Array();
		
	var initrowdetails = function (index, parentElement, gridElement, record) {
		var id = record.uid.toString();
		var grid = $($(parentElement).children()[0]);
		nestedGrids[index] = grid;
		var filtergroup = new $.jqx.filter();
		var filter_or_operator = 1;
		var filtervalue = id;
		var filtercondition = 'equal';
		var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
		// fill the details depending on the id.
		var FoobarById = [];
		details = source.records;
		for (var m = 0; m < details.length; m++) {
			var result = filter.evaluate(details[m]["uid"]);
			if (result)
				FoobarById.push(details[m]);
		}
		var detailssource = { datafields: [
			{ name: 'ID', type: 'string' },
			{ name: 'bar1', type: 'string' },
			{ name: 'bar2', type: 'string' },
			{ name: 'bar3', type: 'string' }
		],
		id: 'ID',
		localdata: FoobarById,
		}
		var nestedGridAdapter = new $.jqx.dataAdapter(detailssource);
				
		if (grid != null) {
			grid.jqxGrid({
				source: nestedGridAdapter, width: 580, height: 60,
				editable: true,
				theme: 'berkeley',
				columns: [
					{ text: 'Bar1', dataField: 'bar1', width: 100 },
					{ text: 'Bar2', dataField: 'bar2', width: 100 },
					{ text: 'Bar3', dataField: 'bar3', width: 100 },
				]
			});
		}
	};			

	// initialize jqxGrid
	$("#jqxgrid").jqxGrid(
	{		
		source: dataadapter,
		autoheight: true,
		autorowheight: true,
		editable: true,
		pageable: true,
		virtualmode: true,
		rowdetails: true,
		initrowdetails: initrowdetails,
		rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 100, rowdetailshidden: true },
		rendergridrows: function(obj)
		{
			return obj.data;    
		},
		columns: [
			{ text: 'Foo1', datafield: 'foo1', width: 200 }
			{ text: 'Foo2', datafield: 'foo2', width: 300 }
			{ text: 'Foo3', datafield: 'foo3', width: 100 }
			]
		});
		
	});

[RedantJParticipant]

The code works with this JSON structure:

[
	{
	"TotalRows": 4,
	},
	{
	"Asset": [
		{
			"ID":"1",
			"foo1":"Mary",
			"foo2":"Ford",
			"foo3":"1111",
			"bar1":"Smith",
			"bar2":"Fiesta",
			"bar3":"AAAA"
		},

[Author]

Posts