jQuery UI Widgets Forums Grid Grid Does not display xml data

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 9 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Grid Does not display xml data #64594

    kristtee
    Participant

    Hi
    I am too new for all this. Yet i want to try. I have simple xml data of url list and i want to list the title and category and when clicking on a record, a new tab is opened in the browser with the link. Here under is my xml and html data.
    ——————————–XML—————–

    
    <linkz>
    	<link>
    		<name>All Freebees</name>
    		<cat>Freebees</cat>
    		<ur>http://allthefreestock.com/</ur>
    	</link>
    	<link>
    		<name>Schema</name>
    		<cat>Framework</cat>
    		<ur>http://danmalarkey.github.io/schema/</ur>
    	</link>
    </linkz>
    

    ————————————–
    ———————html——————————

    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>My Data Grid using jQwidgets36</title>
    		<link rel="stylesheet" href="styles/jqx.apireference.css">
    		<script type="text/javascript" src="scripts/jquery-1.11.1.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/jqxlistbox.js"></script>
    		<script type="text/javascript" src="jqwidgets/jqxdropdownlist.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" src="jqwidgets/jqxgrid.filter.js"></script> 
    		<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> 
    		<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script> 
    		<script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script>
    		<script type="text/javascript">
    		<!--
    			var  source =
    			{
    				datatype = "xml",
    				datafields = [
    			    { text: 'Name',  map:  'link>name'},
    			    { text: 'Category', map: 'link>cat'},
    			    { text: 'URL' , map: 'link>ur'}
    			    ],
    			    root: "linkz",
    			    record: "link",
    			    url = "data.xml"
    			};
    
    		//-->
    		</script>
    	</head>
    
    	<body class="default">
    		<div class="jqxWidget" style="font-size: 13px; font-family: Verdana; float: left;">
    			<div id="jqxgrid">
    			</div>
    		</div>
    	</body>
    </html>
    
    Grid Does not display xml data #64599

    Nadezhda
    Participant

    Hello kristtee,

    Please, find below an example which shows how to use xml data as URL.
    You are missed to initialize the widget. In order to initialize the Grid, you need to set its source and columns properties. You can find more information for jqxGrid and how to initialize it in the Getting Started Documentation.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/products.xml";
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ProductName', type: 'string' },
                        { name: 'QuantityPerUnit', type: 'int' },
                        { name: 'UnitPrice', type: 'float' },
                        { name: 'UnitsInStock', type: 'float' },
                        { name: 'Discontinued', type: 'bool' }
                    ],
                    root: "Products",
                    record: "Product",
                    id: 'ProductID',
                    url: url
                };
                var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                    if (value < 20) {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                    }
                    else {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                    }
                }
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,                
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                      { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                      { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                      { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                      { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                    ],
                    columngroups: [
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
         </div>
    </body>
    </html>

    – here is part of the xml data:

    <?xml version="1.0" encoding="utf-8" ?>
    <Products>
      <Product ProductID="1">
        <ProductName>Chai</ProductName>
        <SupplierID>1</SupplierID>
        <CategoryID>1</CategoryID>
        <QuantityPerUnit>10 boxes x 20 bags</QuantityPerUnit>
        <UnitPrice>18.0000</UnitPrice>
        <UnitsInStock>39</UnitsInStock>
        <UnitsOnOrder>0</UnitsOnOrder>
        <ReorderLevel>10</ReorderLevel>
        <Discontinued>false</Discontinued>
      </Product>
      <Product ProductID="2">
        <ProductName>Chang</ProductName>
        <SupplierID>1</SupplierID>
        <CategoryID>1</CategoryID>
        <QuantityPerUnit>24 - 12 oz bottles</QuantityPerUnit>
        <UnitPrice>19.0000</UnitPrice>
        <UnitsInStock>17</UnitsInStock>
        <UnitsOnOrder>40</UnitsOnOrder>
        <ReorderLevel>25</ReorderLevel>
        <Discontinued>false</Discontinued>
      </Product>

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.