jqxTree not showing expand icon

[nelsonrdParticipant]

Just evaluating jqxWidgets and built first jqxTree in test application. Bound the tree to json data which works fine except the carrot icons do not display next to the tree elements. I assume this is a css issue but can’t find any conflicts.
Below is script and html:

<script type="text/javascript">
        $(document).ready(function () {
            // create jqxtabs.
            $('#jqmaintabs').jqxTabs({ width: '100%', theme: 'ui-redmond', scrollPosition: 'both' });

            // create splitter
            $("#jqxSplitter").jqxSplitter({ theme: 'ui-redmond', height: 650, width: '100%', panels: [{ size: '20%', min: 350 }, { size: '80%' }] });

            // Create jqxTree
            var tree = $('#jqxTree');
            var source = null;
            $.ajax({
                async: true,
                url: "/ashx/BLProjects.ashx",
                dataType: "json",
                success: function (data, status, xhr) {
                    source = data;

                    var treesource =
                   {
                       datatype: "json",
                       datafields: [
                           { name: 'id' },
                           { name: 'parentid' },
                           { name: 'text' },
                           { name: 'value' }
                       ],
                       id: 'id',
                       localdata: source
                   };

                    var dataAdapter = new $.jqx.dataAdapter(treesource);
                    dataAdapter.dataBind();
                    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);

                    tree.jqxTree({ theme: 'ui-redmond', source: records, height: 600, width: 350 });

                    tree.on('expand', function (event) {
                        var label = tree.jqxTree('getItem', event.args.element).label;
                        var $element = $(event.args.element);
                        var loader = false;
                        var loaderItem = null;
                        var children = $element.find('ul:first').children();
                        $.each(children, function () {
                            var item = tree.jqxTree('getItem', this);
                            if (item && item.label == 'Loading...') {
                                loaderItem = item;
                                loader = true;
                                return false
                            };
                        });
                    });
                }
            });            
        });
    </script>

<div id='jqmaintabs' class="jqx-tabs">
         <ul style='margin-left: 5px;'>
            <li>New PCR Creation</li>
            <li>PCR Review/Management 2</li>
        
        <div>
            <div id='jqxSplitter'>
                <div>
                    <div style="font-family: 'Segoe UI'; color:darkblue; font-style:italic; font-weight:700; margin-top: 5px">
                        Select project from expanded tree to create a draft PCR.
                    </div>
                    <div id='jqxTree'; style="margin-left: 10px"></div>
                </div>
                <div>

                </div>
            </div>
        </div>
        <div>
            Content 2
        </div>
    </div>

[DimitarParticipant]

Hello nelsonrd,

Please make sure the images folder (containing the arrows and other icons needed by jQWidgets) is located where jqx.base.css and jqx.ui-redmond.css are. If the issue is not resolved, provide us with your script and style references, too.

Best Regards,
Dimitar

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

[Author]

Posts