Hi guys.
This might be a simple issue but it's been driving me nuts.
I want a collapsible that when expanded has 3 labels, each displaying information from my datasource.
The 2 issues I'm facing are as follows.
Here's some sample code.
<script>
var shipments = [ { id: "s1", WaybillId: "1", WaybillNumber: "TEST 001", WaybillDate: "01/01/0001", AccountReference: "AVO001", CustomerName: "AVON", Comment: "Testing 001", DeliveryDate: "01/01/0001", Destination: "Testville 001", InsuredValue: "1000", Location: "Location 001", OperationStatus: "Operation Status 001", Origin: "Origin 001", PODImageKey: "POD Image Key 001", Recipient: "Recipient 001", ReturnCode: "Return Code 001", ReturnDescription: "Return Description 001", ScanDate: "01/01/0001", ServiceType: "Service Type 001", ShipDate: "01/01/0001", Signature: "Signature 001", Parcels: [ parcels[0], parcels[1], parcels[2] ], TrackingEvents: [ events[0] ] }, { id: "s2", WaybillId: "2", WaybillNumber: "TEST 002", WaybillDate: "02/02/0002", AccountReference: "AVO001", CustomerName: "AVON", Comment: "Testing 002", DeliveryDate: "02/02/0002", Destination: "Testville 002", InsuredValue: "2000", Location: "Location 002", OperationStatus: "Operation Status 002", Origin: "Origin 002", PODImageKey: "POD Image Key 002", Recipient: "Recipient 002", ReturnCode: "Return Code 002", ReturnDescription: "Return Description 002", ScanDate: "02/02/0002", ServiceType: "Service Type 002", ShipDate: "02/02/0002", Signature: "Signature 002", Parcels: [ parcels[1] ], TrackingEvents: [ events[1] ] }, { id: "s3", WaybillId: "3", WaybillNumber: "TEST 003", WaybillDate: "03/03/0003", AccountReference: "AVO001", CustomerName: "AVON", Comment: "Testing 003", DeliveryDate: "03/03/0003", Destination: "Testville 003", InsuredValue: "3000", Location: "Location 003", OperationStatus: "Operation Status 003", Origin: "Origin 003", PODImageKey: "POD Image Key 003", Recipient: "Recipient 003", ReturnCode: "Return Code 003", ReturnDescription: "Return Description 003", ScanDate: "03/03/0003", ServiceType: "Service Type 003", ShipDate: "03/03/0003", Signature: "Signature 003", Parcels: [ parcels[2] ], TrackingEvents: [ events[2] ] } ];
</script>
I want my collapsible to contain a label each showing the recipient, the waybill number and the recipient telephone number.
<div data-collapse-cue-text="Click to collapse contents" data-content-theme="c" data-expand-cue-text="Click to expand contents" data-inset="false" data-role="collapsible" id="DetailsCollapsible"> <h2>Details</h2> </div>
Can anyone help please??
Hi Devon Britton,
All the references in my samples are:
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript" /></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://localhost/ig_ui13.1/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/ig_ui13.1/css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<script src="http://localhost/ig_ui13.1/js/infragistics.core.js" type="text/javascript"></script>
<script src="http://localhost/ig_ui13.1/js/infragistics.lob.js" type="text/javascript"></script>
Sincerely,
Deyan Kamburov
I had a look at the example here -> http://localhost:1024/SamplesBrowser/hierarchical-grid/json-binding
I noticed that in the example they reference the following .js files.
<script src="scripts/infragistics.core.js" type="text/javascript"></script><script src="scripts/infragistics.lob.js" type="text/javascript"></script>
If I add those files to my index.html I get the following errors...
Uncaught TypeError: undefined is not a function jquery.mobile-1.2.0.min.js:2
Uncaught TypeError: Cannot read property 'prototype' of undefined infragistics.lob.js:535
At the moment I'm getting the following error... Do you have any idea why?
Uncaught TypeError: Object [object Object] has no method 'igHierarchicalGrid'
I have kept the code precisely as you gave it to me...
Hi DeyanK.
I appreciate the help. I'm not sure, however, how to access the igHiearchicalGrid in a mobile solution.
Can I include a .js file into the mobile solution and tailor it to display in a manner applicable with mobile devices??
Regards,
Devon
Hello Devon Britton,
You can use igHiearchicalGrid for presenting hierarchical data and having the expand collapse functionality.
Here is the sample code I used slight modification of your example data:
var parcels = [ {id: "s1", address: "addr1", owner: "name1"}, {id: "s2", address: "addr2", owner: "name2"}, {id: "s3s",address: "addr3", owner: "name3"} ]; var events = [ { id: "s1", buyer:"joe", sold: true}, { id: "s1", buyer:"joe", sold: true}, {id: "s3", buyer: "jack", sold: true} ] var sourceData = { shipments : [ { id: "s1", WaybillId: "1", WaybillNumber: "TEST 001", WaybillDate: "01/01/0001", AccountReference: "AVO001", CustomerName: "AVON", Comment: "Testing 001", DeliveryDate: "01/01/0001", Destination: "Testville 001", InsuredValue: "1000", Location: "Location 001", OperationStatus: "Operation Status 001", Origin: "Origin 001", PODImageKey: "POD Image Key 001", Recipient: "Recipient 001", ReturnCode: "Return Code 001", ReturnDescription: "Return Description 001", ScanDate: "01/01/0001", ServiceType: "Service Type 001", ShipDate: "01/01/0001", Signature: "Signature 001", Parcels: { p: [ parcels[0], parcels[1], parcels[2], ] }, TrackingEvents: { e: [ events[0] ] } }, { id: "s2", WaybillId: "2", WaybillNumber: "TEST 002", WaybillDate: "02/02/0002", AccountReference: "AVO001", CustomerName: "AVON", Comment: "Testing 002", DeliveryDate: "02/02/0002", Destination: "Testville 002", InsuredValue: "2000", Location: "Location 002", OperationStatus: "Operation Status 002", Origin: "Origin 002", PODImageKey: "POD Image Key 002", Recipient: "Recipient 002", ReturnCode: "Return Code 002", ReturnDescription: "Return Description 002", ScanDate: "02/02/0002", ServiceType: "Service Type 002", ShipDate: "02/02/0002", Signature: "Signature 002", Parcels: { p: [ parcels[0] ] }, TrackingEvents: { e: [ events[1] ] } }, { id: "s3", WaybillId: "3", WaybillNumber: "TEST 003", WaybillDate: "03/03/0003", AccountReference: "AVO001", CustomerName: "AVON", Comment: "Testing 003", DeliveryDate: "03/03/0003", Destination: "Testville 003", InsuredValue: "3000", Location: "Location 003", OperationStatus: "Operation Status 003", Origin: "Origin 003", PODImageKey: "POD Image Key 003", Recipient: "Recipient 003", ReturnCode: "Return Code 003", ReturnDescription: "Return Description 003", ScanDate: "03/03/0003", ServiceType: "Service Type 003", ShipDate: "03/03/0003", Signature: "Signature 003", Parcels: { p: [ parcels[2] ] }, TrackingEvents: { e: [ events[2] ] } } ] }; $(function () { $('#Grid1').igHierarchicalGrid({ dataSource: sourceData, dataSourceType: 'json', autoGenerateColumns: false, autoGenerateLayouts: false, localSchemaTransform: true, responseDataKey: 'shipments', initialDataBindDepth: -1, primaryKey: 'id', columns: [ { headerText: 'id', key: 'id', dataType: 'string', width: '100px' }, { headerText: 'WaybillNumber', key: 'WaybillNumber', dataType: 'string', width: '200px'}, { headerText: 'Recipient', key: 'Recipient', dataType: 'string', width: '200px' }, ], columnLayouts: [ { key: 'Parcels', primaryKey: 'id', foreignKey: 'id', caption: 'Parcels', localSchemaTransform: true, autoGenerateColumns: true, responseDataKey: 'p', }, { key: "TrackingEvents", primaryKey: 'id', foreignKey: 'id', caption: "TrackingEvents", localSchemaTransform: true, autoGenerateColumns: true, responseDataKey: 'e' } ] }); });
And the igHierarchicalgrid is instantiated to a div
<div id="Grid1"></div>