How to use TreeView checkbox with a web form

[daveMember]

Hi,

I created a web page with database-driven nested list and checkbox option set to true. It displays correctly and everything, however how do I implement this nice feature in a web form? I need to get the value of multiple checkboxes and process data using server-side scripting.

Can you please provide a simple example of TreeView with checkboxes applied to a web form?

Thanks a lot!

Dave

[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

[daveMember]

Peter, thanks for your quick reply.

Please look at the sample code which illustrates what I am trying to achieve:




Cat 1

Sub-Cat 1

Sub-Cat 2

Item 1
Item 2

Cat 2

Sub-Cat 1

Item 1
Item 2

Sub Cat 2

Item 1
Item 2

Basically, I have three levels: can select one Category, which auto select (check) the content below, or drill-down going from generic to specific (Item list, passing through Sub Category).
jqxTree does it very nicely on the UI level, but I still don’t see where to specify the “value” of each item. You mentioned Ajax, and I used it a lot in my applications, however I am stuck on this, can you provide a more detailed example of the Ajax call and scripting file? PHP or any other language you like is fine.

Thank you,
Dave

[daveMember]

Sorry, I was just able to enter the formatted code. id and name of checkbox are not correct, however value is, hope this help my point:

   <!-- Lev 1 -->
<ul style="padding-left:10px;">
	<li>
		<input type="checkbox" id="lev1" name="lev2" value="cat1"> Cat 1
		<!-- Lev 2 -->
		<ul style="padding-left:10px;">
			<li><input type="checkbox" id="lev1" name="lev2" value="cat1_sub1"> Sub-Cat 1</li>
			<li>
				<input type="checkbox" id="lev1" name="lev2" value="cat1_sub2"> Sub-Cat 2
				<!-- Lev 3 -->
				<ul style="padding-left:10px;">
					<li><input type="checkbox" id="lev1" name="lev2" value="cat1_sub2_it1"> Item 1</li>
					<li><input type="checkbox" id="lev1" name="lev2" value="cat1_sub2_it2"> Item 2</li>
				</ul><!-- /Lev3 -->
			</li>
		</ul><!-- /Lev2 -->		
	</li>
	<li>
		<input type="checkbox" id="lev1" name="lev2" value="cat2"> Cat 2
		<!-- Lev 2 -->
		<ul style="padding-left:10px;">
			<li>
				<input type="checkbox" id="lev1" name="lev2" value="cat2_sub1"> Sub-Cat 1
				<!-- Lev 3 -->
				<ul style="padding-left:10px;">
					<li><input type="checkbox" id="lev1" name="lev2" value="cat2_sub1_it1"> Item 1</li>
					<li><input type="checkbox" id="lev1" name="lev2" value="cat2_sub1_it2"> Item 2</li>
				</ul><!-- /Lev3 -->
			</li>
			<li>
				<input type="checkbox" id="lev1" name="lev2" value="cat2_sub2"> Sub Cat 2
				<!-- Lev 3 -->
				<ul style="padding-left:10px;">
					<li><input type="checkbox" id="lev1" name="lev2" value="cat2_sub2_it1"> Item 1</li>
					<li><input type="checkbox" id="lev1" name="lev2" value="cat2_sub2_it2"> Item 2</li>
				</ul><!-- /Lev3 -->
			</li>
		</ul><!-- /Lev2 -->		
	</li>
</ul><!-- /Lev1 -->

[Peter StoevKeymaster]

Hi Dave,

In your code, you can select all checkboxes and build the data string which you can send to your Server. The data string contains the Label, CheckBox state and Value of each Tree Item.

            var data = '';
            $("#tree input").each(function () {
                var checkbox = $(this);
                var value = checkbox.val();
                var checked = checkbox.is(':checked');
                var label = $.trim(checkbox.parent().text());
                data += $.param({ label: label, value: value, checked: checked }) + ",";
            });

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[mbeasley183Member]

Is there anyway to set and retrieve “values” (not labels) when using the source method? My situation is that I have a form based tree with checkboxes. The items are brought in from a database, serialized into a JSON object, passed to the page via AJAX and then loaded into the treeview. Some of the strings that I use for labels are quite long and I’d prefer, when I submit this form, to be able to simply store a coded value for each item (rather than the label) and the item’s checkstate. Any thoughts?

[mbeasley183Member]

Short turn around from my previous question, but a good solution to setting and retrieving the “value” for a tree when using the source method:

In your JSON object, specify a “value” field for each item. Then when submitting the form you can return an array of the codes of all checked items:

                                // get all items.
                                var items = $("#jqx").jqxTree('getItems');
                                // save all checked items in checkedItems array.
                                var checkedItems = new Array();
                                $.each(items, function() {
                                    if (this.checked) {
                                        checkedItems[checkedItems.length] = this.value;
                                    }
                                });
                                return(checkedItems);

Very easy!

[Peter StoevKeymaster]

Hi Mike,

To set and retrieve values you can do something like this:

– Create Items and set their label and value properties.

var source = [
{ label: “Mail”, value: ‘id1’, expanded: true, items: [
{ label: “Calendar” },
{label: “Contacts”, selected: true }
]
},
{ label: “Inbox”, expanded: true, items: [
{ label: “Admin” },
{ label: “Corporate” },
{ label: “Finance” },
{ label: “Other” },
]
},
{ label: “Deleted Items” },
{ label: “Notes” },
{ label: “Settings” },
{ label: “Favorites” },
];

– create the jqxTree

$(‘#jqxTree’).jqxTree({ source: source, width: ‘250px’, height: ‘200px’ });

– retrieve the first item’s value.

var items = $(‘#jqxTree’).jqxTree(‘getItems’);
var value = items[0].value;

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[marcamMember]

Dear Peter Stoev
I tried the first example you gave. I put javascript breakpoints at the lines :
BR1-

$("input").click(function () {

BR2

$.ajax({

When I submit my form by clicking “submit”, the script stops at BR1 but it never goes inside the function and my understanding is that it never POST any data ;-(

do you have any idea ?

thanks

Marc

[Peter StoevKeymaster]

Hi Marc,

If you submit a Form with Ajax, use the way I posted. The other way of submitting a Form is the standard way which is without Ajax and you’ll have to add parameters to the form’s action or via hidden fields.

Submission with Ajax:

$("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 () {
        }
    });
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[marcamMember]

Thanks Peter,
My error was due to the fact that I had put the

$("input").click(function() {

outside the

$(document).ready(function () {

Thanks for your help,
Marc

[Author]

Posts