Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Devon Britton
130
Bind label text to datasource
posted

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.

  1. My datasource has 3 entities in it, how do I isolate just 1 and use it as the datasource to populate the labels.?
  2. what is the data tag to use to set the label text?

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??

Parents
  • 3995
    Offline posted

    Hello Devon Britton,

    You can use igHiearchicalGrid for presenting hierarchical data and having the expand collapse functionality.

    igHierarchicalGrid

    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>

Reply Children