jube-fork/Jube.App/wwwroot/kendo/examples/datasource/xml-data.html

<!DOCTYPE html>
<html>
<head>
    <title>Binding to XML</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example">

            <ul id="books"></ul>

            <script id="template" type="text/x-kendo-template">
                <li class="book">
                    <a href="#= url #"><img src="../content/web/datasource/xml-data/#= cover #" /></a>
                    <h3>#= title #</h3>
                    by #= author #
                </li>
            </script>

            <script>
                $(document).ready(function() {
                    function onChage() {
                        $("#books").html(kendo.render(template, this.view()));
                    }

                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            // specify the XML file to read. The same as read: { url: "books.xml" }
                            read: "../content/web/datasource/books.xml"
                        },
                        schema: {
                            // specify the the schema is XML
                            type: "xml",
                            // the XML element which represents a single data record
                            data: "/books/book",
                            // define the model - the object which will represent a single data record
                            model: {
                                // configure the fields of the object
                                fields: {
                                    // the "title" field is mapped to the text of the "title" XML element
                                    title: "title/text()",
                                    // the "author" field is mapped to the text of the "author" XML element
                                    author: "author/text()",
                                    // the "url" field is mapped to the text of the "url" XML element
                                    url: "url/text()",
                                    // the "cover" field is mapped to the "id" attribute of the "book" XML element
                                    cover: "cover"
                                }
                            }
                        },
                        change: onChage
                    });

                    dataSource.read();
                });
            </script>

            <style>
                #books {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                }

                #books:after {
                    content: ".";
                    display: block;
                    clear: both;
                    height: 0;
                    visibility: hidden;
                }

                .book {
                    float:left;
                    width: 28%;
                    height:240px;
                    text-align: center;
                    padding: 0 1em;
                }

                .book h3 {
                    margin-bottom: 0;
                }

                .book a {
                    display: inline-block;
                    max-width: 128px;
                    margin-bottom: 1em;
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    border-radius: 8px;
                    box-shadow: 0 0 4px #CCCCFF;
                    border: 5px solid transparent;
                }

                .book a:hover {
                    border-color: #e26b1d;
                }

                .book img {
                    vertical-align: middle;
                    border: 0;
                    max-width: 100%;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    border-radius: 3px;
                }
                #example h4 {
                    width: auto;
                }
                pre.prettyprint {
                    height: auto;
                }
            </style>

            <div class="box wide">
                <h4>Information</h4>
                <p>This example is bound to XML in the following format:</p>
                <h4 style="padding-top: 2em;">XML Format</h4>
                    <pre class="prettyprint"><code>&lt;book cover="javascript-the-good-parts.png"&gt;
    &lt;title&gt;JavaScript: The Good Parts&lt;/title&gt;
    &lt;author&gt;Douglas Crockford&lt;/author&gt;
    &lt;url&gt;https://www.amazon.com/&hellip;&lt;/url&gt;
&lt;/book&gt;</code></pre>
                   <br />
                <a href="../content/web/datasource/books.xml">&raquo; See the full XML</a>
            </div>
        </div>


    
        <div class='demo-section'>
            <h3>Note:</h3>
            <p>
                Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol).
                If the demo is not working as expected, please host the Kendo folder on a web server.
            </p>
        </div>
    
</body>
</html>