jQWidgets Forums

Tagged: jqxtree, JSON properties, Tree, uppercase

This topic contains 2 replies, has 2 voices, and was last updated by jqwidgetsdev 10 years, 5 months ago.

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

Author

jqxTree icon cannot be uppercase Posts

November 9, 2014 at 3:46 pm jqxTree icon cannot be uppercase #62428

Participant

Hello.

In the example below the tree icon does not appear. I think this is because the ICON property name must be lowercase, but why is this a restriction in place?

Background info: I am generating JSON from a database query.
I strongly prefer not to have to add conversion to make all fields lowercase, and anything that depends on it. This does not make sense to me.

Can you please look into this?

Thank you.

==========

<!DOCTYPE html>
<html lang="en">
<head>
    <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="../../scripts/demos.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [
                {   "ID": "2",
                    "PARENTID": "1",
                    "TEXT": "Hot Chocolate",
                    "VALUE": "$2.3"
                    "ICON": "../../images/mailIcon.png"
                }]

                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'ID' },
                        { name: 'ICON' },
                        { name: 'PARENTID' },
                        { name: 'TEXT' },
                        { name: 'VALUE' }
                    ],
                    id: 'ID',
                    localdata: data
                };

                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('ID', 'PARENTID', 'items', [{ name: 'TEXT', map: 'label'}]);

                $('#jqxWidget').jqxTree({ source: records, width: '300px' });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

November 10, 2014 at 7:18 am jqxTree icon cannot be uppercase #62440

Nadezhda

Participant

Hello jqwidgetsdev,

You have missed a , after the "VALUE": "$2.3". Please, try mapping like that you are doing for ‘TEXT’ to all JSON properties.

Best Regards,
Nadezhda

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

November 10, 2014 at 6:50 pm jqxTree icon cannot be uppercase #62482

jqwidgetsdev

Participant

Hello Nadezhda.

Thank you for pointing me to mapping option. That is a really nice feature!

For the benefits to others, the following line of code resolved the issue I was facing together with the missing ,

var records = dataAdapterSourceDataService.getRecordsHierarchy('ID', 'PARENT_ID', 'items', [{ name: 'ICON', map: 'icon' }, { name: 'TEXT', map: 'label' }]);

Best regards.

Author

Posts

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

You must be logged in to reply to this topic.