Reply To: How to use TreeView checkbox with a web form

[Peter StoevKeymaster]

Hi Dave,

Thank you for writing.

Let’s create a simple Tree inside a Form and a Submit button.

<form>
<div id='jqxTree'>
    <ul>
        <li>Home</li>
        <li item-checked='true' item-expanded='true'>Solutions
            <ul>
                <li>Education</li>
                <li>Financial services</li>
                <li>Government</li>
                <li item-checked='false'>Manufacturing</li>
                <li>Solutions
                    <ul>
                        <li>Consumer photo and video</li>
                        <li>Mobile</li>
                    </ul>
                </li>
                <li>All industries and solutions</li>
            </ul>
        </li>
    </ul>
</div>
<div style="margin-top: 20px;">
    <input id="submit" type="submit" />
</div>
</form>

Next, we select the jqxTree tag and call the jqxTree constructor to create the Tree widget. We also select the ‘submit’ button to create a jqxButton.

$('#jqxTree').jqxTree({ height: '350px', checkboxes: true, width: '280px' });
$("input").jqxButton();

Subscribe to the Submit Button’s click event. In the event handler, loop through all tree items and build the data that will be sent to the server. You can send the data(contains the tree items and their checked states) to the server via an ajax call.

$("input").click(function () {
    var items = $("#jqxTree").jqxTree('getItems');
    var data = '';
    $.each(items, function () {
        data += $.param({ label: this.label, checked: this.checked }) + ",";
    });
    $.ajax({
        type: "POST",
        url: "webpage.php",
        data: data,
        dataType: 'json',
        success: function () {
                       
        }
    });
});

Hope this helps you.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team