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


    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.

    		<name>All Freebees</name>


    <!DOCTYPE html>
    		<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"
    	<body class="default">
    		<div class="jqxWidget" style="font-size: 13px; font-family: Verdana; float: left;">
    			<div id="jqxgrid">
    Grid Does not display xml data #64599


    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">
        <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
                    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' }
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">

    – here is part of the xml data:

    <?xml version="1.0" encoding="utf-8" ?>
      <Product ProductID="1">
        <QuantityPerUnit>10 boxes x 20 bags</QuantityPerUnit>
      <Product ProductID="2">
        <QuantityPerUnit>24 - 12 oz bottles</QuantityPerUnit>

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.