jQWidgets Forums

This topic contains 11 replies, has 2 voices, and was last updated by jerry@zmjjohnson.com 12 years, 3 months ago.

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

Author

Load XML data from a non-root element Posts

February 1, 2013 at 8:13 am Load XML data from a non-root element #14482

Member

All of the samples appear to use the attributes root and record to load XML data into the grid. But I can’t find any examples where the root element is not reading from the root element of the file. I have an XML file such as this:

And I need to read the “records” whose parent is level2. I’ve tried setting the root attribute to level2 and I’ve tried root/level1/level2 but neither seems to read the data from the xml file.

What is the syntax needed to indicate a root for the data source that is not the first element in the file?

February 1, 2013 at 8:23 am Load XML data from a non-root element #14484

Peter Stoev

Keymaster

Hi jerry,

Please send us a sample of such XML file including sample Data and we will try to help you loading it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 1, 2013 at 5:46 pm Load XML data from a non-root element #14505

jerry@zmjjohnson.com

Member

Here is my source:

MTMMeetingDate
DateTime
MTM Meeting Date
Compass Smart Forms

MTMMeetingNbr
Text
MTM Meeting Nbr
Compass Smart Forms

MTMMeetingType
Text
MTM Meeting Type
Compass Smart Forms

CompassContent
DocumentLibrary

CodeFile
Custom List

CodeType
Text

SortOrder
Integer

All Items

CodeType
True

CodeType

SortOrder

LinkTitle

CodeType
Docuemnt Type

SortOrder
1

Title
Submittal

CodeType
Docuemnt Type

SortOrder
2

Title
Drawings

Administrative
DocumentLibrary

Announcements
Announcements

Bid Documents
DocumentLibrary

Entity
Lookup
Company
Title

Bid Doc Type
Choice

Drawing
Information

Doc Description
Text

Notes
Note

MeetingMinutes
Form Library
MeetingMinutes

All Documents

ID
False

DocIcon

LinkFilename

Modified

Editor

CheckoutUser

MTMPrepBy

MTMMeetingDate

MTMSubject

MTMMeetingNbr

MTMMeetingType

and here is the code:

var source =
{
datafields: [
{ name: ‘SiteColumnName’ },
{ name: ‘SiteColumnType’ },
{ name: ‘SiteColumnDisplay’ },
{ name: ‘SiteColumnGroup’ }
],
root: “RootSiteColumns”,
record: “SiteColumn”,
id: ‘ID’,
datatype: “xml”,
async: false,
url: url
};

I need to bind the grid to the SiteColumn elements.

Thank you for your assistance.

February 1, 2013 at 5:48 pm Load XML data from a non-root element #14507

jerry@zmjjohnson.com

Member

I’m not sure my copy/paste of the XML looks correct. Here’s another snippet:

‘
‘
‘
‘
‘
‘ MTMMeetingDate
‘ DateTime
‘ MTM Meeting Date
‘ Compass Smart Forms
‘
‘
‘ MTMMeetingNbr
‘ Text
‘ MTM Meeting Nbr
‘ Compass Smart Forms
‘
‘
‘ MTMMeetingType
‘ Text
‘ MTM Meeting Type
‘ Compass Smart Forms
‘
‘
‘
‘
‘ …

February 1, 2013 at 5:49 pm Load XML data from a non-root element #14508

jerry@zmjjohnson.com

Member

I don’t understand how to post my XML to you on this forum. It keeps removing my tags.

February 1, 2013 at 5:51 pm Load XML data from a non-root element #14509

jerry@zmjjohnson.com

Member

The tag structure is as follows:

CompassSetup -> RootSite -> RootSiteColumns

and then there are multiple SiteColumn nodes under the RootSiteColumns node

February 2, 2013 at 7:03 am Load XML data from a non-root element #14536

Peter Stoev

Keymaster

Hi Jerry,

To post HTML, XML, JavaScript, please take a look at this topic: http://www.jqwidgets.com/community/topic/code-formatting/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 2, 2013 at 4:27 pm Load XML data from a non-root element #14546

jerry@zmjjohnson.com

Member

<CompassSetup>
	<RootSite>
		<!--RootSiteURL></RootSiteURL-->
		<RootSiteColumns>
			<SiteColumn ID="1">
				<SiteColumnName>MTMMeetingDate</SiteColumnName>
				<SiteColumnType>DateTime</SiteColumnType>
				<SiteColumnDisplay>MTM Meeting Date</SiteColumnDisplay>
				<SiteColumnGroup>Compass Smart Forms</SiteColumnGroup>
			</SiteColumn>
			<SiteColumn ID="2">
				<SiteColumnName>MTMMeetingNbr</SiteColumnName>
				<SiteColumnType>Text</SiteColumnType>
				<SiteColumnDisplay>MTM Meeting Nbr</SiteColumnDisplay>
				<SiteColumnGroup>Compass Smart Forms</SiteColumnGroup>
			</SiteColumn>
			<SiteColumn ID="3">
				<SiteColumnName>MTMMeetingType</SiteColumnName>
				<SiteColumnType>Text</SiteColumnType>
				<SiteColumnDisplay>MTM Meeting Type</SiteColumnDisplay>
				<SiteColumnGroup>Compass Smart Forms</SiteColumnGroup>
			</SiteColumn>
		</RootSiteColumns>
        <RootLists></RootLists>
	</RootSite>
</CompassSetup>
can you answer my original question? thank you

February 2, 2013 at 5:08 pm Load XML data from a non-root element #14548

Peter Stoev

Keymaster

Hi Jerry,

Here’s a sample which uses your data:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from XML data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "data.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'SiteColumnName'},
                    { name: 'SiteColumnType'},
                    { name: 'SiteColumnDisplay'},
                    { name: 'SiteColumnGroup'}
                ],
                root: "CompassSetup",
                record: "SiteColumn",
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'SiteColumnName', datafield: 'SiteColumnName', width: 250 },
                  { text: 'SiteColumnType', datafield: 'SiteColumnType', width: 150 },
                  { text: 'SiteColumnDisplay', datafield: 'SiteColumnDisplay', width: 180 },
                  { text: 'SiteColumnGroup', datafield: 'SiteColumnGroup'}
                ]
            });
        });
    </script>
</head>
<body class='default'>
     <div id="jqxgrid"></div>
</body>
</html>

Where data.xml is:

<CompassSetup>
	<RootSite>
		<!--RootSiteURL></RootSiteURL-->
		<RootSiteColumns>
			<SiteColumn ID="1">
				<SiteColumnName>MTMMeetingDate</SiteColumnName>
				<SiteColumnType>DateTime</SiteColumnType>
				<SiteColumnDisplay>MTM Meeting Date</SiteColumnDisplay>
				<SiteColumnGroup>Compass Smart Forms</SiteColumnGroup>
			</SiteColumn>
			<SiteColumn ID="2">
				<SiteColumnName>MTMMeetingNbr</SiteColumnName>
				<SiteColumnType>Text</SiteColumnType>
				<SiteColumnDisplay>MTM Meeting Nbr</SiteColumnDisplay>
				<SiteColumnGroup>Compass Smart Forms</SiteColumnGroup>
			</SiteColumn>
			<SiteColumn ID="3">
				<SiteColumnName>MTMMeetingType</SiteColumnName>
				<SiteColumnType>Text</SiteColumnType>
				<SiteColumnDisplay>MTM Meeting Type</SiteColumnDisplay>
				<SiteColumnGroup>Compass Smart Forms</SiteColumnGroup>
			</SiteColumn>
		</RootSiteColumns>
        <RootLists></RootLists>
	</RootSite>
</CompassSetup>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 3, 2013 at 12:55 am Load XML data from a non-root element #14559

jerry@zmjjohnson.com

Member

Wow, I must be blind. I feel like I have exactly what you indicated but I get “No data to display”. I’ve copied all the required files into a single folder to simply as much as possible. Can you see what I’m doing wrong? Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Compass setup variables.</title>
    <link rel="stylesheet" href="jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxdata.js"></script>
    <script type="text/javascript" src="jqxbuttons.js"></script>
    <script type="text/javascript" src="jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqxmenu.js"></script>
    <script type="text/javascript" src="jqxgrid.js"></script>
    <script type="text/javascript" src="jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqxgrid.columnsresize.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "data.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'SiteColumnName'},
                    { name: 'SiteColumnType'},
                    { name: 'SiteColumnDisplay'},
                    { name: 'SiteColumnGroup'}
                ],
                root: "CompassSetup",
                record: "SiteColumn",
                url: url
            };
            var dataAdapter = new jQuery.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'SiteColumnName', datafield: 'SiteColumnName', width: 250 },
                  { text: 'SiteColumnType', datafield: 'SiteColumnType', width: 150 },
                  { text: 'SiteColumnDisplay', datafield: 'SiteColumnDisplay', width: 180 },
                  { text: 'SiteColumnGroup', datafield: 'SiteColumnGroup'}
                ]
            });
        });
    </script>
</head>
<body class='default'>
     <div id="jqxgrid"></div>
</body>
</html>

February 3, 2013 at 3:29 am Load XML data from a non-root element #14569

Peter Stoev

Keymaster

Hi Jerry,

As far as I can see, the posted code in your post is the copied code from my post. However, I see the data from data.xml which contains your XML data. If you would like, I can post online example + image of that. My test is with jQWidgets 2.6.1.

Here’s the posted and working code again:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from XML data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "data.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'SiteColumnName'},
                    { name: 'SiteColumnType'},
                    { name: 'SiteColumnDisplay'},
                    { name: 'SiteColumnGroup'}
                ],
                root: "CompassSetup",
                record: "SiteColumn",
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'SiteColumnName', datafield: 'SiteColumnName', width: 250 },
                  { text: 'SiteColumnType', datafield: 'SiteColumnType', width: 150 },
                  { text: 'SiteColumnDisplay', datafield: 'SiteColumnDisplay', width: 180 },
                  { text: 'SiteColumnGroup', datafield: 'SiteColumnGroup'}
                ]
            });
        });
    </script>
</head>
<body class='default'>
     <div id="jqxgrid"></div>
</body>
</html>

Here’s an image:

In addition, make sure that you run your code on a web server.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 4, 2013 at 5:23 am Load XML data from a non-root element #14600

jerry@zmjjohnson.com

Member

It was my XML file. I gave you a snippet, but my full file had a typo in it. Well done and thank you for the assist.

Author

Posts

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

You must be logged in to reply to this topic.