jQWidgets Forums

Tagged: tree render bug checkboxes subitem

This topic contains 2 replies, has 2 voices, and was last updated by Makla 12 years, 1 month ago.

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

Author

Render bug (with checkboxes when adding sub items) Posts

May 12, 2013 at 9:03 am Render bug (with checkboxes when adding sub items) #20980

Makla

Participant

When adding subitems, the expanding icon is missing. Refresh method doesn’t help!
When you close and expand item again it renders correctly.
Screenshot The first sub item is missing expand icon. The second (Root Folder 2) was closed and expanded again. It renders correctly.
Source code:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<script src="Framework/Scripts/jquery-1.9.1.min.js"></script>
		<script src="Framework/Scripts/jqwidgets/jqx-all.js"></script>
    	<link rel="stylesheet" href="Framework/Styles/jqx.base.css" type="text/css" />
    	<link rel="stylesheet" href="Framework/Styles/jqx.ui-sunny.css" type="text/css" />
   <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            var tree = $('#jqxTree');
            var source = [{ label: "Root", expanded: true,
                items: [
                    { label: "Root Folder 1", items: [{ value: "ajax1.htm", label: 'Loading...'}] },
                    { label: "Root Folder 2", items: [{ value: "ajax2.htm", label: 'Loading...'}] }
                ]
            }];
            tree.jqxTree({ checkboxes: true, source: source, width: 200 });
            tree.bind('expand', function (event) {
                var item = tree.jqxTree('getItem', event.args.element);
                var $element = $(event.args.element);
                if (item.nextItem.label == "Loading...")
                {
                    
                            var items = new Array();
                            items.push({label: 'l', value: 'v'});
                            tree.jqxTree('addTo', items, $element[0]);
                            tree.jqxTree('removeItem', item.nextItem.element);
                            tree.jqxTree('addTo', { label: 'Item', value: 'value' }, $element[0].lastChild.lastChild);	//OK
				}
            });
           
            
        });
    </script>
</head>
<body class='default'>
    <div id="jqxTree">
    </div>
</body>
</html>