jQWidgets Forums

Tagged: jqxtree, Tree, XML

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 12 years, 7 months ago.

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

Author

Bind Generic XML to JqxTree Posts

October 23, 2012 at 9:06 am Bind Generic XML to JqxTree #9920

marchip

Member

how it’s possible to bind a generic xml to jqxTree?

Thanks

October 23, 2012 at 9:16 am Bind Generic XML to JqxTree #9925

Dimitar

Participant

Hello marchip,

Here is a demo showcasing an XML Tree. We hope it is helpful to you.

Best Regards,
Dimitar

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

October 23, 2012 at 9:38 am Bind Generic XML to JqxTree #9931

marchip

Member

I’ve seen this example. The example assumes that I know the structure of the XML. But I do not know the structure of the XML that I want to represent.So you can pass a generic xml and render it?

Thanks

October 23, 2012 at 9:45 am Bind Generic XML to JqxTree #9932

Dimitar

Participant

Hi marchip,

It is not possible to initialize a jqxTree without knowing the structure of the XML.

Best Regards,
Dimitar

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

October 23, 2012 at 11:02 am Bind Generic XML to JqxTree #9937

marchip

Member

Ok thank you.
Another question…
how can I retrieve the path of an item of which I’m doing drag & drop?

Example
I have this structure:

<prova2>	
	<campo1>c1</campo1>	
	<campo2>c1</campo2>
	<campo3>
		<campo4>c4</campo4>
	</campo3>
</prova2>

if I drop “campo4” i would to know the path prova2/campo3/campo4…

It’s possible?

Thanks

October 23, 2012 at 12:59 pm Bind Generic XML to JqxTree #9945

Dimitar

Participant

Hi marchip,

Here is how to show the path of the dropped file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxTree is built from XML data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
                        { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
                        { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
                        { name: 'City', map: 'm\\:properties>d\\:City' },
                        { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
                        { name: 'Country', map: 'm\\:properties>d\\:Country' }
                    ],
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:CustomerID',
                    url: "../demos/sampledata/customers.xml",
                    async: false
                };
            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);
            // perform Data Binding.
            dataAdapter.dataBind();
            // get the tree items. The first parameter is the grouping fields. The second parameter is the sub items collection name. The third parameter is the group's name. 
            // Each jqxTree item has a 'label' property, but in the data source, we have a 'CompanyName' field. The last parameter 
            // specifies the mapping between the 'CompanyName' and 'label' fields.  
            var records = dataAdapter.getGroupedRecords(['Country', 'City'], 'items', 'label', [{ name: 'uid', map: 'value' }, { name: 'CompanyName', map: 'label'}], 'row', 'value');
            $('#jqxWidget').jqxTree({ source: records, height: '300px', width: '300px', theme: theme, allowDrag: true, allowDrop: true });
            $('#jqxWidget').bind('dragEnd', function (event) {
                var target = event.args.originalEvent.target;
                var targetParents = $(target).parents();
                var item = null;
                $.each($("#jqxWidget").jqxTree('getItems'), function () {
                    if (this.label == event.args.label && this.value == event.args.value) {
                        item = this;
                        return false;
                    }
                });
                if (item) {
                    var parents = $(item.element).parents('li');
                    var path = "";
                    $.each(parents, function () {
                        var item = $("#jqxWidget").jqxTree('getItem', this);
                        path = item.label + "/" + path;
                    });
                    $("#path").html("Dropped file path: " + path);
                }
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxWidget'>
        </div>
    </div>
    <div id="path">
        Dropped file path:
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.