Service Based Architecture - Kendo - Get a list of sites

This might be a little obscure, but it's the path that I'm going down right now, so it is what it is.

This is a code example for returning a list of sites using the Telerik Kendo model to build a phone app. It's a one page demo that returns a list of sites (warehouses) from the TWO company. The resulting page looks like this:

Related Articles

... and you 'll find more on the Service Based Architecture Menu

 In Visual Studio, you open a Kendo app and replace all of the code in index.html with this code. You also need to copy in all the stylesheets and javascript files from the Telerik install folder (or it won't work)

I'd love to write more articles on this, but I'll wait to see if there is any interest.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
 
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
 
    <div id="example">
        <div id="grid"></div>
 
        <script>
            //var auth = "Basic ZGV2c2hlZFxzdGV2ZTpFeG9kMjAwNw=="
            var auth = "Basic steve:Exod2007"
            $(document).ready(function () {
                var dataSource = new kendo.data.DataSource({
                    type: "json",
                    transport: {
                        read: {
                            url: "https://vmgp2015.devshed.local/GPService/Tenants(DefaultTenant)/Companies(Fabrikam,%20Inc.)/Dynamics/Inventory/Sites",
                            beforeSend: function (req) {
                                req.setRequestHeader("Authorization", "Basic ZGV2c2hlZFxzdGV2ZTpFeG9kMjAwNw==");
                            }
                        }
                    },
                    schema: {
                        data: "Payload"
                    },
                    error: function (e) {
                        alert(e.errorThrown)
                    }
                });
 
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    columns: [
                        { field: "LocationCode", title: "Location Code" }
                    ]
                });
            });
        </script>
    </div>
 
 
</body>
</html>

RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences