jQuery UI Widgets › Forums › Navigation › Tree › Tree view – checkbox click

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 12 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Tree view – checkbox click Posts
  • June 20, 2012 at 4:31 pm Tree view – checkbox click #5166

    nazzrkhan
    Member

    Hi,

    I am trying to bind the checkbox in the tree control. When the user click on checkbox to check / uncheck how do I get the right label.

    My code below

      $(document).ready(function () {
        $('#MySplitter').jqxSplitter({orientation: 'vertical',width: '100%', height: '100%', panels: [{ size: 200 }, { size: 600}] });

		// Create jqxTree 
		var theme = getTheme();
		// create jqxTree
		$('#jqxTree').jqxTree({ height: '100%', hasThreeStates: true, checkboxes: true, width: '500px', theme: theme });
		//Listen to event on checkboxes in the tree to activate the layers required
		$("#jqxTree").bind('change', function (event) {
				alert("in");
				// tree UI element.
				var element = event.args.element;
				// check state.
				 var checked = event.args.checked;
				// tree item.
				var item = $("#jqxTree").jqxTree('getItem', element);
                //alert(element.id + " Checked: " + checked);
				alert(" Checked: " + item.label); <-- this does not work
        });
    });
</script>

</head>
 
<body onload="init()">
<p><b>Map Explorer</b></p>

<div id="MySplitter">
	<div id="legend">
	        <div style='float: left;'>
            <div id='jqxTree' style='float: left;'>
                <ul>
                    <li item-checked='true' item-expanded='true'>Base Layer
                        <ul>
                            <li id="a" label="aa">OpenStreetMap</li>
                            <li id="b" label="bb">Google Maps</li>
                            <li id="c" label="cc">Google Satellite</li>
                        </ul>
                    </li>
                    <li>WebMap Service Layers
                        <ul>
                            <li id="d" label="dd">Saudi Incident</li>
                        </ul>
                    </li>
                </ul>
            </div>
		</div>
	</div>
    June 20, 2012 at 5:51 pm Tree view – checkbox click #5169

    Peter Stoev
    Keymaster

    Hi nazzrkhan,

    With jqxTree, you need to use the ‘checkChange’ event. It provides details about the clicked item. The jqxCheckbox’s change event is bubbled up from the checkbox element to the tree element, but it does not bring any information about thre tree.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.